HTML实现图片列表展示

    xiaoxiao2023-03-24  3

    <!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; }
    转载请注明原文地址: https://ju.6miu.com/read-1201172.html
    最新回复(0)