ホームページ  >  記事  >  ウェブフロントエンド  >  Div+CSS レイアウトの例: dl dt dd を使用して list_html/css_WEB-ITnose を作成します

Div+CSS レイアウトの例: dl dt dd を使用して list_html/css_WEB-ITnose を作成します

WBOY
WBOYオリジナル
2016-06-24 12:30:161177ブラウズ

DIV+CSS を使用してリストを作成する場合、最も一般的に使用されるのは ul と li ですが、この方法で使用する場合、次の 2 つの面倒な場所があります:

1. レイアウトに UL を使用する場合、右側の列がさらに面倒です。 ;
2. テキストの外側の境界線を調整するのは面倒です
3. 高さを設定する必要がある可能性があります

それでは、このレイアウトをよく見て、それを使用するのが合理的です。 DL.DT.DD. :

1. レイアウトが合理的になる
2. 将来拡張しやすくなる



それを書いてみてください。そして見てください、大丈夫です!制御範囲内です!

レイアウトの配布は言うまでもありません

ソースコードは以下の通りです


DL,DT,DDを使ってリストを作成します

Title

div>
タグ:
·ブログ内の記事は私が書いています。
・ブログの記事は私が書いています! ・ブログの記事は私が書いています!

著者: Zhang San

partsss




*{マージン:0;} : 両方; margin-bottom:5px; float:left;}
dt{padding:2px 5px;float:left; border:1px ソリッド #3366FF}
dd{position:absolute;}
h1{クリア:両方;font-size:14px;}





声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。