CSS *基本信息* body font12px Tahomabackground#CCCCCC*適用于頁(yè)面整體字體及字體大小，頁(yè)面頁(yè)邊距全部設(shè)置為0，文字對(duì)齊方式為居中，背景顏色* margin0padding0border0*全局設(shè)定，外邊距。

這個(gè)XHTML1標(biāo)準(zhǔn)的DIV+CSS布局是著名網(wǎng)頁(yè)設(shè)計(jì)師2004年發(fā)布在網(wǎng)頁(yè)設(shè)計(jì)師上的，一個(gè)非常經(jīng)典的布局，在IEMozilla和Opera瀏覽器中均可以實(shí)現(xiàn)居中和高度自適應(yīng)完整代碼如下在原代碼的基礎(chǔ)上作了一定規(guī)范整理lthtml。

四個(gè)框設(shè)置寬高，floatleft border1px solid #cccborderright最后一個(gè)框就不用加borderright了 框里面藍(lán)色的位置可以是div imgfloatleft pfloatright 設(shè)置一個(gè)clearboth 下面的可以是一。

在瀏覽器上是粉色的，表示已經(jīng)受到css樣式表的控制了4 下面我們進(jìn)行布局一般網(wǎng)頁(yè)都是3層一級(jí)，所以我們需要div布局了在body里面寫一般我會(huì)先分為3層 lthtml lthead lttitlelttitle ltlink href=quotmaincssquot type=quot。

tablecell也可以理解為inlineblock水平水平，其身上的verticalalign屬性才會(huì)起作用3 DIV+CSS布局中自適應(yīng)高度的解決方法要從固定的基于像素的設(shè)計(jì)方法轉(zhuǎn)到彈性的相對(duì)的設(shè)計(jì)方法并不容易。

lt！doctype htmllthtml lang=quotenquotltheadltmeta charset=quotUTF8quotlttitleDemolttitleltstyle*margin0border0padding0xstagemarginautowidth800pxxboxopacity07fontsize0position。

在前端代碼中，通常使用div+css來(lái)布局用戶頁(yè)面通過(guò)這種組合方式，可以將網(wǎng)頁(yè)的內(nèi)容與樣式分離，提高了前端開(kāi)發(fā)的速度下面就來(lái)使用div+css來(lái)實(shí)現(xiàn)兩種導(dǎo)航欄的編寫吧1導(dǎo)航欄一ltdiv id=#39menu#39 lta href=quot#quot鏈接。

簡(jiǎn)單謝了一個(gè)，主要涉及一個(gè)浮動(dòng)，一個(gè)hover的隱藏，顯示，不是很復(fù)雜，可以自己嘗試寫下，以下代碼僅供參考 lt！DOCTYPE htmllthtml lthead ltstyle divmenubar margin0 auto width 1024px。

一選擇“div標(biāo)簽”命令 打開(kāi)dreamweaver，新建網(wǎng)頁(yè)并保存為“diehtml”，選擇插入布局對(duì)象div標(biāo)簽命令，打開(kāi)“div標(biāo)簽”對(duì)話框二輸入div標(biāo)簽名稱 1在“ID”列表框中選擇“top”2單擊“新建css規(guī)則”。