学校练手作业
之前想着偷懒，找一圈没有 只能自己做了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.clearfix{
clear: both;
}
*{
padding: 0px ;
margin: 0px;
}
.shangbiankuang{
height: 30px;
border: 1px #f0f0f0 solid;
background-color: #fafafa;
}
.zhongjian{
width: 1150px;
height: 30px;
margin: 0 auto;
}
.beijing{
float: left;
line-height: 30px;
width: 100px;
color: #616161;
font-weight: 800;
font-size: 13px;
height: 30px;
}
.beijing img{
width: 19px;
line-height: 30px;
}
.shangbiankuang .zhongjian ul{
float: right;
}
.shangbiankuang .zhongjian ul li{
float: left;
margin-right: 23px;
list-style: none;
line-height: 30px;
}
.shangbiankuang .zhongjian ul li a{
text-decoration: none;
color: #46443f;
font-weight: 800;
font-size: 13px;
}
.shangbiankuang .zhongjian ul .shuxian {
color: #e7e5e7;
}
.shangbiankuang .zhongjian ul .denglu a{
color: #e52d2d;
}
.tupian1{
position: relative;
top: 5px;
}
.kongxi1{
height: 32px;
}
.haigouyoupin0{
width: 1150px;
height: 90px;
margin: 0 auto;
}
.haigouyoupin ul li{
float: left;
list-style: none;
}
.haigouyoupin1{
margin-right: 20px;
width: 262px;
height: 90px;
}
.haigouyoupin .haigouyoupin0 .haigouyoupin1 img{
width:219px;
}
.haigouyoupin2 input{
height: 40px;
width: 453px;
position: relative;
bottom: 15px;
border: #e00000 3px solid;
}
.haigouyoupin2 img{
width: 56px;
position: relative;
top: 2px;
right: 5px;
padding-right: 174px;
}
.haigouyoupin3{
line-height: 44px;
width:155px;
background-color: #e00000;
color: white;
text-align: center;
}
.kongxi2{
width: 550px;
height: 24px;
margin: 0 auto;
}
.kongxi2 ul li{
float: left;
right: 20px;
list-style: none;
margin-right: 28px;
font-size: 13px;
position: relative;
bottom: 32px;
}
.kongxi2 ul li a{
text-decoration: none;
color: #666666;
font-weight: 800;
}
.kongxi2 ul li.resou{
margin-right: 12px;
}
.kongxi2 ul li.resou a{
color: #e12a36;
}
.kongxi2 ul li.gaojisousuo{
padding-left: 186px;
}
.kongxi2 ul li.gaojisousuo a{
color:#1d961e ;
}
.shangpinfenlei{
margin: 0 auto;
width: 1150px;
}
div .shangpinfenlei1 li{
float: left;
list-style: none;
}
.shangpinfenlei2{
color: white;
background-color:#e00000 ;
padding:8px 28px 10px 28px;
position: relative;
bottom: 10px;
}
.shangpinfenlei3{
padding-left:68px;
font-size: 18px;
position: relative;
animation-play-state: 5px;
border: #666666;
font-weight: 500px;
}
.shangpinfenlei4{
padding-left: 68px;
font-size: 18px;
border: #666666;
font-weight: 500px;
}
.hengxian{
border: 2px #e00000 solid;
position: relative;
bottom: 10px;
margin-bottom: 22px;
}
.pinpai{
width: 1150px;
height: 150px;
margin: 0 auto;
border: 1px solid #d4d4d4;
background-color: white;
}
.pinpai0{
width: 134px;
line-height: 150px;
border: 1px solid #d4d4d4;
position: relative;
bottom: 82px;
}
.pinpai div{
display: inline-block;
}
.pinpai1 ul li{
list-style: none;
margin-top: 16px;
}
.pinpai1 ul li a{
text-decoration: none;
width: 510px;
color: black;
}
.pinpai1 ul li div{
width: 230px;
}
.guojia{
width: 1150px;
height: 50px;
margin: 0 auto;
border: 1px solid #d4d4d4;
background-color: white;
}
.guojia div{
display: inline-block;
}
.guojia0{
width: 134px;
line-height: 50px;
border: 1px solid #d4d4d4;
display: inline-block;
position: relative;
bottom: 36px;
}
.guojia ul{
list-style: none;
}
.guojia1 ul li a{
text-decoration: none;
color: black;
}
.guojia ul li div{
line-height: 50px;
width: 117px;
}
.kongxi3{
height: 18px;
}
table{
margin: 0 auto;
border: 1px solid #d0d0d0;
width: 1150px;
background-color: white;
}
table tr th{
font-weight: 100;
border: 1px solid #d0d0d0;
}
table tr .qian{
width: 34%;
padding-right: 60px;
}
table tr .renqi{
width: 8%;
height: 40px;
}
.kongxi4{
height: 20px;
}
.zongtu{
width: 1160px;
margin: 0 auto;
height:1620px;
}
.zongtu div{
display: inline-block;
margin:10px;
background-color: white;
}
.tu1{
height: 300px;
border: 1px solid#d0d0d0;
width: 262px;
}
.tu1 img{
width: 200px;
}
.tu1 p{
font-size: 25px;
}
.jinqian1,.jinqian2{
color: #e0202f;
}
.jinqian2{
font-size: 22px;
}
.baoyou{
border: 1px dotted #e0202f;
color: #e0202f;
padding: 2px 6px 1px 6px ;
}
.huise{
font-size: 14px;
text-decoration: line-through;
color: #afafb9;
}
.tu2{
height: 300px;
border: 1px solid#d0d0d0;
width: 262px;
}
.tu2 img{
width: 200px;
}
.tu2 p{
font-size: 25px;
}
.tu3{
height: 300px;
border: 1px solid#d0d0d0;
width: 262px;
}
.tu3 img{
width: 200px;
}
.tu3 p{
font-size: 25px;
}
.tu4{
height: 300px;
border: 1px solid#d0d0d0;
width: 262px;
}
.tu4 img{
width: 200px;
}
.tu4 p{
font-size: 25px;
}
.kongxi5{
height: 20px;
}
.yema li{
display: inline-block;
border: 1px solid #d2d2d2;
padding: 5px 10px 5px 10px;
margin: 7px;
}
.yema li a{
color: black;
text-decoration: none;
}
.yema1{
background-color: white;
}
.yema li.yema4{
background-color: #e00000;
}
.yema li.yema4 a{
color: white;
}
.kongxi6{
height:60px;
}
.zhengpinda .zhengpinzhong{
line-height: 50px;
margin: 0 auto;
width: 1150px;
}
.zhengpinda .zhengpinzhong ul {
display: inline-block;
width: 280px;
}
.zhengpinda .zhengpinzhong ul li{
display: inline-block;
}
.zhengpinda .zhengpinzhong ul li img{
width: 70px;
}
.zhengpinda .zhengpinzhong ul li a.zhengpinzhongshang{
position: relative;
top: 8px;
font-size: 20px;
text-decoration: none;
color: black;
}
.zhengpinda .zhengpinzhong ul li a.zhengpinzhongxia{
position: relative;
bottom: 12px;
}
.gouwuzhinan{
border: 1px solid #AFAFB9;
height: 200px;
}
.gouwuzhinanzhong{
width: 1150px;
margin: 0 auto;
height: 200px;
}
.gouwuzhinanzhong li{
display: inline-block;
padding-left: 40px;
padding-top: 24px;
padding-right: 104px;
}
.gouwuzhinanzhong li .no1{
font-size: 20px;
font-weight: 800px;
margin-bottom: 15px;
}
.gouwuzhinanzhong li .no2{
margin-bottom: 8px;
}
.beijingyansi{
background-color: #eeeeee;
}
.hou1 center{
font-size: 13px;
}
</style>
</head>
<body>
<div class="shangbiankuang">
<div class="zhongjian">
<div class="beijing"> <img src="dingwei.png" class="tupian1"/> 北京</div>
<ul>
<li class="denglu"><a href="">登录</a></li>
<li class="shuxian">|</li>
<li><a href="">免费注册</a></li>
<li class="shuxian">|</li>
<li><a href="">我的订单</a></li>
<li class="shuxian">|</li>
<li><a href="">收藏夹</a></li>
<li class="shuxian">|</li>
<li><a href="">帮助中心</a></li>
</ul>
</div>
</div>
<div class="kongxi1"></div>
<div class="haigouyoupin">
<ul class="haigouyoupin0">
<li class="haigouyoupin1"><img src="logo.png"/></li>
<li class="haigouyoupin2"><input type="text" value="搜索" />
<a href="#"><img src="tupian3.png"/></a></li>
<li class="haigouyoupin3">🛒 购物车 0</li>
</ul>
</div>
<div class="kongxi2">
<ul>
<li class="resou"><a href="">热搜:</a></li>
<li><a href="">笔记本</a></li>
<li><a href="">平板</a></li>
<li><a href="">手机</a></li>
<li><a href="">墨盒</a></li>
<li class="gaojisousuo"><a href="">高级搜索</a></li>
</ul>
</div>
<div class="shangpinfenlei">
<ul class="shangpinfenlei1">
<li class="shangpinfenlei2">
三 全部商品分类
↓
</li>
<li class="shangpinfenlei3">促销</li>
<li class="shangpinfenlei4">秒杀</li>
<li class="shangpinfenlei4">优惠卷</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="beijingyansi">
<div class="hengxian"></div>
<div class="pinpai">
<div class="pinpai0">
品牌：<div class="clearfix"></div>
</div>
<div class="pinpai1">
<ul>
<li><div><a href=""> 美宝莲（MAYBELLINE）</a></div><div><a href="">迪奥（Dior）</a></div>
<div><a href="">香奈儿（Chanel）</a></div> <a href="">卡姿兰（Carslan）</a></li>
<li><div><a href=""> 圣罗兰（YSL）</a></div><div><a href="">迪奥（Dior）</a></div>
<div><a href="">兰蔻（LANCOME）</a></div> <a href="">范思暂（VERSACE）</a></li>
<li><div><a href=""> 纪梵希（Givenchy）</a></div> <div><a href="">欧莱雅（LOREAL）</a></div>
<div><a href="">阿玛尼（ARMANI）</a></div><a href="">博柏利（BURBERRY）</a></li>
<li><div><a href=""> 古驰（GUCCI)</a></div></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="guojia">
<div class="guojia0">
国家/地区：<div class="clearfix"></div>
</div>
<div class="guojia1">
<ul>
<li><div><a href=""> 中国</a></div><div><a href="">法国</a></div>
<div><a href="">美国</a></div><div><a href="">中国台湾</a></div>
<div><a href="">意大利</a></div><div><a href="">英国</a></div>
<a href="">瑞士</a></li>
<div class="clearfix"></div>
</ul>
</div>
</div>
<div class="kongxi3"></div>
<div><table border="1" cellspacing="0" cellpadding="100">
<tr><th class="renqi">人气</th><th class="renqi">销量</th><th class="renqi">新品</th><th class="renqi">价格</th>
<th colspan="4" class="qian"><input type="text"value="$" />- <input type="text" name="1" id="1" value="$" />
</th><th colspan="4"><input type="checkbox" name="zixuan" class="zixuan"/>自选商品
<input type="checkbox" name="youhuo" class="zixuan"/>有货商品
<input type="checkbox" name="cuxiao" class="zixuan"/>促销商品</th></tr>
</table></div>
<div class="kongxi4"></div>
<div class="zongtu">
<div class="tu1">
<center><img src="1.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu2">
<center><img src="2.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu3">
<center><img src="3.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu4">
<center><img src="4.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu1">
<center><img src="1.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu2">
<center><img src="2.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu3">
<center><img src="3.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu4">
<center><img src="4.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu1">
<center><img src="1.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu2">
<center><img src="2.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu3">
<center><img src="3.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu4">
<center><img src="4.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu1">
<center><img src="1.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu2">
<center><img src="2.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu3">
<center><img src="3.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu4">
<center><img src="4.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu1">
<center><img src="1.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu2">
<center><img src="2.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu3">
<center><img src="3.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
<div class="tu4">
<center><img src="4.jpg"/></center>
<p><center>Dior 迪奥 花漾甜心小姐女士...</p>
<span class="jinqian1">￥</span>
<span class="jinqian2">459</span>
<span class="baoyou">包邮</span>
<span class="huise">￥615</span>
</center>
</div>
</div>
<div class="kongxi5"></div>
<ul class="yema"><center>
<li class="yema1"><a href="">上页</a></li>
<li class="yema4"><a href="">1</a></li>
<li class="yema2"><a href="">2</a></li>
<li class="yema2"><a href="">3</a></li>
<li class="yema2"><a href="">4</a></li>
<li class="yema2"><a href="">5</a></li>
<li class="yema2"><a href="">6</a></li>
<li class="yema2"><a href="">7</a></li>
<li class="yema2"><a href="">8</a></li>
<li class="yema1"><a href="">下页</a></li></center>
</ul>
<div class="kongxi6"></div></div>
<div class="zhengpinda">
<div class="zhengpinzhong">
<ul>
<li><img src="5 (1).png"/></li>
<li><aclass="zhengpinzhongshang">100%正品</a><br />
<a class="zhengpinzhongxia">正品保障 假一赔十</a>
</li>
</ul>
<ul>
<li><img src="6.png"/></li>
<li><a class="zhengpinzhongshang">无忧退货</a><br />
<a class="zhengpinzhongxia">国内退货 售后无忧</a>
</li>
</ul>
<ul>
<li><img src="7.png"/></li>
<li><a class="zhengpinzhongshang">低价保障</a><br />
<a class="zhengpinzhongxia">缩减环节 确保低价</a>
</li>
</ul>
<ul>
<li><img src="8.png"/></li>
<li><a class="zhengpinzhongshang">海外发货</a><br />
<a class="zhengpinzhongxia">海外直邮 闪电发货</a>
</li>
</ul>
</div>
</div>
<div class="gouwuzhinan">
<ul class="gouwuzhinanzhong">
<li><center><div class="no1">购物指南</div><div class="no2">购物流程</div>
<div class="no2">发票制度</div><div>账户管理</div><div class="no2"></div>会员优惠</center></li>
<li><center><div class="no1">支付方式</div><div class="no2">货到付款</div>
<div class="no2">网上支付</div><div>礼品卡</div><div class="no2"></div>银行转账</center></li>
<li><center><div class="no1">订单服务</div><div class="no2">配送查询</div>
<div class="no2">状态说明</div><div>取消订单</div><div class="no2"></div>修改订单</center></li>
<li><center><div class="no1">配送方式</div><div class="no2">配送范围</div>
<div class="no2">免邮标准</div><div>订单自提</div><div class="no2"></div>验货签收</center></li>
<li><center><div class="no1">售后服务</div><div class="no2">售后政策</div>
<div class="no2">价格保护</div><div>退款说明</div><div class="no2"></div>退换货</center></li>
</ul>
<br /><br />
<div class="hou1">
<center style="color: #666666;">关于我们 | 服务条款
| 隐私保护 | 联系我们
| 帮助中心</center><br />
<center style="color: #666666;">Copyright 2016XXX. All Rights Reserved.</center>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.clearfix{
clear: both;
}
*{
padding: 0px ;
margin: 0px;
}
.shangbiankuang{
height: 30px;
border: 1px #f0f0f0 solid;
background-color: #fafafa;
}
.zhongjian{
width: 1150px;
height: 30px;
margin: 0 auto;
}
.beijing{
float: left;
line-height: 30px;
width: 100px;
color: #616161;
font-weight: 800;
font-size: 13px;
height: 30px;
}
.beijing img{
width: 19px;
line-height: 30px;
}
.shangbiankuang .zhongjian ul{
float: right;
}
.shangbiankuang .zhongjian ul li{
float: left;
margin-right: 23px;
list-style: none;
line-height: 30px;
}
.shangbiankuang .zhongjian ul li a{
text-decoration: none;
color: #46443f;
font-weight: 800;
font-size: 13px;
}
.shangbiankuang .zhongjian ul .shuxian {
color: #e7e5e7;
}
.shangbiankuang .zhongjian ul .denglu a{
color: #e52d2d;
}
.tupian1{
position: relative;
top: 5px;
}
.kongxi1{
height: 32px;
}
.haigouyoupin0{
width: 1150px;
height: 90px;
margin: 0 auto;
}
.haigouyoupin ul li{
float: left;
list-style: none;
}
.haigouyoupin1{
margin-right: 20px;
width: 262px;
height: 90px;
}
.haigouyoupin .haigouyoupin0 .haigouyoupin1 img{
width:219px;
}
.haigouyoupin2 input{
height: 40px;
width: 453px;
position: relative;
bottom: 15px;
border: #e00000 3px solid;
}
.haigouyoupin2 img{
width: 56px;
position: relative;
top: 2px;
right: 5px;
padding-right: 174px;
}
.haigouyoupin3{
line-height: 44px;
width:155px;
background-color: #e00000;
color: white;
text-align: center;
}
.kongxi2{
width: 550px;
height: 24px;
margin: 0 auto;
}
.kongxi2 ul li{
float: left;
right: 20px;
list-style: none;
margin-right: 28px;
font-size: 13px;
position: relative;
bottom: 32px;
}
.kongxi2 ul li a{
text-decoration: none;
color: #666666;
font-weight: 800;
}
.kongxi2 ul li.resou{
margin-right: 12px;
}
.kongxi2 ul li.resou a{
color: #e12a36;
}
.kongxi2 ul li.gaojisousuo{
padding-left: 186px;
}
.kongxi2 ul li.gaojisousuo a{
color:#1d961e ;
}
.shangpinfenlei{
margin: 0 auto;
width: 1150px;
}
div .shangpinfenlei1 li{
float: left;
list-style: none;
}
.shangpinfenlei2{
color: white;
background-color:#e00000 ;
padding:8px 28px 10px 28px;
position: relative;
bottom: 10px;
}
.shangpinfenlei3{
padding-left:68px;
font-size: 18px;
position: relative;
animation-play-state: 5px;
border: #666666;
font-weight: 500px;
}
.shangpinfenlei4{
font-size: 18px;
border: #666666;
font-weight: 500px;
}
.kongxi3{
height: 68px;
background-color: #eeeeee;
}
.hengxian{
border: 2px #e00000 solid;
position: relative;
bottom: 10px;
}
.zhuceda{
background-color:#eeeeee;
margin: 0 auto;
}
.zhucezhong{
width: 1150px;
margin: 0 auto;
height: 750px;
background-color: white;
}
.zhuceda .zhucezhong .zhucexiao{
width: 1070px;
margin: 48px 220px 45px 44px ;
height: 600px;
}
.zhuceda .zhucezhong .zhucexiao hr{
margin-top: 16px;
margin-bottom: 40px;
color: #D0D0D0 ;
}
.zhuceda .zhucezhong .zhucexiao .shouji{
line-height: 42px;
margin-bottom: 40px;
}
.zhuceda .zhucezhong .zhucexiao .shouji label{
font-size: 15px;
font-weight: 900;
}
.zhuceda .zhucezhong .zhucexiao .shouji input{
height: 42px;
width: 300px;
}
.zhuceda .zhucezhong .zhucexiao .shouji .cuowu{
color:#e52d2d ;
font-size: 14px;
}
.zhuceda .zhucezhong .zhucexiao .shouji .shoujihou{
color: #616161;
font-size: 14px;
}
.zhuceda .zhucezhong .zhucexiao .tiaokuan{
margin-left: 130px;
font-size: 15px;
}
.zhuceda .zhucezhong .zhucexiao .zhuce{
background-color: #01b763;
line-height: 60px;
width: 300px;
margin-left: 130px;
color: white;
font-size: 20px;
margin-top: 40px;
}
.kongxi5{
height: 40px ;
background-color:#eeeeee;
}
.zhengpinda .zhengpinzhong{
line-height: 50px;
margin: 0 auto;
width: 1150px;
}
.zhengpinda .zhengpinzhong ul {
display: inline-block;
width: 280px;
}
.zhengpinda .zhengpinzhong ul li{
display: inline-block;
}
.zhengpinda .zhengpinzhong ul li img{
width: 70px;
}
.zhengpinda .zhengpinzhong ul li a.zhengpinzhongshang{
position: relative;
top: 8px;
font-size: 20px;
text-decoration: none;
color: black;
}
.zhengpinda .zhengpinzhong ul li a.zhengpinzhongxia{
position: relative;
bottom: 12px;
}
.gouwuzhinan{
border: 1px solid #AFAFB9;
height: 200px;
}
.gouwuzhinanzhong{
width: 1150px;
margin: 0 auto;
height: 200px;
}
.gouwuzhinanzhong li{
display: inline-block;
padding-left: 40px;
padding-top: 24px;
padding-right: 104px;
}
.gouwuzhinanzhong li .no1{
font-size: 20px;
font-weight: 800px;
margin-bottom: 15px;
}
.gouwuzhinanzhong li .no2{
margin-bottom: 8px;
}
.hou1 center{
font-size: 13px;
}
</style>
</head>
<body>
<div class="shangbiankuang">
<div class="zhongjian">
<div class="beijing"> <img src="dingwei.png" class="tupian1"/> 北京</div>
<ul>
<li class="denglu"><a href="">登录</a></li>
<li class="shuxian">|</li>
<li><a href="">免费注册</a></li>
<li class="shuxian">|</li>
<li><a href="">我的订单</a></li>
<li class="shuxian">|</li>
<li><a href="">收藏夹</a></li>
<li class="shuxian">|</li>
<li><a href="">帮助中心</a></li>
</ul>
</div>
</div>
<div class="kongxi1"></div>
<div class="haigouyoupin">
<ul class="haigouyoupin0">
<li class="haigouyoupin1"><img src="logo.png"/></li>
<li class="haigouyoupin2"><input type="text" value="搜索" />
<a href="#"><img src="tupian3.png"/></a></li>
<li class="haigouyoupin3">🛒 购物车 0</li>
</ul>
</div>
<div class="kongxi2">
<ul>
<li class="resou"><a href="">热搜:</a></li>
<li><a href="">笔记本</a></li>
<li><a href="">平板</a></li>
<li><a href="">手机</a></li>
<li><a href="">墨盒</a></li>
<li class="gaojisousuo"><a href="">高级搜索</a></li>
</ul>
</div>
<div class="shangpinfenlei">
<ul class="shangpinfenlei1">
<li class="shangpinfenlei2">
三 全部商品分类
↓
</li>
<li class="shangpinfenlei3">促销</li>
<li class="shangpinfenlei4">秒杀</li>
<li class="shangpinfenlei4">优惠卷</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="hengxian"></div>
<div class="zhuceda">
<div class="zhucezhong">
<div class="kongxi3">
</div>
<div class="zhucexiao">
<h1>注册</h1>
<hr />
<div class="shouji">
<label for="shouji">手机号码
* </label>
<input type="text" name="shouji" />
<a class="cuowu">测试错误信息！</a>
<a class="shoujihou">仅限中国大陆移动、电信、联通手机号码。</a>
</div>
<div class="shouji">
<label for="shouji">电子邮箱
* </label>
<input type="text" name="shouji" />
<a class="shoujihou">请输入您常用的电子部箱地址。</a>
</div>
<div class="shouji">
<label for="shouji">设置密码
* </label>
<input type="text" name="shouji" />
<a class="shoujihou">仅限6~16个字母、数字、特殊符号</a>
</div>
<div class="shouji">
<label for="shouji">重复密码
* </label>
<input type="text" name="shouji" />
<a class="shoujihou">请再次输入您设置的密码。</a>
</div>
<div class="tiaokuan"><input type="checkbox"/> 我已阅读并同意《网站服务条款》</div>
<div class="zhuce"><center>注册</center></div>
<div class=""></div>
</div>
</div>
</div>
<div class="kongxi5"></div>
<div class="zhengpinda">
<div class="zhengpinzhong">
<ul>
<li><img src="5 (1).png"/></li>
<li><aclass="zhengpinzhongshang">100%正品</a><br />
<a class="zhengpinzhongxia">正品保障 假一赔十</a>
</li>
</ul>
<ul>
<li><img src="6.png"/></li>
<li><a class="zhengpinzhongshang">无忧退货</a><br />
<a class="zhengpinzhongxia">国内退货 售后无忧</a>
</li>
</ul>
<ul>
<li><img src="7.png"/></li>
<li><a class="zhengpinzhongshang">低价保障</a><br />
<a class="zhengpinzhongxia">缩减环节 确保低价</a>
</li>
</ul>
<ul>
<li><img src="8.png"/></li>
<li><a class="zhengpinzhongshang">海外发货</a><br />
<a class="zhengpinzhongxia">海外直邮 闪电发货</a>
</li>
</ul>
</div>
</div>
<div class="gouwuzhinan">
<ul class="gouwuzhinanzhong">
<li><center><div class="no1">购物指南</div><div class="no2">购物流程</div>
<div class="no2">发票制度</div><div>账户管理</div><div class="no2"></div>会员优惠</center></li>
<li><center><div class="no1">支付方式</div><div class="no2">货到付款</div>
<div class="no2">网上支付</div><div>礼品卡</div><div class="no2"></div>银行转账</center></li>
<li><center><div class="no1">订单服务</div><div class="no2">配送查询</div>
<div class="no2">状态说明</div><div>取消订单</div><div class="no2"></div>修改订单</center></li>
<li><center><div class="no1">配送方式</div><div class="no2">配送范围</div>
<div class="no2">免邮标准</div><div>订单自提</div><div class="no2"></div>验货签收</center></li>
<li><center><div class="no1">售后服务</div><div class="no2">售后政策</div>
<div class="no2">价格保护</div><div>退款说明</div><div class="no2"></div>退换货</center></li>
</ul>
<br /><br />
<div class="hou1">
<center style="color: #666666;">关于我们 | 服务条款
| 隐私保护 | 联系我们
| 帮助中心</center><br />
<center style="color: #666666;">Copyright 2016XXX. All Rights Reserved.</center>
</div>
</div>
</body>
</html>
效果图如下，懒得传图片了，希望能帮到有用的人
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
