在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>
2017-06-08
我也不知道呀