DIV+CSS在網頁布局制作中的應用發(fā)布者：本站 時間：2020-05-02 14:05:33
布局對網頁的作用類似于設計圖對地產開發(fā)商的作用,制作商務網頁的首要內容是對網頁進行布局。常見的布局方式有:表格布局、框架布局、層布局,鑒于以上布局方式均存在一定的缺陷逐漸退出歷史潮流。目前流行的布局方式是DIV+CSS來制作頁面,DIV主要解決網頁中的元素(如文字、圖片、表格、音視頻等)放置在網頁顯示位置的問題,而CSS主要解決網頁元素美觀性的問題。本文主要探討DIV+CSS布局方式用法及要注意的問題。
一個商務網頁是否吸引用戶，布局至關重要。所謂布局就是對網頁元素進行定位，網頁整體結構是上中下還是左中右，網頁的LOGO、導航、網頁標題、網頁核心內容、版權信息等內容顯示的位置。鑒于表格布局導致表格標簽的嵌套瀏覽器解析較慢，框架布局不夠靈活，DIV+CSS布局方式逐漸成為主流，DIV實現(xiàn)把頁面進行切割，不同的DIV放置不同的內容，CSS實現(xiàn)對內容進行美化，如添加背景色、設置不同塊之間的間距等等。
標準布局不能完全滿足網頁設計的需求，有時設計需要把兩個或者多個DIV在一行顯示，此時需用到浮動布局，浮動布局的主要作用是打破標準流布局的自上而下、自左向右的布局方式，使得塊元素不獨占一行。此時可有多種方式實現(xiàn)效果。
方法一:left、rihgt同時左浮動或者右浮動，#left#right{float:left;};方法二:left左浮動、right右浮動，即#left{float:left;}，#right{flaot:right};方法三:left設置寬度和左浮動，right設置左外邊距值，即#left{width:200px;float:left;}，#right{margin-left:200px;};方法四:類似與方法三，right設置右浮動，left設置右外邊距。設置浮動后會給right后面的元素產生影響，為了清除這種影響通常做法是在right后添加一個空白div1，并設置改空白div的樣式#div1{clear:both;}。
2.3 定位布局
定位布局分為相對定位和絕對定位，主要是通過元素的position、z-index、overflow、clip屬性來實現(xiàn)，相對定位通過設置水平位置和垂直位置來實現(xiàn)，其在標準流中的位置仍然存在。絕對定位的使用其祖先元素必須設置定位屬性，在絕對定位中，標準流中其他元素的布局對絕對定位的元素不影響，所以會導致絕對定位的元素覆蓋其他元素，這時就通過設置z-index屬性來控制元素的層級順序實現(xiàn)想要的效果。在實際應用中相對定位很少單獨使用，相對定位一般作為祖先元素的定位，從而輔助設置其子孫元素的絕對定位。
選擇我們，優(yōu)質服務，不容錯過
1. 優(yōu)秀的網絡資源，強大的網站優(yōu)化技術，穩(wěn)定的網站和速度保證
2. 15年上海網站建設經驗，優(yōu)秀的技術和設計水平，更放心
3. 全程省心服務，不必擔心自己不懂網絡，更省心。
------------------------------------------------------------
24小時聯(lián)系電話：021-58370032
