问答详情
源自:2-4 用CSS实现手风琴效果页面样式

在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>


提问者:慕仰0443758 2017-06-08 06:42

个回答

  • 海带妹
    2017-06-08 07:31:04

    我也不知道呀