標(biāo)簽,還包括所有能夠承載內(nèi)容的容器標(biāo)簽(如p、li等)。在DIV+CSS布局技術(shù)中,DIV負(fù)責(zé)內(nèi)容區(qū)域的分配,CSS負(fù)責(zé)樣式效果的呈現(xiàn),因此網(wǎng)頁(yè)中的布局,也常被稱作“DIV+CSS”布局。需要注意的是,為了提高網(wǎng)頁(yè)制作的效率,布局時(shí)通常需要遵循一定的布局流程,具體如下。" /> 国产精品欧美一区二区三,乱中年女人伦AV一区二区,久久久免费观成人影院
首頁(yè)技術(shù)文章正文

什么是網(wǎng)頁(yè)布局?DIV+CSS技術(shù)的布局流程是怎樣的?

更新時(shí)間:2020-12-18 來(lái)源:黑馬程序員 瀏覽量:

1577370495235_學(xué)IT就到黑馬程序員.gif

  讀者在閱讀報(bào)紙時(shí)會(huì)發(fā)現(xiàn),雖然報(bào)紙中的內(nèi)容很多,但是經(jīng)過(guò)合理的排版,版面依然清晰、易讀,例如圖1所示的報(bào)紙排版。同樣,在制作網(wǎng)頁(yè)時(shí),也需要對(duì)網(wǎng)頁(yè)進(jìn)行“排版”。網(wǎng)頁(yè)的“排版”主要是通過(guò)布局來(lái)實(shí)現(xiàn)的。在網(wǎng)頁(yè)設(shè)計(jì)中,布局是指對(duì)網(wǎng)頁(yè)中的模塊進(jìn)行合理的排布,使頁(yè)面排列清晰、美觀易讀。

  圖 1 報(bào)紙排版

  網(wǎng)頁(yè)設(shè)計(jì)中布局主要依靠DIV+CSS技術(shù)來(lái)實(shí)現(xiàn)。說(shuō)到DIV大家肯定非常熟悉,但是在本章它不僅指前面我們講到過(guò)的

標(biāo)簽,還包括所有能夠承載內(nèi)容的容器標(biāo)簽(如p、li等)。在DIV+CSS布局技術(shù)中,DIV負(fù)責(zé)內(nèi)容區(qū)域的分配,CSS負(fù)責(zé)樣式效果的呈現(xiàn),因此網(wǎng)頁(yè)中的布局,也常被稱作“DIV+CSS”布局。

  需要注意的是,為了提高網(wǎng)頁(yè)制作的效率,布局時(shí)通常需要遵循一定的布局流程,具體如下。

  1) 確定頁(yè)面的版心寬度

  版心指的是頁(yè)面的有效使用面積,是主要元素以及內(nèi)容所在的區(qū)域,一般在瀏覽器窗口中水平居中顯示。在設(shè)計(jì)網(wǎng)頁(yè)時(shí),頁(yè)面尺寸寬度一般為1200~1920像素。但是為了適配不同分辨率的顯示器,一般設(shè)計(jì)版心寬度為1000~1200像素。例如屏幕分辨率為1024×768像素的瀏覽器,在瀏覽器內(nèi)有效可視區(qū)域?qū)挾葹?000像素,所以最好設(shè)置版心寬度為1000像素。設(shè)計(jì)師在設(shè)計(jì)網(wǎng)站時(shí)盡量適配主流的屏幕分辨率。常見(jiàn)的寬度值為960px、980px、1000 px、1200px等。圖2所示即為某甜點(diǎn)網(wǎng)站頁(yè)面的版心和頁(yè)面寬度。


  圖 2 頁(yè)面尺寸和版心

    2) 分析頁(yè)面中的模塊

  在運(yùn)用CSS布局之前,首先要對(duì)頁(yè)面有一個(gè)整體的規(guī)劃,包括頁(yè)面中有哪些模塊,以及模塊之間關(guān)系(關(guān)系分為并列關(guān)系和包含關(guān)系)。例如,圖3所示為最簡(jiǎn)單的頁(yè)面布局,該頁(yè)面主要由頭部(header)、導(dǎo)航(nav)、焦點(diǎn)圖(banner)、內(nèi)容(content)、頁(yè)面底部(footer)五部分組成。


圖 3 頁(yè)面模塊分析

  3) 控制網(wǎng)頁(yè)的各個(gè)模塊

  當(dāng)分析完頁(yè)面模塊后,就可以運(yùn)用盒子模型的原理,通過(guò)DIV+CSS布局來(lái)控制網(wǎng)頁(yè)的各個(gè)模塊。初學(xué)者在制作網(wǎng)頁(yè)時(shí),一定要養(yǎng)成分析頁(yè)面布局的習(xí)慣,這樣可以提高網(wǎng)頁(yè)制作的效率。


猜你喜歡:

jQuery修改元素樣式的代碼演示

什么是Sass?Sass的優(yōu)勢(shì)有哪些?

變量是什么?JavaScript變量的命名聲明與賦值講解?

黑馬程序員前端培訓(xùn)課程 

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!