网页首页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div class="content">
<div class="benner"><!-- 轮播图 -->
<img src="img/banner/1.jpg" >
</div>
<div class="star">
<div class="title">
</div>
<!-- 精灵图 追星必备-->
<ul>
<li><img src="img/necessary-1.png" alt=""><span>官方应援手灯专区</span></li>
<li><img src="img/necessary-2.gif" alt=""><span>官方应援手幅专区</span></li>
<li><img src="img/necessary-3.png" alt=""><span>签名商品专区</span></li>
<li><img src="img/necessary-4.gif" alt=""><span>官方DVD专区</span></li>
<li><img src="img/img/special.jpg" ></li>
</ul>
</div>
<!-- top榜 -->
<div class="top">
<div class="title">
</div>
<!-- ul>(li>img[src=img/img/top/a/toplist_a0$.jpg])*8 -->
<ul>
<li><a href="list.html"><img src="img/img/top/a/toplist_a01.jpg" alt=""><p>薛之谦</p></a></li>
<li><a href="list.html"><img src="img/img/top/a/toplist_a02.jpg" alt=""><p>IKON</p></a></li>
<li><a href="list.html"><img src="img/img/top/a/toplist_a03.jpg" alt=""><p>鹿晗</p></a></li>
<li><a href="list.html"><img src="img/img/top/a/toplist_a04.jpg" alt=""><p>GOT7</p></a></li>
<li><a href="list.html"><img src="img/img/top/a/toplist_a05.jpg" alt=""><p>EXO</p></a></li>
<li><a href="list.html"><img src="img/img/top/a/toplist_a06.jpg" alt=""><p>Astro</p></a></li>
<li><a href="list.html"><img src="img/img/top/a/toplist_a07.jpg" alt=""><p>Winner</p></a></li>
<li><a href="list.html"><img src="img/img/top/a/toplist_a08.jpg" alt=""><p>big bang</p></a></li>
</ul>
</div>
<!-- 新品首发 -->
<div class="list">
<div class="title-t">
</div>
<!-- ul(li>a>img[src=img/img/pro/$.jpg]+div.right>span.title+span.money+div>span.love+span.num)*9 -->
<ul>
<li><a href="">
<img src="img/img/pro/1.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear 万魔邮 头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/img/pro/2.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear 万魔邮 头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/img/pro/3.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear 万魔邮 头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/img/pro/4.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear 万魔邮 头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/img/pro/5.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear 万魔邮 头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/img/pro/6.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear 万魔邮 头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/img/pro/7.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear 万魔邮 头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/img/pro/8.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear 万魔邮 头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">9</span></div>
</div>
</a></li>
<li><a href="">
<img src="img/img/pro/9.jpg" alt="">
<div class="right">
<span class="title">【现货包邮】加一联创1more bear 万魔邮 头</span>
<span class="money">￥50</span>
<div><span class="love"></span><span class="num">0</span></div>
</div>
</a></li>
</ul>
</div>
</div>
</body>
</html>
------------------------------------------css------------------------------------------------------
.content ul{
padding-left: 20px;
}
.content ul li{
display: inline-block;
}
.content{
width: 1000px;
margin: 0 auto;
background-color: #CCCCCC;
}
.content .benner img{
width: 1000px;
}
.content .star {
margin-top: 20px;
}
.content .star .title{
background-image: url(../img/img/shop_title2.png);
background-repeat: no-repeat;
height: 45px;
}
.content .star span{
color: #999999;
}
.content .star li img{
width: 180px;
}
.content .star li{
background-color: #FFFFFF;
vertical-align: bottom;
/* 水平对其 */
}
.content .star li:last-child{
}
.content .star li img:last-child{
height: 135px;
}
.content .star li img{
width: 180px;
}
.content .star li span{
text-align: center;
padding: 10px;
display: block;
}
/* top榜 */
.content .top{
margin-top: 20px;
}
.content .top .title{
height: 25px;
background-image: url(../img/shop_title2.png);
background-repeat: no-repeat;
background-position: 0 -60px;
}
.content .top li{
margin: 0 5px;
width: 106px;
background-color: #FFFFFF;
}
.content .top li:first-child{
margin-left: 0;
}
.content .top li:first-child{
margin-right: 0;
}
.content .top img{
width: 106px;
}
.content .top a{
text-align: center;
text-decoration: none;
color: #000000;
}
/* 新品首发 */
.content .list .title-t{
height: 47px;
background-image: url(../img/shop_title2.png);
background-repeat: no-repeat;
background-position: 0 -100px;
}
.content .list li{
background-color: #FFFFFF;
width: 306px;
margin: 10px 5px;
}
.content .list li:nth-child(3n+1){
margin-left: 0;
}
.content .list li:nth-child(3n){
margin-right: 0;
}
.content .list img{
height: 141px;
width: 141px;
}
.content .list .right{
display: inline-block;
vertical-align: top;
}
.content .list .right span{
display: block;
color: #999999;
margin: 10px 5px;
width: 150px;
}
.content .list .right .title{
margin-top: 30px;
/* 省略号 兼容 */
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.content .list .right .money{
color: #DE4767;
}
.content .list .right div span{
display: inline-block;
}
.content .list .right .love{
height:12px;
width: 12px;
background-image: url(../img/icon/ico.png);
background-position: 0 -74px;
margin-top: 18px;
}
.content .list .right .num{
width: 100px;
vertical-align: top;
}
浙公网安备 33010602011771号