HTML实现图片列表展示

最新推荐文章于 2024-09-13 00:41:46 发布

luckyblues

最新推荐文章于 2024-09-13 00:41:46 发布

阅读量2.8w

点赞数 18

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_27632117/article/details/52684731

版权

HTML 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

这里写图片描述

<!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>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>

<body>
<!-- 上方内容 -->
  <div class="box">
      <div class="head">
         <span>热门</span>
         <a href="#">更多></a>
      </div>
  <!-- 图片内容 -->  
  <ul>
    <li>
      <div class="deatil">
         <h2>夕阳中海</h2>
         <p>在夕阳下泛着橘色的大海和山</p>
         <a href="#">开始进入</a>
      </div>
      <img src="images/02972_goldenhour_1920x1080.jpg" width="160px" height="240px" alt=""/>
    </li>

    <!--第二个图片-->
  <li>
      <div class="deatil">
         <h2>山清水秀</h2>
         <p>秀丽的河山</p>
         <a href="#">点击进入</a>
      </div>
      <img src="images/02973_fjorddream_1920x1080.jpg" width="160px" height="240px" alt=""/>
    </li>

      <!--第3个图片-->
  <li>
      <div class="deatil">
         <h2>平静的海</h2>
         <p>紫色的平静的大海</p>
         <a href="#">点击进入</a>
      </div>
      <img src="images/02975_italiansiberia_1920x1080.jpg" width="160px" height="240px" alt=""/>
    </li>

      <!--第4个图片-->
  <li>
      <div class="deatil">
         <h2>沙滩大海</h2>
         <p>海浪拍打沙滩，偶尔有吹上来小螃蟹</p>
         <a href="#">点击进入</a>
      </div>
      <img src="images/02976_beachtide_1920x1080.jpg" width="160px" height="240px" alt=""/>
    </li>


      <!--第5个图片-->
  <li>
      <div class="deatil">
         <h2>山清水秀</h2>
         <p>平静的溪水流淌在山脉之间</p>
         <a href="#">点击进入</a>
      </div>
      <img src="images/02978_columbiarivergorge_1920x1080.jpg" width="160px" height="240px" alt=""/>
    </li>


      <!--第6个图片-->
  <li>
      <div class="deatil">
         <h2>幻象大海</h2>
         <p>像虚幻出来的景色一样</p>
         <a href="#">点击进入</a>
      </div>
      <img src="images/02979_lightbluenight_1920x1080.jpg"width="160px" height="240px" alt=""/>
    </li>


      <!--第7个图片-->
  <li>
      <div class="deatil">
         <h2>雄鹰展翅</h2>
         <p>我也希望能像鹰一样飞翔</p>
         <a href="#">点击进入</a>
      </div>
      <img src="images/02980_kingoftheskies_1920x1080.jpg"width="160px" height="240px" alt=""/>
    </li>


      <!--第4个图片-->
  <li>
      <div class="deatil">
         <h2>静谧丛林</h2>
         <p>早晨泛着红色的光的丛林显得格外动人</p>
         <a href="#">点击进入</a>
      </div>
      <img src="images/02981_forestdawniv_1920x1080.jpg" width="160px" height="240px" alt=""/>
    </li>
  </ul>  
  </div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
*{
    margin:0;
    padding:0;
}
body{
    font-family:"微软雅黑";
    background-color:#ddd;
}
.box{
    width:760px;
    height:600px;
    background:#fff;
    margin:30px auto;
    padding:20px;
}
.box .head span{
    font-size:18px;
    color:#333;
}
.box .head{
    margin-bottom:20px;
}
.box .head a{
    text-decoration:none;
    float:right;
    font-size:15px;
    color:#333; 
}
.box .head a:hover{
    color:#F00;
}
.box ul li{
    width:160px;
    height:240px;
    list-style:none;
    position:relative;
    float:left;
    margin-left:20px;
    margin-bottom:20px;
    overflow:hidden;
}
.box ul li .deatil{
    width:160px;
    height:240px;
    background:rgba(0,0,0,0.7);
    position:absolute;
    top:-240px;
    -webkit-transition:all 0.3s ease;<!--适应ie，谷歌，苹果浏览器内核-->
    -o-transition:all 0.3s ease;<!--适应Opera浏览器内核-->
    -moz-transition:all 0.3s ease;<!--火狐浏览器-->
    -ms-transition:all 0.3s ease;<!--微软-->
}

.box ul li .deatil h2{
    font-size:18px;
    color:#fff;
    text-align:center;
    padding-top:30px;
    }
.box ul li .deatil p{
    font-size:16px;
    text-align:center;
    margin:30px;
    color:#fff;
}
.box ul li .deatil a{
    font-size:15px;
    display:block;
    color:#fff;
    background-color:#F00;
    text-decoration:none;
    width:100px;
    height:40px;
    text-align:center;
    line-height:40px;
    margin:0 auto;
}
.box ul li:hover .deatil{
    top:0;
}