DIV+CSS在網(wǎng)頁(yè)布局制作中的應(yīng)用發(fā)布者：本站時(shí)間：2020-05-02 14:05:33

布局對(duì)網(wǎng)頁(yè)的作用類(lèi)似于設(shè)計(jì)圖對(duì)地產(chǎn)開(kāi)發(fā)商的作用,制作商務(wù)網(wǎng)頁(yè)的首要內(nèi)容是對(duì)網(wǎng)頁(yè)進(jìn)行布局。常見(jiàn)的布局方式有:表格布局、框架布局、層布局,鑒于以上布局方式均存在一定的缺陷逐漸退出歷史潮流。目前流行的布局方式是DIV+CSS來(lái)制作頁(yè)面,DIV主要解決網(wǎng)頁(yè)中的元素(如文字、圖片、表格、音視頻等)放置在網(wǎng)頁(yè)顯示位置的問(wèn)題,而CSS主要解決網(wǎng)頁(yè)元素美觀性的問(wèn)題。本文主要探討DIV+CSS布局方式用法及要注意的問(wèn)題。

一個(gè)商務(wù)網(wǎng)頁(yè)是否吸引用戶(hù)，布局至關(guān)重要。所謂布局就是對(duì)網(wǎng)頁(yè)元素進(jìn)行定位，網(wǎng)頁(yè)整體結(jié)構(gòu)是上中下還是左中右，網(wǎng)頁(yè)的LOGO、導(dǎo)航、網(wǎng)頁(yè)標(biāo)題、網(wǎng)頁(yè)核心內(nèi)容、版權(quán)信息等內(nèi)容顯示的位置。鑒于表格布局導(dǎo)致表格標(biāo)簽的嵌套瀏覽器解析較慢，框架布局不夠靈活，DIV+CSS布局方式逐漸成為主流，DIV實(shí)現(xiàn)把頁(yè)面進(jìn)行切割，不同的DIV放置不同的內(nèi)容，CSS實(shí)現(xiàn)對(duì)內(nèi)容進(jìn)行美化，如添加背景色、設(shè)置不同塊之間的間距等等。

標(biāo)準(zhǔn)布局不能完全滿(mǎn)足網(wǎng)頁(yè)設(shè)計(jì)的需求，有時(shí)設(shè)計(jì)需要把兩個(gè)或者多個(gè)DIV在一行顯示，此時(shí)需用到浮動(dòng)布局，浮動(dòng)布局的主要作用是打破標(biāo)準(zhǔn)流布局的自上而下、自左向右的布局方式，使得塊元素不獨(dú)占一行。此時(shí)可有多種方式實(shí)現(xiàn)效果。

方法一:left、rihgt同時(shí)左浮動(dòng)或者右浮動(dòng)，#left#right{float:left;};方法二:left左浮動(dòng)、right右浮動(dòng)，即#left{float:left;}，#right{flaot:right};方法三:left設(shè)置寬度和左浮動(dòng)，right設(shè)置左外邊距值，即#left{width:200px;float:left;}，#right{margin-left:200px;};方法四:類(lèi)似與方法三，right設(shè)置右浮動(dòng)，left設(shè)置右外邊距。設(shè)置浮動(dòng)后會(huì)給right后面的元素產(chǎn)生影響，為了清除這種影響通常做法是在right后添加一個(gè)空白div1，并設(shè)置改空白div的樣式#div1{clear:both;}。

2.3 定位布局

定位布局分為相對(duì)定位和絕對(duì)定位，主要是通過(guò)元素的position、z-index、overflow、clip屬性來(lái)實(shí)現(xiàn)，相對(duì)定位通過(guò)設(shè)置水平位置和垂直位置來(lái)實(shí)現(xiàn)，其在標(biāo)準(zhǔn)流中的位置仍然存在。絕對(duì)定位的使用其祖先元素必須設(shè)置定位屬性，在絕對(duì)定位中，標(biāo)準(zhǔn)流中其他元素的布局對(duì)絕對(duì)定位的元素不影響，所以會(huì)導(dǎo)致絕對(duì)定位的元素覆蓋其他元素，這時(shí)就通過(guò)設(shè)置z-index屬性來(lái)控制元素的層級(jí)順序?qū)崿F(xiàn)想要的效果。在實(shí)際應(yīng)用中相對(duì)定位很少單獨(dú)使用，相對(duì)定位一般作為祖先元素的定位，從而輔助設(shè)置其子孫元素的絕對(duì)定位。

選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話：021-58370032

上一篇：網(wǎng)頁(yè)設(shè)計(jì)與制作論文下一篇：網(wǎng)站設(shè)計(jì)關(guān)鍵要素與制作方法

DIV+CSS在網(wǎng)頁(yè)布局制作中的應(yīng)用發(fā)布者：本站 時(shí)間：2020-05-02 14:05:33

DIV+CSS在網(wǎng)頁(yè)布局制作中的應(yīng)用發(fā)布者：本站時(shí)間：2020-05-02 14:05:33