实现LI列表图文混排代码,Css代码库,德仔网

代码语言

代码分类

【Css】实现LI列表图文混排

作者:泳臻 / 发布于2015/11/12/ 649


	<!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>
	<title>用CSS实现LI列表图文混排的布局实例</title>
	<style type="text/css">
	.news{width:250px;line-height:21px;}
	.imgText .img{float:left;width:100px;}
	.imgText .img img{width:90px;height:90px;border:#ddd 1px solid;}
	.imgText .text{float:left;width:145px;}
	.imgText .text h3{font-size:12px;height:24px;overflow:hidden;}
	.imgText .text h3 a{color:#000;}
	.imgText .text h3 a:hover{color:#BA2636;}
	.imgText .text p{text-indent:24px;}
	.imgText .text p a{color:#BA2636;}
	.textList{clear:both;font-size:14px;}
	.textList li{height:25px;line-height:25px;overflow:hidden;}
	.textList li a{margin-right:5px;}
	@charset "utf-8";
	body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd{padding:0;margin:0;}
	li{list-style:none;}img{border:none;}em{font-style:normal;}
	a{color:#555;text-decoration:none;outline:none;blr:this.onFocus=this.blur();}
	a:hover{color:#000;text-decoration:underline;}
	body{font-size:12px;font-family:Arial,Verdana, Helvetica, sans-serif;word-break:break-all;word-wrap:break-word;}
	.clear{height:0;overflow:hidden;clear:both;}
	</style>
	</head>
	<body>
	<div class="news">
	<ul class="imgText">
	 <li class="img"><a href="#"><img src="/images/m01.jpg" /></a></li>
	 <li class="text">
	 <h3><a href="#">今天夜里到明天阴有太阳</a></h3>
	 据中央气象台消息，今夜到明天，华北大部有强降水，同时艳阳高照<a href="#">[详细]</a>
	 </li>
	 </ul>
	 <ul class="textList">
	<li>
	<a title="超级漂亮的几款清新、常用的网页CSS布局配色实例" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1061.htm">
	超级漂亮的几款清新、常用的网页CSS布局配色实例</a></li>
	<li>
	<a title="CSS制作斜角上有背景图片的Div层" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1060.htm">
	CSS制作斜角上有背景图片的Div层</a></li>
	<li>
	<a title="Js实现的层展开、层折叠效果，默认时候层是折叠的" target="_blank" href="http://www.csrcode.cn/html/txdm/tcys/1059.htm">
	Js实现的层展开、层折叠效果，默认时候层是折叠的</a></li>
	 </ul>
	</div>
	</body>
	</html>

	<hr> 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：网页代码站</font>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

　图文混排　

同语言下

可能有用的

泳臻贡献的其它代码(24)