1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

自己写带图片的新闻列表分享

代码:

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

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: