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

最新推荐文章于 2024-08-21 15:33:15 发布

Mr_duyi_fantasy

最新推荐文章于 2024-08-21 15:33:15 发布

阅读量4.2k

点赞数

本文链接：https://blog.csdn.net/Mr_duyi_fantasy/article/details/62048759

版权

本文记录了一位初学者使用div+css技术制作淘宝静态首页的历程，详细介绍了html结构布局和css样式设置，为网页设计入门者提供了一个实战案例。

摘要由CSDN通过智能技术生成

html部分--

<html>

<head>
<meta charset="UTF-8">
<title>MM</title>

<link rel="stylesheet" type="text/css" href="lesson3.css">

</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">

<div class="subface1">

<div class="picture1"></div>
<div class="picture2"></div>
<div class="picture4"></div>
<div class="picture5"></div>
<div class="picture6"></div>
<div class="word11"><h5>今日热卖</h5></div>
<div class="center8">

<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>

<div class="center7">
<ul class="nav">
<li class="list-item">
<a href="#">天猫</a>
</li>
<li class="list-item">
<a href="#">聚划算</a>
</li>
<li class="list-item">
<a href="#">天猫超市</a>
</li>
<li class="list-item1">
<a href="#">淘抢购</a>
</li>
<li class="list-item1">
<a href="#">电器城</a>
</li>
<li class="list-item1">
<a href="#">司法拍卖</a>
</li>
<li class="list-item1">
<a href="#">中国质造</a>
</li>
<li class="list-item1">
<a href="#">特色中国</a>
</li>
<li class="list-item1">
<a href="#">飞猪旅行</a>
</li>
<li class="list-item1">
<a href="#">智能生活</a>
</li>
<li class="list-item1">
<a href="#">苏宁易购</a>
</li>
</ul>
</div>
<div class="left1">
<div class="left3"></div>
<div class="left2"><h3>主题市场</h3>
<div class="logo4"></div>
</div>
<ul>
<li class="word6"><span class="left">女装/ 男装/ 内衣</span></li>
<li class="word6"><span class="left">鞋靴/ 箱包/ 配件</span></li>
<li class="word6"><span class="left">童装玩具/孕产/用</span></li>
<li class="word6"><span class="left">家电/ 数码/ 手机</span></li>
<li class="word6"><span class="left">美妆/ 洗漱/保健品</span></li>
<li class="word6"><span class="left">珠宝/ 眼镜/ 手表</span></li>
<li class="word6"><span class="left">运动/ 户外/ 乐器</span></li>
<li class="word6"><span class="left">游戏/ 动漫/ 影视</span></li>
<li class="word6"><span class="left">美食/ 生鲜/ 零食</span></li>
<li class="word6"><span class="left">鲜花/ 宠物/ 农资</span></li>
<li class="word6"><span class="left">房产/ 装修/ 建材</span></li>
<li class="word6"><span class="left">家具/ 家饰/ 家纺</span></li>
<li class="word6"><span class="left">汽车/二手车/ 用品</span></li>
<li class="word6"><span class="left">办公/ DIY/五金电</span></li>
<li class="word6"><span class="left">百货/ 餐厨/家庭保</span></li>
<li class="word6"><span class="left">游戏/ 卡劵/本地服</span></li>
</ul>
</div>
<div class="top2">
<div class="logo1"></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 class="right5">
<div class="right9">
<div class="right10">
<div class="icon11"></div>
<a class="word25" href="#" >充话费</a>
</div>
<div class="right10">
<div class="icon12"></div>
<a class="word25" href="#">游戏</a>

</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);
}