DivCSS サンプル チュートリアル: 上下構造を持つグラフィックとテキストが混在する CSS リスト

今日はよく使う「グラフィックとテキストが混在したCSSリスト」の作り方を一緒に学んでいきます。まず、このリストの特性を分析し、次に HTML コードを記述し、最後に CSS スタイルを適用して最終的な効果を実現します。

この例の効果:


この記事の執筆者：52CSS.com Li Xiang 転載をご希望の場合は、当サイト（http://www.52css.com/）へのリンクを作成してください。記事の内容を自由に変更することはできません。 、この著作権声明のテキストは保持してください。
上は私が大好きなコラムの名前（52cssなど）、下は2つのブロックに分かれており、1つはサムネイル画像を表示し、もう1つはテキストリンクを表示します。どちらもul+liで実現できます。上記の分析を使用して、次の HTML エンコードを開始します。


ID ラップを使用してすべての要素をレイヤーに配置し、境界線の色を #e5f2f8 に設定します。これは、影効果があるように見せるためです。
次に、その中にレイヤー リストを作成し、リスト内に次の 3 つのレイヤーを作成します。


HTML コードを詳しく書き始めましょう。


タイトルを作成するには list_title レイヤーで h3 を左にフロートし、さらに接続を作成するには右にフロートし、list_pic レイヤーにフローティングのままにして ul+li 画像を作成します。
list_text レイヤーに ul+li を作成してニュース リストを作成します。
一番下にクラスクリアのレイヤーを配置してフロートをクリアします。

上記の基礎を踏まえて、次の CSS コーディングを開始します。
全体的な声明:

レイヤー全体の折り返しのスタイルを設定します。幅は450px、上下の余白は30px、左右は水平に揃え、境界線を青に設定します（ここでは影効果を高めるため）。


タイトル部分のスタイル定義 list_title:
幅を426px、上下のパディングを0、左右のマージンを10pxに設定します。
列名の h3 要素は左に移動し、幅は 300 ピクセルです。
スパン要素を幅 60 ピクセルで右にフローティングに設定し、テキストを右揃えにしてリンクを設定します。


画像レイヤー list_pic のスタイル定義:
まず、ul リストを使用して幅を 433px に設定します。
注意が必要なのは、padding:15px 0 0 15px; の設定です。
(右内側のマージンが 0 に設定されている理由は、ページのパフォーマンスを向上させる li の間隔の問題のためです。padding: 15px 15px 0 15px; コントラスト効果に設定することもできます。)
li は、画像ブロックのサイズを 94px に設定し、間隔マージンを 0 14px 0 0 に設定します。
マウスをホバーすると、画像の境界線の色が青から灰色に変わります。

リンクテキストのスタイルを設定します。
スパンをブロック要素に変換します。スパン内のリンクもブロック要素に変換され、幅と高さがそれぞれ 94 ピクセルと 20 ピクセルに設定され、テキストが水平方向と中央揃えに設定されます。


テキストレイヤー list_text のスタイル定義:
ul+li を使用してニュース リストを定義します。期間は右側にフローティングされ、テキストは右側の青い点線で上枠に書き込まれ、上マージンは 10 ピクセルに設定されます。


最後に、float をクリアします: .clear{ clear:both;}