<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#example1{
background-image:url(b.jpg);
background-position:right bottom,left top;
background-size:100% 100%;
background-repeat:no-repeat;
padding:800px;
}
div.img{
margin:5px;
border:1px solid #ccc;
float:left;
width:300px;
}
div.img:hover{
border:1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing:border-box;
}
.res{
padding:0 6px;
float:left;
width:30%;
}
@media only screen and (max-width: 700px){
.res {
width: 49.99999%;
margin: 6px 0;
}
@media only screen and (max-width: 500px){
.res {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
<style>
div{color:#F00}
.exp{color:#F00}
</style>
</head>
<style>
a:link{color:#F00}
a:visited {color:#F00;}
a:hover {color:#F00;}
a:active {color:#F00;}
</style>
</head>
<body>
<div class="responsive">
<div class="img">
<ul>
<li>
<img src="da.jpg" alt="sdsaaf" width="80" height="80" </li>
<div class="desc">
<a href="f.mp4" target="_blank"
<h4>￥99 ins男鞋春秋2019新款韩版白塔运动休闲鞋</h4>
</a>
</div>
<li>
<img src="f.jpg" alt="图片文本描述" width="80" height="80" </li>
<div class="desc">
<a href="f.jpg" target="_blank"
<h4>￥59 运动休闲跑步红色春季男鞋百塔潮鞋</h4>
</a>
</div>
<li>
<img src="s.jpg" alt="图片文本描述" width="80" height="80"</li>
<div class="desc">
<a href="s.jpg" target="_blank"
<h4>￥138 男鞋春季2019新款ins网红老爹鞋南朝版</h4>
</a>
</div>
<li>
<img src="j.jpg" alt="图片文本描述" width="80" height="80"</li>
<div class="desc">
<a href="j.jpg" target="_blank"
<h4>￥79 2019新款春季男鞋韩版潮流帆布高帮休闲鞋</h4>
</a>
</di>
<li>
<img src="h.jpg" alt="图片文本描述" width="80" height="80"</li>
<div class="desc">
<a href="h.jpg" target="_blank"
<h4>￥143 男鞋春夏2019新款白塔朝高帮运动情侣鞋</h4>
</a>
</di>
</ul>
</div>
</body>
<div class="responsive">
<div class="img">
<ul>
<li>
<img src="x.jpg" alt="图片文本描述" width="80" height="80"</li>
<div class="desc">
<a href="x.jpg" target="_blank"
<h4>￥259 艾弗森篮球鞋高帮新款学生防滑鞋</h4>
</a>
</div>
</li>
<li>
<img src="z.jpg" alt="图片文本描述" width="80" height="80"</li>
<div class="desc">
<a href="z.jpg" target="_blank"
<h4>￥179 乔丹篮球鞋2019春季新款低帮耐磨运动鞋</h4>
</a>
</di>
<li>
<img src="v.jpg" alt="图片文本描述" width="80" height="80"</li>
<div class="desc">
<a href="v.jpg" target="_blank"
<h4>￥169 361男鞋夏季耐磨训练篮球男高帮鞋</h4>
</a>
</di>
<li>
<img src="n.jpg" alt="图片文本描述" width="80" height="80"</li>
<div class="desc">
<a href="n.jpg" target="_blank"
<h4>￥433 NLKE男鞋2019新款Kyrie欧文5间版2代低帮耐磨实战篮球鞋AO4430-003</h4>
</a>
</di>
<li>
<img src="m.jpg" alt="图片文本描述" width="80" height="80"</li>
<div class="desc">
<a href="m.jpg" target="_blank"
<h4>￥329 安踏男篮球鞋2019夏季新款官网汤姆森kt高帮运动鞋5</h4>
</a>
</di>
</div>
</ul>
</div>
<div class="clearfix">
</div>
<div style="padding:6px;"
<h4 重看效果</h4>
</div>
</head>
<body>
</body>
</body>
</html>