HTML,CSS篇:真·伪京东购物车
本文只是个简单的小栗子,适合前端小白去熟悉,HTML,CSS。
HTML部分
<body>
<div class="first">
<div class="first_one">
<ul><li><a href="">京东首页</a></li>
<li><a href="">安徽 </a></li></ul>
<ul class="first_two">
<li><a href="">你好,请登录</a></li>
<li><a href="">免费注册</a></li>
<li><a href="">我的订单</a><span id="">|</span></li>
<li><a href="">我的京东</a><span id="">|</span></li>
<li><a href="">京东会员</a><span id="">|</span></li>
<li><a href="">企业采购</a><span id="">|</span></li>
<li><a href="">客户服务</a><span id="">|</span></li>
<li><a href="">网站导航</a><span id="">|</span></li>
<li><a href="">手机京东</a></li>
</ul> </div>
</div>
<!--第二部分-->
<div class="two">
<img src="http://misc.360buyimg.com/jdf/1.0.0/unit/global-header/5.0.0/i/jdlogo-201708-@1x.png"/>
<img src="http://misc.360buyimg.com/user/cart/widget/header-2017/i/cart-icon.png"/>
<div class="two_one">
<input type="text" id="" value="" class="two_text"/>
<input type="button" id="" value="搜索" class="two_bu" />
</div>
</div>
<div class="three">
<div class="three_one">
<h3>全部商品</h3>
<div class="three_two">
<span id="">
配送至
</span>
<select name="">
<option selected="selected">凤阳</option>
<option value="">刘福</option>
<option value="">五点</option>
<option value="">大庙</option>
</select>
</div></div>
</div>
<div class="four">
<ul>
<li><input type="checkbox"/>全选</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<div class="five">
<ul class="five_one">
<li><input type="checkbox" id="" value="" /></li>
<li><img src="//img10.360buyimg.com/cms/s80x80_jfs/t10747/87/1493932390/227203/ed03d020/59e1d4edNba1da5ec.jpg"/></li>
<li>蓉城称重电子称台秤30kg/1g公斤计价</li>
<li>升级2代省电加厚盘</li>
<li><span>¥118.00
</span></li>
<li><button class="five_bu">-</button>
<input type="text" id="" value="1" />
<button>+</button>
</li>
<li><span>¥118.00
</span></li>
<li><a href="">删除</a><br /><a href="">移到我的关注</a></li>
</ul>
</div>
<div class="six">
<ul class="six_one">
<li><input type="checkbox" id="" value="" /></li>
<li><img src="//img10.360buyimg.com/cms/s80x80_jfs/t1/84922/14/5256/422945/5deb69e7Eb3b7fa3b/1033b04cf7bae706.jpg"/></li>
<li>沐美电子秤</li>
<li>升级USB充电款</li>
<li><span>¥24.90
</span></li>
<li><button class="six_bu">-</button>
<input type="text" id="" value="1" />
<button>+</button>
</li>
<li><span>¥24.90
</span></li>
<li><a href="">删除</a><br /><a href="">移到我的关注</a></li>
</ul>
</div>
<div class="seven">
<ul>
<li><input type="checkbox"/></li>
<li>全选</li>
<li>删除选中商品</li>
<li>移到关注</li>
<li>清理购物车</li>
<li class="seven_one">已选择3件商品</li>
<li class="seven_two">总价:</li>
<li><span id="">¥238.90
</span></li>
<li class="seven_three">促销:¥0.00</li>
<div class="eirht">
<ul>
<li><input type="button" id="" value="去结算"/></li>
</ul>
</div>
</ul>
</div>
</body>
有两个CSS文件
1.CSS常规设置
body,div,ul,h3,li{margin: 0px;padding: 0px;}
body{text-align: center;font-size: 10;}
a{text-decoration: none;}
li{list-style: none;}
2.CSS主体部分
.first_one {
width: 1000px;
height: 30px;
background-color: ghostwhite;
margin: 0 auto;
/*border:1px solid green;*/
}
.first_one li{
float: left;
}
.first_one a,.first_two a,.first_two span{
line-height: 30px;
color: grey;
font-size: 12px;
margin-left: 10px;
}
.first{
width: 100%;
height: 30px;
background-color: ghostwhite;
}
.first_two{
float: right;
}
a:hover{color: red;
text-decoration: underline;}
/第二部分/
.two{
height: 60px;
margin-left: 320px;
margin-top: 30px;
}
.two img{
float: left;
}
.two_one{
float: right;
margin-top: 25px;
margin-right: 324px;
}
.two_text{
width: 265px;
height: 21px;
border: 3px solid red;
position: relative;
left: 5px;
top: -1px;
}
.two_bu{
width: 51px;
height: 29px;
background-color: red;
border: 0px;
color: white;
}
/第三段/
.three{
margin-left: 320px;
margin-right: 324px;
height: 30px;
}
.three_one h3{
font-size: 23px;
clear: both;
float: left;
color: red;
}
.three_two{
line-height: 30px;
float: right;
color: gainsboro;
margin-top: 10px;
}
/第四部分/
.four{
background-color: gainsboro;
width: 1000px;
height: 40px;
margin-left: 320px;
float: left;
}
.four li{
float: left;
font-size: 12px;
color: gray;
line-height: 40px;
}
.four li:nth-child(1){width: 90px;border-top: 3px solid red;}
.four li:nth-child(2){margin-left: 80px;}
.four li:nth-child(3){margin-left: 400px;}
.four li:nth-child(4){margin-left: 70px;}
.four li:nth-child(5){margin-left: 110px;}
.four li:nth-child(6){margin-left: 50px;}
/第五部分/
.five{
clear: both;
width: 1000px;
height: 150px;
margin-left: 320px;
margin-top: 80px;
border: 1px solid gray;
background-color: #FFF4E8;
}
.five_one li{
margin-top: 30px;
float: left;
font-size: 12px;
color: black;
}
.five li:nth-child(1){width: 30px;}
.five li:nth-child(2){margin-left: 20px;}
.five li:nth-child(3){margin-left: 30px;}
.five li:nth-child(4){margin-left: 50px;}
.five li:nth-child(5){margin-left: 80px;}
.five li:nth-child(6){margin-left: 30px;}
.five li:nth-child(7){margin-left: 50px;}
.five li:nth-child(8){margin-left: 30px;}
.five input{width: 30px;position: relative;left:5px;text-align: center;}
.five_bu{position: relative;left:10px;}
.five a{color: black;}
.six{clear: both;
width: 1000px;
height: 150px;
margin-left: 320px;
margin-top: 30px;
border: 1px solid gray;
background-color: #FFF4E8;
}
.six_one li{
margin-top: 30px;
float: left;
font-size: 12px;
color: black;
}
.six li:nth-child(1){width: 30px;}
.six li:nth-child(2){margin-left: 20px;}
.six li:nth-child(3){margin-left: 80px;}
.six li:nth-child(4){margin-left: 140px;}
.six li:nth-child(5){margin-left: 100px;}
.six li:nth-child(6){margin-left: 30px;}
.six li:nth-child(7){margin-left: 50px;}
.six li:nth-child(8){margin-left: 40px;}
.six input{width: 30px;position: relative;left:5px;text-align: center;}
.six_bu{position: relative;left:10px;}
.six a{color: black;}
/第六半径/
.seven{clear: both;
width: 1000px;
height: 60px;
margin-left: 320px;
margin-top: 30px;
border: 1px solid gray;
background-color: white;}
.seven li{
float: left;
margin-top: 20px;
float: left;
font-size: 12px;
color: gray;
}
.seven li:nth-child(1){width: 10px;}
.seven li:nth-child(2){margin-left: 20px;}
.seven li:nth-child(3){margin-left: 20px;}
.seven li:nth-child(4){margin-left: 20px;}
.seven li:nth-child(5){margin-left: 60px;}
.seven li:nth-child(6){margin-left: 320px;position: relative;top:-10px;font-size: 14px;}
.seven li:nth-child(7){margin-left: 20px;position: relative;top:-10px;font-size: 14px;}
.seven li:nth-child(9){margin-left: 50px;position: relative;top:20px;right:140px;font-size: 14px;}
.seven li:nth-child(8){position: relative;top:-10px;font-size: 14px;}
/第八部分/
/*.eirht{
}*/
.eirht input{
width: 114px;
height: 61px;
background-color: red;
position: relative;
top: -20px;
left: 2px;
clear: both;
border: 1px solid red;
float: right;
font-size: 16px;
color:white;
text-align: center;
}
效果图是这样的
关于页面功能的增加请等下次更新。
编辑于 05-17
著作权归作者所有