为什么图片没有隐藏起来,下附代码。求解答.

来源:2-2 基本界面编写

慕码人6960450

2015-12-23 12:58

<!DOCTYPE html>

<html>

<meta charset="UTF-8">

<style type="text/css">

*{padding: 0;margin: 0}

body{

    background-color:#fff;

    color:#555;

    font-family:'Avenir Next','Lantinghei SC';

    font-size: 14px;

    -webkit-font-smoothing:antialiased;

}

.wrap{

          width:100%;

          height:600px;

          position:absolute;

          top:50%;

          margin-top:-300px;

          background-color:#333;

          overflow:hidden;

      }

.photo{

    width: 260px;

    height: 320px;

    position: absolute;

    z-index: 1;

    box-shadow: 0 0 1px rgba(0,0,0,.01);

}

.photo .side{

    width: 100%;

    height:100%;

    background-color: #eee;

    position: absolute;

    top:0;

    right: 0;

    padding: 20px;

}

.photo .side-front{}

.photo .side-front .image{

     width: 100%;

     height: 250px;

     line-height: 250px;

     overflow: hidden;

}

.photo .side-front .image img{

     width: 100%;

}

.photo .side-front .caption{

    text-align: center;

    font-size: 16px;

    line-height: 50px;

}

.photo .side-back{display: none;}

</style>     

<body>

<div class="wrap">

   <div class="photo">

     <div class="side sdie-front">

         <p class="image"><img src="015.jpg"/></p>

         <p class="caption">骑行</p>

     </div>

     <div class="side side-back">

         <p class="desc">描述信息</p>

     </div>

    </div> 

  </div>  

</body>

</html>


写回答 关注

2回答

  • 斌2233
    2015-12-23 13:48:13

    .photo .side-back{display: none;}这么写是不对的  改成.photo, .side-back{display: none;}

  • 李晓健
    2015-12-23 13:30:45

    没看到你哪里有代码要把图片隐藏起来呀,只有把描述信息给隐藏起来的代码。

CSS3+JS 实现超炫的散列画廊特效

实现更自由的切换照片的画廊效果,打造超酷的切换动画

46090 学习 · 215 问题

查看课程

相似问题