? ? ? ?本篇文章主要介紹了Dreamweaver制作網(wǎng)頁(yè)時(shí)我們?cè)撊绾稳ザx主體div,希望小編整理的相關(guān)知識(shí)和資料都對(duì)你們有所幫助。
? ? ? ?1、之前我們做過(guò)了關(guān)于頭部標(biāo)題欄以及l(fā)ogo部分的div切分,不知道大家還記不記得。今天我們要做一些關(guān)于網(wǎng)站主體部分的劃分,希望大家緊跟著之前的思路哦。首先我們還是打開(kāi)dw。

? ? ? ?2、自然,要定義body部分,就要用到body的代碼。我們?cè)赽ody之間輸入兩個(gè)關(guān)于div的代碼。

? ? ? ?3、因?yàn)槲覀儨?zhǔn)備將body部分劃分為2欄,也就說(shuō),我們應(yīng)該定義不同的body,起名一個(gè)l一個(gè)r,定義代碼如下:
? ? ? ? ? ?
?
? ? ? ? ? ?
?

? ? ? ?4、完畢后,我們來(lái)定義它們的樣式。來(lái)到css文件,css文件主要是定義樣式的,當(dāng)然,因?yàn)槲覀兌x的是id,所以這里要用#開(kāi)始。
? ? ? ?即:
? ? ? ?#body_l{}
? ? ? ?#body_r{}
? ? ? ?大括號(hào)中即是我們需要定義的屬性了。

? ? ? ?5、定義完成樣式的屬性,代碼如下:
? ? ? ?#body_l{width:220px;height:500px;background-color:#FFC}
? ? ? ?#body_r{width:220px;height:500px;background-color:#FFC}
? ? ? ?先看下效果:

? ? ? ?6、雖然我們定義的是左右,但是發(fā)覺(jué)右側(cè)的div跑到下方去了,其實(shí)我們忘記了一個(gè)命令,就是float。我們加上邊距margin,然后插入float命令,再看。

? ? ? ?7、可以看到,雖然并排排列了,但是兩個(gè)div黏在一起,也分辨不出所以然,所以我們加入這樣的語(yǔ)句:
? ? ? ?margin-left:20px
? ? ? ?讓它距離左側(cè)20像素,然后預(yù)覽。

? ? ? ?8、剛剛好,我們分完了這些div,下節(jié)我們說(shuō)一下div的再詳細(xì)劃分。
? ? ? ?以上就是Dreamweaver制作網(wǎng)頁(yè)時(shí)我們?cè)撊绾稳ザx主體div的介紹,希望小編整理的相關(guān)知識(shí)和資料都對(duì)你們有所幫助,更多內(nèi)容請(qǐng)繼續(xù)關(guān)注錯(cuò)新技術(shù)頻道網(wǎng)站!
新聞熱點(diǎn)
疑難解答
圖片精選