div+css(ul li)は画像の上に文字列のリストレイアウトを実現します

CSSスタイルシートコード:

htmlレイアウトコード:

レンダリング:

HTML レイアウト部分では、必要に応じて対応する div を追加できます。

1. CSSのキースタイルワードの説明

1), ul.imglist{ margin:0 auto; width:536px; overflow:hidden}
ul 構造体レイアウトを中央に配置するには、overflow:hidden を使用します。 ul は Float を生成するため、clear の子を使用し、親が開けないという問題を引き起こすために float を使用します。幅を 536 ピクセルに固定すると、子 li は 3 つの効果のみを正確に並べることができます。
2)、ul.imglist li{ float:left;padding:4px 8px; width:160px}
float:left、li と li ボックス間の間隔を設定します。 width :160px li幅を設定して固定する必要があります(幅の値はpsソフトウェアのスライスツールを通じて測定されます)

3)、ul.imglist li img{ display:block; width:160px; height:90px}
display:block は画像の高さと幅を固定する必要があります。

4)、ul.imglist li span{display:block; width:100%; height:30px; background:#F6F6F6}

display:block は、span を有効にします。 1 行を占有します;

width:100%; height:30px; 幅と高さを 100% に設定すると、親 li の幅が継承され、100% に設定することの利点が得られます。 width は、親の幅を使用して 100% の幅が自動的に計算されます。幅を一定に保ちます);
line-height:30px; テキストを 30px で中央揃えに設定します。
2. HTML の重要なポイント

ul li 結合リスト タグ レイアウトを使用します。各 li ボックスには画像とテキストのコンテンツを直接ハイパーリンク タグで囲みます。 label と img は 2 つのボックスを形成し、CSS は機能効果の排他的な行を占めるスタイル (display:block) を設定して、テキストと画像がトップダウン構造ではなく 1 行に並ぶのを防ぎます。