css+div網頁設計（二）--布局與定位，cssdiv
在網頁設計中，能否控制好各個模組中在頁面中的位置是非常關鍵的，與傳統的表格定位不同，css+div定位方式更加的靈活，本篇部落格將為大家介紹css+div的布局與定位。
由圖可以看出 盒子模型的範圍包括 margin、border、padding、content。
需要指出的一點是，在ie中與firefox中盒子模型表示略有不同：
IE 盒子模型的 content 部分包含了 border 和 pading。
而firefox中的盒子模型的content部分不包含border和padding。
float為浮動的意思，在css布局中有很重要的作用，這裡舉一個例子。
<span style="font-size:18px;"><html><head><title>float屬性 clear</title><style type="text/css"><!--body{margin:5px;font-family:Arial;font-size:13px;}.block1{padding-left:10px;margin-right:10px;float:left;/* 塊1向左浮動 */}h3{background-color:#a5d1ff;/* 標題的背景色 */border:1px dotted #222222;/* 標題邊框 */ clear:left;/*清除float對左側的影響 */}--></style> </head><body><div class="block1"><img src="building2.jpg" border="0"></div><div>對於一個網頁設計者來說，HTML語言一定不會感到陌生，因為它是所有網頁製作的基礎。但是如果希望網頁能夠美觀、大方，並且升級方便，維護輕鬆，那麼僅僅HTML是不夠的，CSS在這中間扮演著重要的角色。本章從CSS的基本概念出發，介紹CSS語言的特點，以及如何在網頁中引入CSS，並對CSS進行初步的體驗。</div><h3>CSS的概念</h3><div>CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用於控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。</div></body></html></span>
如果將float:left注釋掉結果如下：
<span style="font-size:18px;">#div-1 { position:static;}</span>
<span style="font-size:18px;">#div-1 { position:relative; top:20px; left:40px;}</span>
c、position:absolute|絕對位置
使用絕對位置的層前面的或者後面的層會認為這個層並不存在，絲毫不影響到他們。
z-index屬性用於定位重疊時的上下位置。
<span style="font-size:18px;"><html><head><title>z-index屬性</title><style type="text/css"><!--body{margin:10px;font-family:Arial;font-size:13px;}#block1{background-color:#fff0ac;border:1px dashed #000000;padding:10px;position:absolute;left:20px;top:30px;z-index:1;/* 高低值1 */}#block2{background-color:#ffc24c;border:1px dashed #000000;padding:10px;position:absolute;left:40px;top:50px;z-index:0;/* 高低值0 */}#block3{background-color:#c7ff9d;border:1px dashed #000000;padding:10px;position:absolute;left:60px;top:70px;z-index:-1;/* 高低值-1 */}--></style> </head><body><div id="block1">AAAAAAAA</div><div id="block2">BBBBBBBB</div><div id="block3">CCCCCCCC</div></body></html></span>
以上為css+div的布局與定位，下篇部落格我將為大家介紹，css與javascript，css與jquery，css與ajax的混合運用。
對於定位沒有特殊情況一般都不用，盡量減少頁面的標籤！
相對定位要父容器設定absolute才有效，從字面意思就知道什麼時候使用， left這些使用看你的定位是哪個位置， 比如你有一個彈窗是在右下角，那麼就用right 和bottom！
網頁製作div+css實驗報告
DIV+CSS是網站標準（或稱“WEB標準”）中常用術語之一，通常為了說明與HTML網頁設計語言中的表格（table）定位方式的區別，因為XHTML網站設計標準中，不再使用表格定位技術，而是採用DIV+CSS的方式實現各種定位。SEO是指搜尋引擎最佳化，主要就是通過對網站的結構、標籤、排版,關鍵字等各方面的最佳化，使搜尋引擎更容易抓取網站的內容，並且讓網站的各個網頁在等搜尋引擎中獲得較高的評分，從而獲得較好的排名。DIV+CSS網頁布局對SEO有很重要的影響。具體來看到底有什麼好處呢?
DIV+CSS的網頁布局對SEO的好處一、不存在表格的嵌套問題
很多“網站如何推廣”的文章中稱，搜尋引擎一般不抓取三層以上的表格嵌套，這一點一直沒有得到搜尋引擎相關的官方證實。我的幾項實驗結果沒有完全出來，但根據目前掌握的情況來看，Spider爬行Table布局的頁面，遇到多層表格嵌套時，會跳過嵌套的內容或直接放棄整個頁面。
使用Table布局，為了達到一定的視覺效果，不得不套用多個表格。如果嵌套的表格中是核心內容，蜘蛛(Spider)爬行時跳過了這一段沒有抓取到頁面的核心，這個頁面就成了相似頁面。網站中過多的相似頁面會影響排名及網域名稱信任度。
DIV+CSS的網頁布局對SEO的好處二、精簡的代碼
使用DIVCSS布局，頁面代碼精簡，這一點相信對XHTML有所瞭解的都知道。觀看更多的HTML教程內容。
代碼精簡所帶來的直接好處有兩點：一是提高蜘蛛(Spider)爬行效率，能在最短的時間內爬完整個頁面，這樣對收錄品質有一定好處;二是由於能高效的爬行，就會受到蜘蛛(Spider)歡迎，這樣對收錄數量有很大好處。
而DIV+CSS布局基本上不會存在這樣的問題，從技術角度來說，XHTML在控制樣式時也不需要過多的嵌套。
這雖然沒有得到確認，但還是建議使用Table布局的朋友們，在設計時儘可能的不要使用多層表格嵌套，SEOer(seo工作者們)們在文章中說明了這一點，相信他們也不是沒有依據。
DIV+CSS的網頁布局對SEO的好處三、對搜尋引擎的排名
基於XTHML標準的DIV+CSS布局，一般在設計完成後會儘可能的完善到能通過W3C驗證。截止目前沒有搜尋引擎表示排名規則會傾向於符合W3C標準的網站或頁面，但事實證明使用XTHML架構的網站排名狀況一般都不錯。
DIV+CSS的網頁布局對SEO的好處四、提高網頁的訪問速度
DIV+CSS布局較Table布局減少了頁面代碼，載入速度得到很大的提高，這在蜘蛛(Spider)爬行時是非常有利的。過多的頁面代碼可能造成爬行逾時，蜘蛛(Spider)就會認為這個頁面無法訪問，影響收錄及權重。
真正的SEOer(seo工作者們)不只是為了追求收錄、排名，快速的響應速度是提高使用者體驗度的基礎，這對整個搜尋引擎最佳化及營銷都是非常有利的。
換一個角度拋開DIV+CSS對SEO的有利影響.單獨來講這種div+css布局也是很有益的,可以說是實下是最流行的網頁布局方式.可是加快我們網站的速度,便於管理與修改.當然div+css布局也有不完善的方面,比如說,他的css樣式表與各種瀏覽器之間的不相容問題.當然如果你是div+css高手的話相信這個不難吧!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
