css多行多列的新聞模式
?
1. 最簡(jiǎn)單的兩列
?
<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 id="n1">Name</a><a id="n2">Hits</a></li>
<li><a id="n1">gideon</a><a id="n2">2008-08-08</a></li>
<li><a id="n1">yiyi</a><a id="n2">2008-08-08</a></li>
<li><a id="n1">hongr</a><a id="n2">2008-08-08</a></li>
<li><a id="n1">wanger</a><a id="n2">2008-08-08</a></li>
</ul>
</body>
</html>
?
如圖：
?
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
