1首先打開(kāi)sublime_text軟件，在其中新建一個(gè)html文件，然后寫(xiě)入最簡(jiǎn)單的網(wǎng)頁(yè)格式代碼2然后新建一個(gè)高200px，寬200px，顏色為藍(lán)色的div盒子3接著在代碼中加入backgroundimage，然后引入一張圖片，url里面的是圖片的相對(duì)路徑地址，相對(duì)的是html文件所在目錄4最后打開(kāi)瀏覽器，就可以看到插入好；CSS部分1 2 3 4 5 6 7 div width200pxheight200px*設(shè)置的大小* border1px solid green*邊框* textaligncenter*文字水平居中對(duì)齊* lineheight200px*設(shè)置文字行距等于的高度* overflowhidden 設(shè)置完這些樣式后，內(nèi)的文字就能實(shí)現(xiàn)水平和垂直居中的效果。

答案優(yōu)點(diǎn)1CSS的極大優(yōu)勢(shì)表現(xiàn)在簡(jiǎn)潔的代碼，對(duì)于一個(gè)大型網(wǎng)站來(lái)說(shuō)，可以節(jié)省大量帶寬，而且眾所周知，搜索引擎喜歡清潔的代碼其真正意義在于，增加了有效關(guān)鍵詞占網(wǎng)頁(yè)總代碼的比重，因此使用CSS＋DIV的web標(biāo)準(zhǔn)制作的網(wǎng)站具有搜索引擎友好的一定優(yōu)勢(shì)2CSS+DIV制作的網(wǎng)站使得網(wǎng)站改版相對(duì)簡(jiǎn)單。

ltstyle type=quottextcssquot lt！d hihi；一選擇“div標(biāo)簽”命令 打開(kāi)dreamweaver，新建網(wǎng)頁(yè)并保存為“diehtml”，選擇插入布局對(duì)象div標(biāo)簽命令，打開(kāi)“div標(biāo)簽”對(duì)話框二輸入div標(biāo)簽名稱(chēng) 1在“ID”列表框中選擇“top”2單擊“新建css規(guī)則”按鈕準(zhǔn)備進(jìn)行css規(guī)則定義 三新建css規(guī)則 在打開(kāi)的對(duì)話框中保持默認(rèn)設(shè)置，單擊“。

單獨(dú)提下瀏覽器兼容的話題DIV+CSS相比TABLE布局，更容易出現(xiàn)多種瀏覽器不兼容的問(wèn)題，主要原因是不同的瀏覽器對(duì)web標(biāo)準(zhǔn)默認(rèn)值不同國(guó)內(nèi)主流是ie，firefox及chrome用的較少，在兼容性測(cè)試方面，首先需要保證在ie多版本不出現(xiàn)問(wèn)題，這里設(shè)計(jì)到一些方法和技巧，可以針對(duì)具體問(wèn)題在網(wǎng)站查找解決辦法總結(jié)；html textaligncenter body width960px margin0 auto textalignleft 使用方法不需要加任何多余容器，放置到CSS文件的第一行即可可以兼容IE55以上的IE 及 其他瀏覽器代碼解釋width960px 這是目前主流網(wǎng)頁(yè)的寬度，當(dāng)然你也可以改成你自己感覺(jué)合適的，但是此寬度必須有。

ltstyle type=quottextcssquot margin 0padding 0 bodywidth1012px div width 300pxheight 300pxborder 2px solid #333bordersizingborderbox*將邊框設(shè)置為內(nèi)邊框 這樣就不影響元素的寬度和高度，這樣正好右列二到頁(yè)面左邊距正好是700px ，沒(méi)有這個(gè)屬性的話是708px* f；把完整的div css 代碼拷貝到ltbodyltbody中間就可以，如果有樣式用的是外定義，那么在ltheadlthead中添加ltstyleltstyle在定義的內(nèi)容放到ltstyle標(biāo)簽中，就可以了。

具體代碼左浮動(dòng) floatleft右浮動(dòng) floatright三定位布局 1靜態(tài)定位 positionstatic默認(rèn)值，不寫(xiě)position相當(dāng)于寫(xiě)上positionstatic以前沒(méi)學(xué)定位的時(shí)候其實(shí)都是靜態(tài)定位，元素在它原本的位置顯示，即使加了topleft等也不起作用2相對(duì)定位 相對(duì)定位是相對(duì)于自身的原始位置進(jìn)行平移，如果；只要對(duì)相應(yīng)的代碼做一些簡(jiǎn)單的修改，就可以改變同一頁(yè)面的不同部分，或者所有頁(yè)數(shù)的網(wǎng)頁(yè)的外觀和格式Div+CSS標(biāo)準(zhǔn)具有以下優(yōu)點(diǎn)1因?yàn)椴捎肅SS布局，不象表格布局充滿各種各樣的屬性和數(shù)字，而且很多css文件通常是共用的，從而大大縮減頁(yè)面代碼，提高頁(yè)面瀏覽速度2結(jié)構(gòu)清晰，對(duì)搜索引擎更加友好更容易被。

為了使文字在中水平和垂直居中，可以使用CSS樣式首先需要設(shè)置文字的水平居中，可以使用quottextaligncenterquot接著，要實(shí)現(xiàn)垂直居中，需要設(shè)置行高與的高度一致，使用quotlineheight20pxquot進(jìn)行設(shè)置具體實(shí)現(xiàn)代碼如下HTML部分1 ltdiv水平垂直居中l(wèi)tdiv CSS部分1 2 3 4 5 6 7。

ltdiv ltbody lthtml 復(fù)制下來(lái)看看DIV+CSS布局要至少節(jié)省50%的代碼，只是用來(lái)表現(xiàn)內(nèi)容，至于形式，完全通過(guò)css控制，20063574asp上有一篇極經(jīng)典的教程，你可以看一下參考資料lta href=quot20063574aspquot target=；三CSS 定義CSS是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言 作用通過(guò)CSS，可以控制網(wǎng)頁(yè)的布局顏色字體等樣式四div標(biāo)簽結(jié)構(gòu) DIV標(biāo)簽通常與CSS結(jié)合使用，通過(guò)CSS為DIV標(biāo)簽內(nèi)的內(nèi)容設(shè)置樣式 DIV標(biāo)簽可以嵌套使用，形成復(fù)雜的網(wǎng)頁(yè)布局五CSS的兩種寫(xiě)法 內(nèi)部樣式表將CSS代碼寫(xiě)在HTML。

1第一步，創(chuàng)建或打開(kāi)Web項(xiàng)目，新建html文件以及CSS文件，見(jiàn)下圖，轉(zhuǎn)到下面的步驟2第二步，執(zhí)行完上面的操作之后，圖中顯示了HTML頁(yè)面代碼，定義div并給出id屬性等級(jí)，見(jiàn)下圖，轉(zhuǎn)到下面的步驟3第三步，執(zhí)行完上面的操作之后，將“height”值設(shè)置為零，使用“padding”屬性的“top”或“bottom；1首先創(chuàng)建或者打開(kāi)我們的web項(xiàng)目，新建一個(gè)html文件和css文件即可，如圖所示2html頁(yè)面代碼如圖所示，定義一個(gè)div，然后給一個(gè)id屬性即可3這里是使用寬度的百分比之后，設(shè)置高度值為零，然后使用padding屬性的top或者bottom的值可以是任意百分比，背景顏色作為測(cè)試4然后在瀏覽器運(yùn)行之后的效。