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

时间：6年前阅读：4921
代码：
<!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,我们将及时处理。
微信扫码关注
更新实时通知
自己写带图片的新闻列表分享

网友评论
