HTML+CSS仿写京东购物车静态页面附代码（web前端期末大作业）
我本来打算用JavaScript来实现一些功能，但无奈自己的水平有限，用到一半就不得不放弃了。看来我的JavaScript技能还有待提高啊！不过，我还是想给大家展示一下我目前的效果。（水平有限请见谅，希望可以蒙混过关）仅供学习参考。
·
前言：
“我本来打算用JavaScript来实现一些功能，但无奈自己的水平有限，用到一半就不得不放弃了。看来我的JavaScript技能还有待提高啊！不过，我还是想给大家展示一下我目前的效果。（水平有限请见谅，希望可以蒙混过关）仅供学习参考。
京东购物车页面（官方的效果）
仿造的效果
整体布局
个人认为我这个整体布局还是比较科学的，把这个界面拆分了六块去思考实现的。分别为导航，搜索框，标题，显示菜单，商品的详情展示，结算这几个部分。你想做一个页面效果肯定是要分成哪几个部分有自己的思路哪一块对应哪一块，并去逐一实现他们。
细节方面
作为一名初学者应养成写注释的好习惯，同时注重规范命名（学好英语很关键，避免拼音命名！）以提升代码可读性。至于图标和图片资源，百度能解决大部分需求，偶尔遇到难找的，我会去iconfont-阿里巴巴矢量图标库，那里基本能找到常用图标，即便不是完全相同，也总有相似的。
正文
废话不多说开整，以下是代码部分
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/jd.css"/>
<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
</head>
<body>
<!--导航开始-->
<div class="nav">
<div class="warp">
<ul class="nav_ul1">
<li><a href=""><i class="iconfont">󰄫</i> 京东首页</a></li>
<li><a href="">配送到：北京</a></li>
</ul>
<ul class="nav_ul2">
<li><a href="">洋洋宝贝</a><span>|</span></li>
<li><a href="">我的订单</a><span>|</span></li>
<li><a href="">我的京东</a><span>|</span></li>
<li><a href="">京东会员</a><span>|</span></li>
<li><a href="">企业采购</a><span>|</span></li>
<li><a href="">京东手机</a><span>|</span></li>
<li><a href="">关注京东</a><span>|</span></li>
<li><a href="">客户服务</a><span>|</span></li>
<li><a href="">网站导航</a></li>
</ul>
</div>
</div>
<!-- 导航结束 -->
<!--搜索框开始-->
<div class="search">
<div class="warp">
<img src="img/jdlogo.png"/>
<ul class="search_1">
<li><a href="">购物车</a></li>
</ul>
<div class="search_div">
<input type="text" class="search_text"/>
<input type="button" value="搜索" class="search_but"/>
</div>
</div>
</div>
<!--搜索框结束-->
<!--标题开始-->
<div class="title warp">
<h3>全部商品</h3>
<div>
<sapn>配送到</sapn>
<select>
<option>昌平区</option>
<option>顺义区</option>
<option>大兴区</option>
<option>朝阳区</option>
<option>海淀区</option>
<option>石景山区</option>
<option>东城区</option>
<option>房山区</option>
<option>通州区</option>
<option>丰台区</option>
</select>
</div>
</div>
<!--标题结束-->
<!--显示菜单的开始-->
<div class="tips warp">
<ul>
<li>
<input type="checkbox" />
全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<!--显示菜单的结束-->
<!--商品的详情展示开始-->
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" /></li>
<li class="info_2"><img src="img/zhuzi.jpg" width="100px"/></li>
<li class="info_3">
<a>海蒂极简系列9.5-10mm18K金淡水珍珠耳钉素耳饰女附证书七夕礼物</a>
</li>
<li class="info_4"><a>白色 9.5-10mm [日常百搭]</a></li>
<li class="info_5"><a>￥439.00</a></li>
<li class="info_6">
<button class="but_1">-</button>
<input type="text" name="" id="" value="1" />
<button class="but_2">+</button>
</li>
<li class="info_7"><a>￥439.00</a></li>
<li class="info_8">
<button class="but_3">
<a>删除</a>
</button><br />
<button class="but_4">
<a>移入关注</a>
</button>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" /></li>
<li class="info_2"><img src="img/miphone.jpg" width="100px"/></li>
<li class="info_3">
<a>小米 Redmi K70 全网通5G手机 16GB+1TB 墨羽 ZG</a>
</li>
<li class="info_4"><a>墨羽 16GB+1TB</a></li>
<li class="info_5"><a>￥3129.0</a></li>
<li class="info_6">
<button class="but_1">-</button>
<input type="text" name="" id="" value="1" />
<button class="but_2">+</button>
</li>
<li class="info_7"><a>￥3129.0</a></li>
<li class="info_8">
<button class="but_3">
<a>删除</a>
</button><br />
<button class="but_4">
<a>移入关注</a>
</button>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" /></li>
<li class="info_2"><img src="img/camera.jpg" width="100px"/></li>
<li class="info_3">
<a>小米摄像头C300双摄版高清无线摄像头监控家用室内智能摄像机手机远程监</a>
</li>
<li class="info_4"><a>【套餐一】小米摄像头+64G内存卡+吊装支架</a></li>
<li class="info_5"><a>￥319.00</a></li>
<li class="info_6">
<button class="but_1">-</button>
<input type="text" name="" id="" value="1" />
<button class="but_2">+</button>
</li>
<li class="info_7"><a>￥319.00</a></li>
<li class="info_8">
<button class="but_3">
<a>删除</a>
</button><br />
<button class="but_4">
<a>移入关注</a>
</button>
</li>
</ul>
</div>
<!--商品的详情展示结束-->
<!--结算开始-->
<div class="balance warp">
<ul class="balance_ul1">
<li>
<input type="checkbox" name="" id="" value="" />
全选
</li>
<li><a>删除选中商品</a></li>
<li><a>移入关注</a></li>
<li><a>清理购物车</a></li>
</ul>
<ul class="balance_ul2">
<li><a>已选择<span>1</span>件商品</a></li>
<li><a>总价<span>￥12</span></a></li>
<li>
<button class="butt">去结算</button>
</li>
</ul>
</div>
<!--结算结束-->
</body>
</html>CSS代码
.nav {
height: 30px;
background-color: #f1f1f1;
}
.warp {
width: 1000px;
margin: 0px auto;
}
.nav_ul1, .nav_ul2 > li {
float: left;
}
.nav_ul1 li {
float: left;
line-height: 30px;
margin-right: 20px;
}
.nav_ul1 a, .nav_ul2 a, .nav_ul2 span {
font-size: 12px;
color: grey;
}
.nav_ul2 {
float: right;
}
.nav_ul2 li, .nav_ul2 span {
line-height: 30px;
margin-left: 10px;
}
.nav a:hover {
color: red;
}
/*搜索框开始*/
.search{
margin-top: 20px;
}
.search_1 li a{
float: left;
margin-top: 20px;
margin-left:20px;
font-size: 16px;
color: black;
}
.search img{
/*清除之前的所有样式*/
clear: both;
float: left;
}
.search_div{
float: right;
margin-top: 25px;
}
.search_text{
width: 265px;
height: 21px;
border: 3px solid #c91623;
position: relative;
left: 4px;
top: -1px;
}
.search_but{
width: 51px;
height: 28px;
background-color: #c91623;
border: 0px;
color: #FFFFFF;
}
/*搜索框结束*/
/*标题的开始*/
.title{
margin-top: 130px;
}
.title h3{
float: left;
font-size: 23px;
color: #c91623;
}
.title div{
float: right;
font-size: 14px;
color: gray;
}
/*标题的结束*/
/*显示菜单的开始*/
.tips{
width: 1000px;
height: 50px;
background-color: #f1f1f1;
margin-top: 165px;
border: 1px solid #e9e9e9;
}
.tips li{
float: left;
line-height: 50px;
font-size: 12px;
color: gray;
}
.tips li:nth-child(1){width: 90px;border-top: 3px solid #c91623;}
.tips li:nth-child(2){margin-left: 80px}
.tips li:nth-child(3){margin-left: 430px}
.tips li:nth-child(4){margin-left: 83px}
.tips li:nth-child(5){margin-left: 110px}
.tips li:nth-child(6){margin-left: 50px}
/*显示菜单的结束*/
/*商品详情展示开始*/
.info{
width: 1000px;
height: 130px;
background-color: #fff4e8;
border:1px solid gray;
margin-top: 20px;
border-top: 3px solid gray;
}
.info li{
float:left;
margin-top: 13px;
}
.info a{
font-size: 12px;
color: #333333;
}
.info_1{
margin-left: 23px;
}
.info_2{
margin-left: 15px;
border:1px solid gray;
}
.info_3{
margin-left: 30px;
width: 270px;
height: 20px;
}
.info_3 a:hover{
color: #c91623;
}
.info_4{
margin-left: 30px;
width: 100px;
height: 20px;
}
.info_5{
margin-left: 30px;
}
.info_6{
margin-left: 40px;
}
.info_6 input{
width: 30px;
height: 13px;
text-align: center;
position: relative;
line-height: 11px; /* 行高与按钮高度相同，实现垂直居中 */
top:-2px;
left: -5px;
}
.info_6 button{
width: 18px;
height: 18px;
}
.but_1{
position: relative;
text-align: center; /* 文本水平居中 */
line-height: 11px; /* 行高与按钮高度相同，实现垂直居中 */
top:-2px;
left: 1px;
}
.but_2{
position: relative;
text-align: center; /* 文本水平居中 */
line-height: 11px; /* 行高与按钮高度相同，实现垂直居中 */
top:-2px;
left: -11px;
}
.info_7{
margin-left: 50px;
font-weight: bold;
}
.info_8{
margin-left: 130px;
}
.but_3{
position: relative;
top:-30px
}
.but_4{
position: relative;
top:-26px
}
/*商品详情展示结束*/
/*结算模块的开始*/
.balance{
width: 1000px;
height: 50px;
border: 1px solid gray;
margin-top: 20px;
}
.balance_ul1,.balance_ul1>li,.balance_ul2>li{
float: left;
line-height: 50px;
margin-left: 11px;
}
.balance_ul2{
float: right;
}
.butt{
width: 100px;
height: 50px;
background-color: #c91623;
border: 0px ;
color: #FFFFFF;
font-size: 20px;
font-weight: bold;
}
.balance span{
font-size: 25px;
color: #c91623;
font-weight: bold;
}
/*结算模块的结束*/结尾
以上就是我的全部代码，一点一点敲的，希望对你们有帮助。
如果你想追求完美，模仿所有，个人建议学习js对其中的动态效果功能进行完善。感谢观看，初学者水平有限请见谅。如果需要项目源码压缩包，详细见资源绑定。评论区也会发，第一次写文章，有点找不到在哪上传压缩包。
电商企业物流数字化转型必备！快递鸟 API 接口，72 小时快速完成物流系统集成。全流程实战1V1指导，营造开放的API技术生态圈。
更多推荐
13
0- 0
已为社区贡献1条内容
所有评论(0)