css多行多列的新闻模式
程序员文章站
2022-04-26 18:33:52
...
css多行多列的新闻模式
1. 最简单的两列
<style>
ul {
width:250px;
list-style:none;
}
li {
width:120px;
float:left;
height:20px;
}
</style>
<ul>
<li>武松打虎</li>
<li>千里走单骑</li>
<li>武松打虎</li>
<li>千里走单骑</li>
<li>武松打虎</li>
<li>千里走单骑</li>
<li>武松打虎</li>
<li>千里走单骑</li>
<li>武松打虎</li>
<li>千里走单骑</li>
<li>武松打虎</li>
<li>千里走单骑</li>
<li>武松打虎</li>
<li>千里走单骑</li>
<li>武松打虎</li>
<li>千里走单骑</li>
</ul>
如图：
2. 第二种方法
<!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>css多行多列的新闻模式</title>
<style type="text/css">
<!--
*{margin: 0px; padding:0px;}
body { font-family:arial; font-size:12px; color:#000; padding:100px;}
.news{width:400px;}
.news li{ list-style:none; clear:both}
.news li a#n1{ text-decoration:none; float:left; line-height:22px;}
.news li a#n2{ text-decoration:none; float:right; color:#999}
.news li a#n3{ float:right; padding-right:20px;color:#999}
.news li a#n1:hover{ text-decoration:underline;}
.news li a#n3:hover,.news li a#n3:hover{ text-decoration:none;}
/**/
-->
</style></head>
<body>
<h2>三列</h2>
<ul class="news">
<li><a id="n1">Title</a><a id="n2">Hits</a><a id="n3">Date</a></li>
<li><a href="#" id="n1">Storms swamp Kentucky town</a><a id="n2">8888</a><a id="n3">2028-08-08</a></li>
<li><a href="#" id="n1">Wanted posters on Times Square</a><a id="n2">8888</a><a id="n3">2018-08-08</a></li>
<li><a href="#" id="n1">Exec admits affair after billboard blitz</a><a id="n2">8888</a><a id="n3">2008-08-08</a></li>
<li><a href="#" id="n1">Freedom's Sisters exhibit</a><a id="n2">8888</a><a id="n3">2028-08-08</a></li>
</ul>
<br><br><br>
<h2>两列</h2>
<ul class="news">
<li><a href="http://weilaixu.cn" id="n1">Name</a><a id="n2">Hits</a></li>
<li><a href="http://weilaixu.cn" id="n1">gideon</a><a id="n2">2008-08-08</a></li>
<li><a href="http://weilaixu.cn" id="n1">yiyi</a><a id="n2">2008-08-08</a></li>
<li><a href="http://weilaixu.cn" id="n1">hongr</a><a id="n2">2008-08-08</a></li>
<li><a href="http://weilaixu.cn" id="n1">wanger</a><a id="n2">2008-08-08</a></li>
</ul>
</body>
</html>
如图：