DivCSS布局例項 用dl dt dd來製作列表

2021-08-29 15:06:39 字數 962 閱讀 8091

今天有人發郵件問的乙個問題,最開始的想法是用ul列表來實現;但是這樣用出現兩個比較麻煩的地方:

1、如果用ul還布局,右邊一欄比較麻煩;

2、文字外邊的邊框自適應比較麻煩;

3、很可能要定死高度;

所以,細細地看一看這個布局,想一想還是用dl.dt.dd作是合理的:

1、布局合理一些;

2、將來擴充套件很方便;

3、css一定很少;

試著寫了寫,看一看還行!在可控範圍內!

布局布分當然不用說了:

[www.52css.com]

·部落格裡的文章是我自己寫的!

·部落格裡的文章是我自己寫的!

·部落格裡的文章是我自己寫的!

...........

css部分:

[www.52css.com]

* body

dldt,dd

ddh1

看一下效果:

[www.52css.com]

·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***·我是女生!部落格裡的文章是我自己寫的!

***

[ 可先修改部分** 再執行檢視效果 ]

用Class組合實現Div CSS布局

現在編寫xhtml,我們強烈不推薦此種方法,應該是id,class綜合應用。此文章只是講述一種思維,並非建站過程中的方法!用標準件的方式來組裝網頁div布局。我把class分為2種 布局class 風格class。布局class是骨架,風格class是衣服。舉個例子 比如布局中的左欄。首先它的屬性有...

DIV CSS布局基本流程及例項介紹

都說用div css布局來設計 便於優化,容易被收錄,那麼你對div css布局的用法是否了解?css布局是網頁html通過div標籤 css樣式表 開發製作的 html 網頁的統稱。div css布局是現在非常流行的布局方法,替代了原來的 布局。下面我們先來看下學習div css布局的基本步驟 一...

div css布局漫談

1.css布局常用的方法 float none left right 取值 none 預設值。物件不飄浮 left 文字流向物件的右邊 right 文字流向物件的左邊 它是怎樣工作的,看個一行兩列的例子 xhtml 這裡是第一列 這裡是第二列 css wrap column1 column2 cle...