css多行多列的新闻模式

最新推荐文章于 2024-10-30 12:01:39 发布

原创最新推荐文章于 2024-10-30 12:01:39 发布 · 213 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #XHTML #HTML

Div / Css / XML / HTML5 专栏收录该内容

177 篇文章

订阅专栏

本文介绍了使用CSS实现新闻列表的两种多列布局方法。第一种适用于简单的两列布局，通过浮动元素来达到目的；第二种方法则展示了如何创建更复杂的三列布局，并提供了完整的HTML和CSS代码示例。

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>

如图：