在CSS中加了一个big class后为何文字部分出现两份呢
在CSS中加了一个名为big的class后为何文字部分出现两份呢
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body,ul,li,p,h3{margin: 0;padding: 0}
ul,li{list-style-type: none;}
.wrap{height: 128px;width: 938px;border: 1px solid #d3d3d3;}
.wrap li{width: 156px;height: 128px;float: left;overflow: hidden;}
.wrap li a{height: 128px;width: 156px;display: block;overflow: hidden;position: relative;text-decoration: none;}
.wrap img{position: absolute;bottom: 0;right: -20px;height: 72px;width: 117px;}
.wrap .info{position: absolute;top: 0;left: 0;width: 136px;padding: 4px 10px;}
.wrap .info h3{font-size: 14px;font-weight: 700;}
.wrap .info p{font-size: 12px;height: 22px;line-height: 22px;width: 136px;color: #888;overflow: hidden;}
.wrap .info .price{font-size: 14px;height: 22px;line-height: 22px;font-style: italic;color: #fa2a5d;}
.wrap .line{position: absolute;right: 0;width: 0;height: 128px;border: 1px dashed #cacaca;}
.wrap .mask{position: absolute;top: 0;left: 0;height: 128px;width: 156px;opacity: 0;background: #000;}
.wrap li.big,li.big a{width: 314px;}
.wrap li.big img{height: 128px;width: 195px;right: 0;bottom: 0}
.wrap li.big .info{width: 290px;}
.wrap li.big h3{font-size: 18px;}
.wrap li.big p{font-size: 14px;width: 166px;}
.wrap li.big p.price{font-size: 16px;padding-top: 7px;}
</style>
</head>
<body>
<div>
<ul>
<li>
<a href="#">
<img src="images/bat.jpg">
<div>
<h3 style="color:#a23567">巴坦木</h3>
<p>聚划算1周年庆</p>
<p><strong>1</strong><i>折起</i></p>
</div>
<i></i>
<i></i>
</a>
</li>
<li>
<a href="#">
<img src="images/bat.jpg">
<div>
<h3 style="color:#a23567">巴坦木</h3>
<p>聚划算1周年庆</p>
<p><strong>1</strong><i>折起</i></p>
</div>
<i></i>
<i></i>
</a>
</li>
<li>
<a href="#">
<img src="images/bat.jpg">
<div>
<h3 style="color:#a23567">巴坦木</h3>
<p>聚划算1周年庆</p>
<p><strong>1</strong><i>折起</i></p>
</div>
<i></i>
<i></i>
</a>
</li>
<li>
<a href="#">
<img src="images/bat.jpg">
<div>
<h3 style="color:#a23567">巴坦木</h3>
<p>聚划算1周年庆</p>
<p><strong>1</strong><i>折起</i></p>
</div>
<i></i>
<i></i>
</a>
</li>
<li>
<a href="#">
<img src="images/bat.jpg">
<div>
<h3 style="color:#a23567">巴坦木</h3>
<p>聚划算1周年庆</p>
<p><strong>1</strong><i>折起</i></p>
<i></i>
</a>
</li>
</ul>
</div>
</body>
</html>
