我的淘宝
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<h3>
<img src="images/title.png" alt="">
</h3>
<ul>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
<li>
<img src="images/pic01.jpg" alt="" class="top">
<p class="des">日韩镀白金版奥地利水晶手链女防过敏饰品首饰保色手镯七夕礼物</p>
<p class="bottom">
<img src="images/icon.png" alt="">
<span >￥16.8</span>
<span class="sales">销量：12</span>
</p>
<a href="#">
<h6>找相似</h6>
<p>发现更多相似宝贝</p>
</a>
</li>
</ul>
</div>
</body>
</html>
2、style.css
*{
margin:0px;
padding:0px;
list-style:none;
}
body{
background:#f1f1f1;
}
div{
width:1210px;
/* height:1000px; */
margin-left:auto;
margin-right:auto;
background:#ffffff;
margin-top:20px;
}
h3{
height:36px;
/* background:pink; */
margin-bottom:34px;
text-align:center;
}
ul{
width:1152px;
/* height:200px; */
/* background:lime; */
margin-left:auto;
margin-right:auto;
overflow:hidden;
}
li{
width:222px;
height:304px;
background:#f5f5f5;
float:left;
margin-right:8px;
margin-bottom:30px;
position:relative;
cursor:pointer;
border:1px solid #fff;
transition:all 2s;
}
li:nth-of-type(5n){
margin-right:0px;
}
.top{
width:222px;
}
.des{
color:#6c6c6c;
font-size:12px;
line-height:18px;
margin-left:12px;
margin-right:12px;
}
.bottom{
margin-left:12px;
margin-right:12px;
margin-top:15px;
}
.bottom img{
float:left;
}
.bottom span:nth-of-type(1){
color:#ff4400;
font-weight:bold;
float:left;
}
.sales{
color:#9ca0aa;
font-size:12px;
float:right;
}
a{
width:222px;
height:82px;
background:url('../images/bg.png');
position:absolute;
left:0px;
bottom:0px;
text-decoration:none;
color:#ffffff;
text-align:center;
opacity:0;
transition:all 2s;
}
li:hover a{
opacity:1;
}
h6{
width:120px;
margin-left:auto;
margin-right:auto;
/* text-align:center; */
border-bottom:1px solid #d65915;
margin-top:22px;
padding-bottom:8px;
font-size:17px;
}
a p{
/* text-align:center; */
margin-top:5px;
font-size:12px;
}
li:hover{
border:1px solid #f60;
}
3、效果图
4、总结
