杭州大數(shù)據(jù)培訓(xùn)之DIV+CSS網(wǎng)頁(yè)布局細(xì)節(jié)

時(shí)間：2023-10-15 08:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-15 08:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

杭州大數(shù)據(jù)培訓(xùn)之DIV+CSS網(wǎng)頁(yè)布局細(xì)節(jié)：

div+css排版是最新的網(wǎng)頁(yè)排版理念，完全有別舊的排版方式（比如說(shuō)table排版）。首先在頁(yè)面整體上進(jìn)行div標(biāo)簽劃分內(nèi)容區(qū)域，然后再用css進(jìn)行定位，最后再對(duì)相應(yīng)的區(qū)域添加內(nèi)容。

一、選擇“div標(biāo)簽”命令

打開dreamweaver，新建網(wǎng)頁(yè)并保存為“die.html”，選擇【插入】【布局對(duì)象】【div標(biāo)簽】命令，打開“div標(biāo)簽”對(duì)話框。

二、新建css規(guī)則

在打開的對(duì)話框中保持默認(rèn)設(shè)置，單擊“確定”按鈕進(jìn)行css規(guī)則新建。

三、輸入div標(biāo)簽名稱

1、在“ID”列表框中選擇“top”

2、單擊“新建css規(guī)則”按鈕準(zhǔn)備進(jìn)行css規(guī)則定義

杭州大數(shù)據(jù)培訓(xùn)四、設(shè)置屬性

1、在“分類”列表框中選擇“方框”選項(xiàng)。

2、在窗口右側(cè)進(jìn)行css規(guī)則定義，其中margin值的設(shè)置非常重要，“l(fā)eft”及“right”為auto，則可讓div頁(yè)面水平居中。

3、單擊“確定”按鈕。

五、查看創(chuàng)建的div

將鼠標(biāo)光標(biāo)定位在div，即可想編輯普通網(wǎng)頁(yè)一樣完成文本的編輯及圖像等內(nèi)容的添加。

六、創(chuàng)建div按鈕

返回“插入div標(biāo)簽”，單對(duì)話框，單擊“確定”按鈕，完成div標(biāo)簽的插入

采用CSS+DIV對(duì)網(wǎng)站重構(gòu)日趨被大家重視起來(lái)了，尤其是大型站點(diǎn)，現(xiàn)在你隨便打開一個(gè)大型門戶網(wǎng)站，看看源文件就可以知道是否為div+css構(gòu)架了，其實(shí)，在之前很多人做網(wǎng)頁(yè)都是使用table表格嵌套，但是隨著web2.0、web3.0的不斷發(fā)展，這種以表格嵌套的方式已經(jīng)被DIV+CSS逐步取代了，未來(lái)網(wǎng)頁(yè)設(shè)計(jì)肯定朝著div+css的方向發(fā)展。

以上是杭州大數(shù)據(jù)培訓(xùn)之DIV+CSS網(wǎng)頁(yè)布局細(xì)節(jié)的解說(shuō)。如果想了解更多詳情，請(qǐng)點(diǎn)擊杭州卡米古大數(shù)據(jù)官網(wǎng)！杭州大數(shù)據(jù)培訓(xùn)學(xué)校、大數(shù)據(jù)開發(fā)培訓(xùn)、數(shù)據(jù)分析與挖掘、零基礎(chǔ)課程正在招生中！