作为初学者，第一次用div+css编写淘宝静态首屏

html部分--

<html>

</head>
<body>
<div class="top1">
<div class="word1">亲，请登录</div>
<div class="word2">免费注册</div>
<div class="word3">手机逛淘宝</div>
<div class="word4">
<span class="one" style="margin-right:10px">我的淘宝</span>
<span class="one" style="margin-right:10px">购物车</span>
<span class="one" style="margin-right:10px">收藏夹</span>
<span class="one" style="margin-right:10px">商品分类</span>
<span class="one" style="margin-right:10px">卖家中心</span>
<span class="one" style="margin-right:10px">联系客服</span>
<span class="one" style="margin-right:10px">网站导航</span>

</div>
</div>
<div class="subface">

<span class="word9">天猫必逛</span>
<em class="word10">热门品牌，天天上天猫！</em>
<strong>
<i>4/6</i>

</strong>
<hr>

</div>
<div class="right1">
<div class="right2">
<span class="right3">
<a href="#">登录</a>
</span>
<span class="right3">
<a href="#">注册</a>
</span>
<span class="right3">
<a href="#">开店</a>
</span>

</ul>
</div>
<div class="right4">
<ul class="nav2">
<li class="list-item2"><a href="#">公告</a></li>
<li class="list-item2"><a href="#">规则</a></li>
<li class="list-item2"><a href="#">论坛</a></li>
<li class="list-item2"><a href="#">安全</a></li>
<li class="list-item2"><a href="#">公益</a></li>
<li class="list-item2" ><a href="#">马云：希望未来中国500强里有200个CEO来自</a></li>
<li class="list-item2"><a href="#">阿里第二届“校友”大</a></li>
<li class="list-item2"><a href="#">惠誉评级将阿里定为</a></li>

</ul>

</div>
<div class="picture3"></div>

<div class="word7">Hi！<strong>你好</strong></div>
<div class="word8"><span class="three">领淘金币抵钱</span>
或去
<span class="three">会员俱乐部</span>
</div>

</div>

<div class="centre1">
<div class="center6">新款连衣裙四件套潮流T恤时尚女鞋短裤半身裙男士外套墙纸行车记录仪新款男鞋耳机
<div class="small1"><span class="two">更多</span></div>
</div>
<ul >
<li class="word5">宝贝</li>
<li class="word5">天猫</li>
<li class="word5">店铺</li>
</ul>

<div class="centre2">
<div class="center5">潮男冬季必入</div>

<div class="center4">高级<br>搜索</div>
<div class="centre3">搜索</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom1">
<div class="bottom2"></div>
<a href="#" class="word14"><strong>吃货的后裔</strong><br>
<span class="word12">翻滚吧美食君</span></a><br><em class="word13">人气13728</em>
</div>
<div class="bottom3">
<div class="bottom4"></div>
<a href="#" class="word15"><strong>囤货一族</strong><br>
<span class="word16">会囤会生活</span></a><br>
<em class="word13">人气76000</em>
</div>
<div class="bottom3">
<div class="bottom6"></div>
<a href="#" class="word18"><strong>无辣不欢者</strong><br><span class="word19">辣即正义</span></a><br>
<em class="word13">人气5209</em>
</div>
<div class="bottom3">
<div class="bottom8"></div>
<a href="#" class="word20"><strong>装修家</strong><br><span class="word21">装扮我的家</span></a><br>
<em class="word13">人气45496</em>
</div>
<div class="bottom3">
<div class="bottom5"></div>
<a href="#" class="word22"><strong>有车一族</strong><br><span class="word23">定义车生活</span></a><br>
<em class="word13">最新发现</em>
</div>

</div>

</div>
<div class="right10">
<div class="icon13"></div>
<a class="word25" href="#">旅行</a>

</div>
<div class="right10">
<div class="icon14"></div>
<a class="word25" href="#">旅行</a>

</div>
<div class="right10">
<div class="icon15"></div>
<a class="word25" href="#">彩票</a>

</div>
<div class="right10">
<div class="icon16"></div>
<a class="word25" href="#">电影</a>

</div>
<div class="right10">
<div class="icon17"></div>
<a class="word25" href="#">点外卖</a>

</div>
<div class="right10">
<div class="icon18"></div>
<a class="word25" href="#">理财</a>

</div>
<div class="right11">
<div class="icon19"></div>
<a class="word26" href="#">找服务</a>

</div>
<div class="right11">
<div class="icon20"></div>
<a class="word26" href="#">音乐</a>

</div>
<div class="right11">
<div class="icon21"></div>
<a class="word26" href="#">水电煤</a>

</div>
<div class="right11">
<div class="icon22"></div>
<a class="word26" href="#">火车票</a>
</div>
</div>
</div>
<div class="right6">
<div class="right7">
<span class="word24"><h3>阿里APP</span>
<a class="more" href="#">更多</a></h3>
<ul class="right8">
<li class="icon1"><a href="#"></a></li>
<li class="icon2"><a href="#"></a></li>
<li class="icon3"><a href="#"></a></li>
<li class="icon4"><a href="#"></a></li>
<li class="icon5"><a href="#"></a></li>
<li class="icon6"><a href="#"></a></li>
<li class="icon7"><a href="#"></a></li>
<li class="icon8"><a href="#"></a></li>
<li class="icon9"><a href="#"></a></li>
<li class="icon10"><a href="#"></a></li>
</ul>
</div>
</div>
</body>
</html>

css部分--

*{
padding: 0;
margin: 0;
}
.top1{
position: absolute;
top:0;
width:100%;
height:35px;
margin:0px auto;

background-color: #f5f5f5;

}
.word1{
float: left;
margin-top:10px;
margin-right: 7px;
margin-left: 72px;
font-size: 12px;
color: #f22e00!important;
}

.word2{
float: left;
margin-top: 10px;
margin-right: 7px;
font-size: 12px;
color: #6C6C6C;
}
.word3{
float: left;
margin-top: 10px;
margin-left: 7px;
font-size: 12px;
color: #6C6C6C;
}
.word4{
position:relative;
left: 400px;

margin-top: 10px;
font-size: 12px;
color: #6C6C6C;

}
.one::after{
content: "";
position: relative;
top:8px;
margin-left: 20px;
width:0px;
height:0px;
border-top: 3px solid gray;
border-right:3px solid transparent;
border-left:3px solid transparent;
border-bottom:3px solid transparent;
}

.top2{
float: left;
width:990px;
height:100px;
background-color: white;
margin-left:50px;
padding-top:30px;
padding-bottom: 34px;
}
.logo1{
position: relative;
margin-top: 50px;
margin-left: 32px;
padding-top: 58px;
width: 142px;
height:0px;
background-size:100% 100%;
background-image:url(https://img.alicdn.com/tps/i2/TB1bNE7LFXXXXaOXFXXwFSA1XXX-292-116.png_145x145.jpg);
background-repeat:no-repeat;
background-position:100% 100%;
}
.centre1{
position: absolute;
float: left;
display: block;
top:98px;
left:325px;
width:627px;
height:90px;
background-color: white;
}
ul{
list-style: none;
}
.word5{
position: relative;
top:-25px;
left:20px;
float: left;
width: 50px;
height: 25px;
line-height: 25px;
cursor: pointer;
margin: 0;
padding: 0;
color: #F40;
font-weight:700;
}

.centre2{
margin-left: 20px;
height:40px;
width:627px;
border:3px solid #F40;
}
.centre3{

float: right;
background-color: #FF4200;
cursor: pointer;
height: 40px;
border: none;
width: 122px;
font-size: 18px;
font-weight: 700;
color: #FFF;
text-align: center;
line-height: 40px;
}
.center4{
position: absolute;
left: 660px;
top:3px;
width: 40px;
height: 40px;
border:0px solid black;
color: #666;
font-size: 12px;

}
.center5{
position: absolute;
float: left;
margin-left: 30px;
width: 200px;
height: 22px;
padding:6px 0px;
text-align: left;
line-height: 28px;
color:#9c9c9c;
font-size:12px;
}
.center6{
position: absolute;
float: left;
top:48px;
left:12px;
width: 640px;
height: 20px;
font-size:12px;
margin-left:8px;
color: #666;
line-height: 18px;
margin-top: 8px;
}
.small1{
position: relative;
float: right;
width: 80px;
height: 20px;
border: 0px solid black;
left:20px;
}
.two::after{
content: "";
position: relative;
top:8px;
margin-left: 10px;
width:0px;
height:0px;
border-top: 5px solid gray;
border-right:5px solid transparent;
border-left:5px solid transparent;
border-bottom:5px solid transparent;
}
.left1{
position: absolute;
float: left;
width: 190px;
height: 555px;
border: 0px solid black;
top:185px;
left:72px;

background-color: #FF6537;
}
.left3{
position: absolute;
float: left;
top:515px;
width: 190px;
height: 40px;
background-image:url(https://img.alicdn.com/tps/TB1xqDXNVXXXXXqaFXXXXXXXXXX-380-80.jpg_190x190);
border: 0px solid black;
}
.left2{
width: 190px;
height: 33px;
font-size: 14px;
line-height: 33px;
color: #fff;
text-indent:10px;
}
.word6{
font-size: 13px;
line-height: 30px;
text-align: center;
color: #FFF;
font-weight: 700;
}
.left::after{
content: "";
position: relative;
top:8px;
float: right;
right: 8px;
width:0px;
height:0px;
border-top: 4px solid white;
border-right:4px solid transparent;
border-left:4px solid transparent;
border-bottom:4px solid transparent;
}
.center7{
position: absolute;
float: left;
top:188px;
left: 275px;
width: 850px;
height: 34px;
border: 0px solid black;
display: block;
}
*{
text-decoration:none;
}
.nav{
list-style:none;
*zoom:1;
margin:0;
padding:0;
font-family:arial;
}
.nav:after{
content:"";
display:block;
clear:both;
}
.list-item{
float:left;
margin:0 7px;
font-weight:bold;
}
.list-item a{
color:#f40;
line-height:25px;
height:25px;
padding:0 5px;
font-size: 16px;
}
.list-item a:hover{
border-radius:12.5px;
color:#fff;
background-color:#f40;
display:block;
}
.list-item1{
float:left;
margin:0 7px;
font-weight:bold;
}
.list-item1 a{
color:#3c3c3c;
line-height:28px;
height:25px;
padding:0 5px;
font-size: 14px;
}
.list-item1 a:hover{
border-radius:12.5px;
color:#fff;
background-color:#f40;
display:block;
}

.subface1{
position: absolute;
float: left;
width: 100%;
height: 100%;
border: 0px solid block;
top:220px;
background-color: #f5f5f5;
display: block;
}
.picture1{
position:absolute;

width: 520px;
height: 280px;
background-image:url(https://img.alicdn.com/tps/TB1aPbrOpXXXXXgXpXXXXXXXXXX-520-280.jpg_.webp);
left:270px;
top:10px;
border: 0px solid black;
background-repeat:no-repeat;
background-position:100% 100%;
}
.picture2{
position: absolute;
width: 160px;
height: 280px;
background-image:url(https://img.alicdn.com/imgextra/i2/919390580/TB2K.5be5GO.eBjSZFpXXb3tFXa_!!919390580.jpg);
left:800px;
top:10px;
}
.picture4{
position: absolute;
width: 251px;
height: 190px;
left:270px;
top:330px;
background-image:url(https://img.alicdn.com/tps/i4/TB1UzjpOpXXXXc1XXXXSutbFXXX.jpg_240x240q90.jpg);
}
.picture5{
position: absolute;
width: 251px;
height: 190px;
background-image:url(https://img.alicdn.com/tps/i4/TB1_7DIOpXXXXapXXXXSutbFXXX.jpg_240x240q90.jpg);
left:531px;
top:330px;
}
.picture6{
position: absolute;
width: 160px;
height: 200px;
top:320px;
left: 800px;
background-image:url(https://aecpm.alicdn.com/simba/img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg);
}
.word11{
position: absolute;
font-size: 12px;
top:290px;
left: 800px;
font-weight: 400;
background: #f1f1f1;
color: #a1a1a1;
line-height: 24px;
padding-top: 6px;

}
.center8{
position: absolute;
left:270px;
top:290px;
width: 492px;
height: 26px;
background-repeat:no-repeat;
border: 0px solid black;
background-image: url(https://img.alicdn.com/tps/TB10wLZLVXXXXcGXVXXXXXXXXXX-49-17.gif);
}

.word9{
position: relative;
font-size: 14px;
line-height: 32px;
left: 50px;
bottom:-2px;
}
.word10{
position: relative;
font-size: 12px;
line-height: 32px;
left: 50px;
bottom:-2px;
color: #3c3c3c;
}
i{
position: relative;
float: right;
line-height: 26px;
top:10px;
font-family: sans-serif;
font-size: 12px;
font-weight: 400;
color: #c12c26;

}
.right1{
position: relative;
float: right;
padding: 15px;
width: 268px;
height: 137px;
border-bottom: 1px solid #EEE;
background-repeat: no-repeat;
}
.right4{
position: absolute;
float: right;
height: 78px;
margin-top: 1px;
padding-top: 7px;
padding-bottom: 4px;
width: 290px;
border: 0px solid black;
right:85px;
top:200px;
background-color: white;
}

.nav2{
list-style:none;
*zoom:1;
margin:0;
padding:0;
font-family:arial;
}
.nav2:after{
content:"";
display:block;
clear:both;
}
.list-item2{
float:left;
margin:0 10px;
font-weight:bold;
}
.list-item2 a{
color:#3c3c3c;
line-height:25px;
height:25px;
padding:0 5px;
font-size:12px;
}
.list-item2 a:hover{
border-radius:12.5px;
color:#f40;
display:block;
}
.picture3{
position: relative;
top:20px;
width: 80px;
height: 80px;
background-position:100% 100%;
background-repeat:no-repeat;
border-radius:50%;
background-image:url(https://wwc.alicdn.com/avatar/getAvatar.do?userNick=&width=80&height=80&type=sns&_input_charset=UTF-8);
}
.word7{
position: absolute;
float: left;
top:120px;
left:30px;
color:#3c3c3c;
width: 268px;
height: 18px;
border: 0px solid black;
font-size: 12px;
}
.word8{
position: absolute;
top:140px;
right:45px;
width: 268px;
height: 20px;
border: 0px solid black;
font-size: 12px;
}
.three{
color:#f40;
}
.right2{
float: left;
position: absolute;
top:160px;
right:90px;
width: 268px;
height: 25px;
border: 0px solid white;

}
.right3{
float: left;
line-height: 25px;
margin-right: 7px;
width: 75px;
height: 25px;
border: 0px solid black;
background:#f40;
color: #FFF;
font-size: 14px;
font-weight: 700;
text-align: center;
border-radius: 1px;
}
.bottom{
position: absolute;
float: left;
width: 899px;
height: 86px;
border: 0px solid black;
top:748px;
left: 65px;
}
.bottom1{
position: relative;
color:#3c3c3c;
background-color: #fff;
margin-top: 6px;
display: block;
font-size: 16px;
float: left;
width: 179px;
height: 74px;
}

.bottom2 {
position: relative;
float: left;
width: 60px;
height: 60px;
border: 0px solid black;
margin-top: 8px;
margin-right: 8px;
margin-left: 10px;
background-repeat:no-repeat;
background-position:100% 100%;
background-image:url(https://gw.alicdn.com/tfscom/TB1vF1nHpXXXXaAXpXXXXXXXXXX_!!0-item_pic.jpg_60x60q90_.webp);
}
.word12{
font-size: 12px;
line-height: 22px;
color: #999;
}
.word13{
position: relative;
top:6px;
font-size: 14px;
line-height: 16px;
color: #999;
}
.word14{
position: relative;
top:6px;
color:#81c18f;

}
.bottom3{
position: relative;
color:#9a745f;
background-color: #fff;
margin-top: 6px;
display: block;
font-size: 16px;
float: left;
width: 179px;
height: 74px;

}
.bottom4{
position: relative;
float: left;
width: 60px;
height: 60px;
margin-top: 8px;
margin-right: 8px;
margin-left: 10px;
background-image:url(https://gw.alicdn.com/tfscom/TB24h84mXXXXXc4XXXXXXXXXXXX_!!0-juitemmedia.jpg_60x60q90_.webp);
}

.word16{
font-size: 12px;
line-height: 22px;
color: #9a745f;
}

.word15{
position: relative;
top:6px;
color:#9a745f;
}

.bottom6{
position: relative;
float: left;
width: 60px;
height: 60px;
margin-top: 8px;
margin-right: 8px;
margin-left: 10px;
background-image: url(https://gw.alicdn.com/tfscom/TB1GuvmLXXXXXa.XFXXSutbFXXX.jpg_60x60q90_.webp);
}
.word19{
font-size: 12px;
line-height: 22px;
color: #72a5f6;
}

.word18{
position: relative;
top:6px;
color:#72a5f6;
}
.bottom8{
position: relative;
float: left;
width: 60px;
height: 60px;
margin-top: 8px;
margin-right: 8px;
margin-left: 10px;
background-image:url(https://gw.alicdn.com/tfscom/TB1vhKXKpXXXXcPXFXXSutbFXXX.jpg_60x60q90_.webp);
}
.word21{
font-size: 12px;
line-height: 22px;
color: #846fc7;
}

.word20{
position: relative;
top:6px;
color:#846fc7;
}
.bottom5{
position: relative;
float: left;
width: 60px;
height: 60px;
margin-top: 8px;
margin-right: 8px;
margin-left: 10px;
background-image:url(https://gw.alicdn.com/tfscom/TB1Kq3CJXXXXXXsXVXXSutbFXXX.jpg_60x60q90_.webp);
}
.word23{
font-size: 12px;
line-height: 22px;
color: #de525e;
}

.word22{
position: relative;
top:6px;
color:#de525e;
}

.right5{
position: absolute;
float: right;
right: 85px;
top:514px;
width: 290px;
height: 201px;
min-height: 0;
border: 0px solid black;

}
.right9{
position: relative;
border-top: 0px solid #EAEAEA;
height: 200px;
width: 290px;
}

.right10 {
position: relative;
float: left;
width: 70px;
height: 69px;
margin-top: 1px;
margin-right: 2px;
border: 0px solid black;
display: block;
text-align: center;
background-color: #fff;
}
.icon11{
position: relative;
left:23px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}

.word25{
position: relative;
top:20px;
right:15px;
color: #666;
font-size:12px;
}
.word25:hover{
color:#f40;
font-size: 12px;
}
.icon12{
position: relative;
left:18px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-position: 0 -44px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}
.icon13{
position: relative;
left:18px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-position: 0 -85px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}
.icon14{
position: relative;
left:18px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-position: 0 -132px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}
.icon15{
position: relative;
left:18px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-position: 0 -176px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}
.icon16{
position: relative;
left:18px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-position: 0 -220px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}
.icon17{
position: relative;
display: inline-block;
left: 22px;
width: 24px;
height: 24px;
margin-top: 11px;
background-image: url(https://img.alicdn.com/tps/TB1p8WnOXXXXXaZXFXXXXXXXXXX-48-48.png_24x24.jpg);
}
.icon18{
position: relative;
left:18px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-position: 0 -308px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}
.right11 {
position: relative;
float: left;
width: 70px;
height: 57px;
margin-top: 1px;
border: 0px solid black;
display: block;
text-align: center;
margin-right: 2px;
background-color: #fff;
}
.word26{
position: relative;
top:15px;
right:15px;
color: #666;
font-size:12px;
}
.icon19{
position: relative;
left:23px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-position: 0 -352px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}
.icon20{
position: relative;
left:16px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-position: 0 -396px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}
.icon21{
position: relative;
left:22px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-position: 0 -440px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}
.icon22{
position: relative;
left:22px;
display: inline-block;
width: 24px;
height: 24px;
margin-top: 11px;
background-repeat: no-repeat;
background-size:220px 897px;
background-position: 0 -484px;
background-image:url(https://img.alicdn.com/tps/TB1LV9NNpXXXXa_XVXXXXXXXXXX-440-1794.png);
}

.right6{
position: relative;
float: right;
width: 290px;
height: 116px;
border: 0px solid black;
top:715px;
right: 85px;
background-color: #fff;
}
.right7{
position: relative;
display: block;
color: #3c3c3c;
padding: 6px 0 0 13px;
height: 110px;
}
.word24{

font-size: 14px;
height: 20px;
z-index: 2;
}
.more{
position: absolute;
right: 10px;
font-size: 12px;
font-weight: 400;
color: #3c3c3c;
}
.more::after{
content: "";
position: relative;
top:8px;
margin-left: 10px;
width:0px;
height:0px;
border-top: 5px solid gray;
border-right:5px solid transparent;
border-left:5px solid transparent;
border-bottom:5px solid transparent;
}

.right8{
padding-top: 6px;
position: relative;
height: 84px;
top:8px;
list-style: none;
border: 0px solid black;
margin: 0;
padding: 0;
}
.icon1 a{
position: relative;
float: left;
width: 32px;
height: 32px;
margin-bottom: 8px;
margin-right: 20px;
border-top-width:1px;
background-repeat:no-repeat;
background-position:100% 100%;
background-size: cover;
background-image:url(https://img.alicdn.com/tps/i2/TB1hRb1IXXXXXX3XVXXXQaP.pXX-87-87.jpeg_60x60.jpg_.webp);
}
.icon2 a{
position: relative;
float: left;
width: 32px;
height: 32px;
margin-bottom: 8px;
margin-right: 20px;
border-top-width:1px;
background-repeat:no-repeat;
background-position:100% 100%;
background-size: cover;
background-image:url(https://img.alicdn.com/tps/i3/TB1DGkJJFXXXXaZXFXX07tlTXXX-200-200.png_60x60.jpg_.webp);
}
.icon3 a{
position: relative;
float: left;
width: 32px;
height: 32px;
margin-bottom: 8px;
margin-right: 20px;
border-top-width:1px;
background-repeat:no-repeat;
background-position:100% 100%;
background-size: cover;
background-image:url(https://img.alicdn.com/tps/i4/TB1CKSgIpXXXXccXXXX07tlTXXX-200-200.png_60x60.jpg_.webp);
}
.icon4 a{
position: relative;
float: left;
width: 32px;
height: 32px;
margin-bottom: 8px;
margin-right: 20px;
border-top-width:1px;
background-repeat:no-repeat;
background-position:100% 100%;
background-size: cover;
background-image:url(https://img.alicdn.com/tps/i4/TB1zkDeIFXXXXXrXVXX07tlTXXX-200-200.png_60x60.jpg_.webp);
}
.icon5 a{
position: relative;
float: left;
width: 32px;
height: 32px;
margin-bottom: 8px;
margin-right: 20px;
border-top-width:1px;
background-repeat:no-repeat;
background-position:100% 100%;
background-size: cover;
background-image:url(https://img.alicdn.com/tps/i2/TB1kUwwIXXXXXXqXpXXUAkPJpXX-87-87.png_60x60.jpg_.webp);
}
.icon6 a{
position: relative;
float: left;
width: 32px;
height: 32px;
margin-bottom: 8px;
margin-right: 20px;
border-top-width:1px;
background-repeat:no-repeat;
background-position:100% 100%;
background-size: cover;
background-image:url(https://img.alicdn.com/tps/i3/TB17cD8IXXXXXczXFXXUAkPJpXX-87-87.png_60x60.jpg_.webp);
}
.icon7 a{
position: relative;
float: left;
width: 32px;
height: 32px;
margin-bottom: 8px;
margin-right: 20px;
border-top-width:1px;
background-repeat:no-repeat;
background-position:100% 100%;
background-size: cover;
background-image:url(https://gw.alicdn.com/tps/TB1.s09LpXXXXXuXXXXXXXXXXXX-70-70.png_60x60.jpg_.webp);
}
.icon8 a{
position: relative;
float: left;
width: 32px;
height: 32px;
margin-bottom: 8px;
margin-right: 20px;
border-top-width:1px;
background-repeat:no-repeat;
background-position:100% 100%;
background-size: cover;
background-image:url(https://img.alicdn.com/tps/TB1SpFALpXXXXXrapXXXXXXXXXX-70-70.png_60x60.jpg_.webp);
}
.icon9 a{
position: relative;
float: left;
width: 32px;
height: 32px;
margin-bottom: 8px;
margin-right: 20px;
border-top-width:1px;
background-repeat:no-repeat;
background-position:100% 100%;
background-size: cover;
background-image:url(https://gw.alicdn.com/tps/TB10.cgNVXXXXbrXVXXXXXXXXXX-70-70.jpg_60x60.jpg_.webp);
}
.icon10 a{
position: relative;
float: left;
width: 32px;
height: 32px;
margin-bottom: 8px;
margin-right: 20px;
border-top-width:1px;
background-repeat:no-repeat;
background-position:100% 100%;
background-size: cover;
background-image:url(https://gw.alicdn.com/tps/TB1H4NYLpXXXXb5XpXXXXXXXXXX-70-70.png_60x60.jpg_.webp);
}

作为初学者，第一次用div+css编写淘宝静态首屏相关推荐

手淘卡首屏工具|2023淘宝卡首屏API接口
手淘卡首屏工具介绍使用关键词+商品URL生成卡首屏二维码,通过二维码将指定的宝贝通过关键词搜索显示在手淘首屏,(注:卡开车中的商品会显示为"直通车",直播中的宝贝会显示为&quo ...
只用div+CSS做淘宝手机端首页
div+CSS教你做出淘宝手机端首页为什么只用div做网页网页代码网页效果展示需要更全面的SEO优化网站软件工具及软件操作文档可以联系博主,会有更详细的教程,系统的帮助您的网站关键词40天上百 ...
HTML+CSS 仿淘宝静态首页
学完HTML和CSS需要有一个好的练习,仿淘宝等首页都是一个不错的练习方法,目前处于学习原生js阶段,学html+css时没有做一个像样的项目,现在边学js边将前面的基础部分打牢. 里面很多地方可以用 ...
HTML+CSS实现淘宝静态页面
刚入门HTML+CSS,学习了一段时间后,为了练手,便写了这样一个静态的淘宝页面.就在刚才,终于完工.不得不说,内心有点小激动- 代码有点多,贴出来不太方便.如果大家有需要的话,直接去演示页面查看源代 ...
使用div+css编写网页框架
使用div+css编写如下网页框架: 代码: html文件: <!DOCTYPE html> <html lang="en"> <head>&l ...
学生dreamweaver网页设计作业成品：电商网页设计——仿淘宝静态首页(HTML+CSS)
学生dreamweaver网页设计作业成品:电商网页设计--仿淘宝静态首页(HTML+CSS) 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求 ...
纯css仿淘宝京东导航菜单栏
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
淘宝静态页面html+css部分
淘宝静态页面html+css部分未来前端程序员为你提供一小点点的帮助,希望能够帮助你. 这是一个简简单单的淘宝静态页面,没有用到JavaScript部分.相信大家都知道,淘宝静态网页也不是特别的简单 ...
使用Python编写淘宝抢购代码
在 Python 中编写淘宝抢购代码,需要使用一些第三方库来帮助我们登录淘宝并获取商品信息.具体步骤如下: 安装所需的第三方库.需要使用的库有:requests.selenium 和 chromedr ...
通过仿淘宝静态网页我的总结
学习了html和css,自己试着动手做了淘宝静态网页,(因为我觉得动手很重要)在动手完成的时候,脑子也同时会在思考. 问1.什么是网页布局? 网页布局是网页制作的基础: div+css布局网页问2. ...

作为初学者，第一次用div+css编写淘宝静态首屏

作为初学者，第一次用div+css编写淘宝静态首屏相关推荐

最新文章

热门文章