DIV CSS サンプル チュートリアル: 新しいスタイルの CSS ニュース リストproduction_html/css_WEB-ITnose

今日はニュースリストの制作について話します。ニュースリストはウェブサイトの重要な要素です。私たちは頻繁に遭遇しますが、その出現にどう対処するかが特に重要です。この例では、タイトルと日付を別々にフロート表示し、リンク上にマウスを置くとさまざまな色の変化を示します。また、LI の背景を制御して、何らかのインタラクションも生成できるようにします。全体的な効果はかなり良いです。以下の図をご覧ください:

XHTML コードは非常に単純で、順序のないリストですが、制御を容易にするためにタイトルと時間に異なる CLASS を設定しています。

& Lt; ID = "ページリスト" & gt; & lt; a href = "lbt" & gt; ;span class="ldt">2007-08-06

ここに関連テキスト タイトルのテキストがありますここに関連テキスト タイトルのテキストがありますテキスト タイトルのテキスト タイトル2007- 08-06

該当するテキストのタイトルです2007-08-06 ;
「#」>ここに関連するテキストタイトルのテキストがあります2007- 08-06 & gt; & lt; li & gt; lbt" & gt; ここに、関連するテキスト タイトルのテキストが表示されます。 Words2007-08-06
関連テキスト タイトルのテキストは次のとおりです。関連テキスト タイトルのテキストは次のとおりです2007-08-06 ＆lt;/a＆gt;＆lt;/li＆gt; ="#">ここに該当するテキストのタイトルのテキストがありますここに関連するテキストのタイトルのテキストがあります2007-08 -06
タイトル2007-08-06> ;
2007-08-06スパン& gt; & lt; li & gt; a href = "lbt" & gt;関連するテキストのタイトル & ;/span>2007-08-06
span class="lbt">ここに関連テキストのタイトルのテキストがありますここに関連テキストのタイトルのテキストがありますテキスト タイトルのテキストですテキスト タイトルのテキスト2007-08-06
テキスト タイトルのテキスト2007-08-06

ここに関連テキストのタイトルのテキストがありますここに関連テキストのタイトルがあります

ここのテキストは、関連するテキスト タイトルのテキストです2007-08 -06

次の CSS コードを見てみましょう。 ; フォントサイズ:12px; リストスタイルタイプ:なし;

#pagelist li {幅: 530px; 高さ: 30px; }テキストインデント:20px; 空白:nowrap; オーバーフロー: 非表示;
#pagelist {display:block; :right; text-align:center; color:#069; 表示:インライン ;} :#666; カーソル:手; 背景:url(20070807_bg.png) no -repeat 0 0;}
#pagelist li a:#03c; url(20070807_bg.png) no-repeat 0 -30px;}
#pagelist li a:hover .ldt {color:#000;}
まず、ULのボーダー、パディング、およびその他の一般的に使用される属性を定義します。
LIの幅を530PX、高さを30pxに設定しました
タイトルと時間を別々に設定しました。関連するプロパティも理解しやすいです。

リンクスタイルを設定します。注意すべき主な点は、色の変更と設定です。