ホームページ > 記事 > ウェブフロントエンド > CSS多行多列ニュースモード_体験交流
CSS多行多列ニュースモード_体験交流
- PHP中文网オリジナル
- 2016-05-16 12:05:511372ブラウズ
css の複数行および複数列のニュース モード_エクスペリエンス交換
画像を見てください:
この効果は 3 つでもあります-次元 4 列のニュース モジュールについては、css よりもテーブルの方が便利だと考えてテーブルを使用していましたが、a の float を開発するまでは、ul を使用する方が便利で制御しやすいことがわかりました。まずコードを見てください:
引用:
.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 はニュースのタイトルです、左側はフローティング、n2 と n3 はクリック数とリリース日、右側はフロート、距離 20 ピクセルです。
li ではすべてのフロートをクリアする必要があることに注意してください。
テストは ie6、ie7、ff をサポートしています。 、オペラ。
例、3 列: p>
<!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>例、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=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>上記は css の複数行および複数列のニュース モード_体験交換コンテンツです。その他の関連コンテンツについては、php 中国語 web サイト (www.php.cn) にご注意ください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。