Mehrzeiliger und mehrspaltiger CSS-Nachrichtenmodus_Erfahrungsaustausch
Sehen Sie sich das Bild an:
Dieser Effekt besteht sogar aus drei Spalten und 4 Für das Kolumnen-News-Modul habe ich Table verwendet, da ich dachte, es sei bequemer als CSS. Erst als ich Float von a entwickelte, wurde mir klar, dass die Verwendung von ul bequemer und einfacher zu steuern ist Zuerst beim Code:
.news{}
.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;}a#n1 ist der Nachrichtentitel, links schwebend, n2 und n3 sind die Anzahl der Klicks und das Veröffentlichungsdatum, schwebend auf der rechten Seite, mit einem Abstand von 20 Pixeln. Beachten Sie, dass alle Floats auf li gelöscht werden müssen.
Beispiel, drei Spalten:
<!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=gb2312" />
<title>css多行多列的新闻模式</title>
<style type="text/css">
<!--
*{margin: 0px; padding:0px;}
body { font-family:"宋体"; font-size:12px; color:#000; padding:100px;}
.news{}
.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>
这是三列
<ul class="news">
<li>左列，新闻标题项点 击发布日期</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线88882008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线88882008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线88882008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线88882008-08-08</li>
</ul>
</body>
</html><!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=gb2312" />
<title>css多行多列的新闻模式</title>
<style type="text/css">
<!--
*{margin: 0px; padding:0px;}
body { font-family:"宋体"; font-size:12px; color:#000; padding:100px;}
.news{}
.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>
这是二列
<ul class="news">
<li>左列，新闻标题项点击次数</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
</ul>
</body>
</html><!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=gb2312" />
<title>css多行多列的新闻模式</title>
<style type="text/css">
<!--
*{margin: 0px; padding:0px;}
body { font-family:"宋体"; font-size:12px; color:#000; padding:100px;}
.news2{}
.news2 li{ list-style:none;clear:both;margin-top:10px;border-bottom:1px dashed #ccc;height:16px;
display:block}
.news2 li a#n1{ text-decoration:none;float:left;}
.news2 li a#n2{ text-decoration:none; float:right; color:#999;display:block}
.news2 li a#n3{ float:right; padding-right:20px;color:#999; display:block}
.news2 li a#n1:hover{ text-decoration:underline;}
.news2 li a#n3:hover,.news li a#n3:hover{ text-decoration:none;}
/**/
-->
</style></head>
<body>
加条虚线
<ul class="news2">
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
</ul>
</body>
</html><!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=gb2312" />
<title>css多行多列的新闻模式</title>
<style type="text/css">
<!--
*{margin: 0px; padding:0px;}
body { font-family:"宋体"; font-size:12px; color:#000; padding:100px;}
.news{}
.news3{ background:#ccc;}
.news3 li{ list-style:none; clear:both; height:20px; padding-top:8px;}
.news3 li#x1{ list-style:none; clear:both; height:20px; background-color:#F2F2F2}
.news3 li a#n1{ text-decoration:none; float:left;}
.news3 li a#n2{ text-decoration:none; float:right; color:#999}
.news3 li a#n3{ float:right; padding-right:20px;color:#999}
.news3 li a#n1:hover{ text-decoration:underline;}
.news3 li a#n3:hover,.news li a#n3:hover{ text-decoration:none;}
-->
</style></head>
<body>
不同背景色
<ul class="news3">
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li id="x1">>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
</ul>
</body>
</html><!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=gb2312" />
<title>css多行多列的新闻模式</title>
<style type="text/css">
<!--
*{margin: 0px; padding:0px;}
body { font-family:"宋体"; font-size:12px; color:#000; padding:100px;}
.news4{}
.news4 li{ list-style:none; clear:both;margin-top:10px; padding:10px; border:1px solid #ccc;
display:block}
.news4 li a#n1{ text-decoration:none;float:left;}
.news4 li a#n2{ text-decoration:none; float:right; color:#999;display:block}
.news4 li a#n3{ float:right; padding-right:20px;color:#999; display:block}
.news4 li a#n1:hover{ text-decoration:underline;}
.news4 li a#n3:hover,.news li a#n3:hover{ text-decoration:none;}
/**/
-->
</style></head>
<body>
边框
<ul class="news4">
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
<li>>> 热烈祝贺weilaixu.cn隆重上线2008-08-08</li>
</ul>
</body>
</html>
