自己写带图片的新闻列表分享
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .kk{ width: 450px; height: 400px; border: 1px solid darkgrey; margin: 50px auto; } .kk .uu{ width: 430px; height: 40px; line-height: 40px; text-align: left; overflow: hidden; } .kk .uu a{ text-decoration: none; color: black; } .kk .uu.uu_01{ width: 430px; height: 90px; border: 2px solid darkcyan; position: relative; } .kk .uu.uu_01 .ww1{ display: none; width: 430px; height: 40px; position: absolute; top: 0; left: 0; z-index: 1; overflow: hidden; } .kk .uu.uu_01 .ww2{ display: block; width: 430px; height: 90px; position: absolute; top: 0; left: 0; overflow: 2; } .kk .uu.uu_01 .ww2 img{ display: block; width: 90px; height: 70px; padding: 10px; /*vertical-align: middle;*/ float: left; transition: transform 0.6s linear; } .kk .uu.uu_01 .ww2 img:hover{ transform: scale(1.1); } .kk .uu.uu_01 a .ww2 span{ display: block; width: 330px; height: 90px; font-size: 5px; line-height: 15px; text-align: center; float: left; } </style> <script src="jquery-1.11.3.min.js.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(function(){ $('.uu').mouseenter(function(){ $(this).addClass('uu_01').siblings('.uu').removeClass('uu_01'); }) }) }) </script> </head> <body> <div class="kk"> <div class="uu uu_01"> <a class='ww1' href="" >俄乌紧张形势升温 卫星照揭俄部署更多S400防空导弹</a> <a class="ww2"><img src="tt/t01.jpg"/><span>俄乌紧张形势升温 卫星照揭俄部署更多S400防空导弹</span></a> </div> <div class="uu "> <a class='ww1' href="" >暖！掉入纽约下水井的婚戒找到了，情侣也找到了</a> <a class="ww2"><img src="tt/t02.jpg"/><span>暖！掉入纽约下水井的婚戒找到了，情侣也找到了</span></a> </div> <div class="uu "> <a class='ww1' href="" >太阳vs湖人五佳球：艾顿空接虐筐 詹皇一飞冲天滑翔暴扣</a> <a class="ww2"><img src="tt/t03.jpg"/><span>太阳vs湖人五佳球：艾顿空接虐筐 詹皇一飞冲天滑翔暴扣</span></a> </div> <div class="uu "> <a class='ww1' href="" >波罗申科希望德国加强军事存在，指出俄罗斯下一步的军事目标</a> <a class="ww2"><img src="tt/t04.jpg"/><span>波罗申科希望德国加强军事存在，指出俄罗斯下一步的军事目标</span></a> </div> <div class="uu "> <a class='ww1' href="" >媒体：国足将进行魔鬼体能特训 亚洲杯至少不能跑输对手</a> <a class="ww2"><img src="tt/t05.jpg"/><span>媒体：国足将进行魔鬼体能特训 亚洲杯至少不能跑输对手</span></a> </div> <div class="uu "> <a class='ww1' href="" >弱旅不放硬仗不软 两战净胜69分的新男篮谁不爱？</a> <a class="ww2"><img src="tt/t06.jpg"/><span>弱旅不放硬仗不软 两战净胜69分的新男篮谁不爱？</span></a> </div> </body> </html> 代码效果图片：
原文链接：https://www.qiquanji.com/post/7734.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知