div+css(ul li)は画像の上に文字列のリストレイアウトを実現します
Sep 21, 2016 pm 01:56 PMCSSスタイルシートコード:
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}
width:100%; height:30px; 幅と高さを 100% に設定すると、親 li の幅が継承され、100% に設定することの利点が得られます。 width は、親の幅を使用して 100% の幅が自動的に計算されます。幅を一定に保ちます);
line-height:30px; テキストを 30px で中央揃えに設定します。
2. HTML の重要なポイント

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?

HTML5< meter>を使用するにはどうすればよいですか 範囲内に数値データを表示する要素?

ナビゲーションとSEOにHTMLリンクを効果的に使用するにはどうすればよいですか?
