DIV+CSS的優勢何在? 1、符合W3C標準。微軟等公司均爲W3C支持者。這一點是最重要的,因爲這保證您的
網站不會因爲將來網絡應用的升級而被淘汰。
2、支持瀏覽器的向後兼容,也就是無論未來的瀏覽器大戰,勝利的是IE7或者是火狐,您的網站都能很好的兼容。
3、搜索引擎更加友好。相對與傳統的table, 採用DIV+CSS技術的網頁,對於搜索引擎的收錄更加友好。
4、樣式的調整更加方便。內容和樣式的分離,使頁面和樣式的調整變得更加方便。 現在YAHOO,MSN等國際
門戶網站,網易,新浪等國內門戶網站,和主流的WEB2.0網站,均採用DIV+CSS的框架模式,更加印證了DIV+CSS是大勢所趨。
5、CSS的極大優勢表現在簡潔的代碼,對於一個
大型網站來說,可以節省大量帶寬,而且衆所周知,搜索引擎喜歡清潔的代碼。
6、表現和結構分離,在團隊開發中更容易分工合作而減少相互關聯性。
CSS放入網頁的幾種方式 行內套用
我們可以在HTML文件內直接宣告樣式。
舉例來說,Thisisfontsize16.
以上的HTML文件在瀏覽器上會顯現爲:Thisisfontsize16.
嵌入套用樣式可以嵌入於HTML文件中(通常是在<head>內)。
舉例來說,<head><styletype="text/css"><styletype="text/css">div{div{background-color:#FF0000;}</style></head><body>背景顏色是紅色</body>
以上的HTML會顯現出:背景顏色是紅色
外部連接套用在這種方式下,所有的CSS樣式宣告都是存在另外一個檔案中。
該檔案通常名稱爲.css。
在HTML文件的<header>..</header>之中,我們將用以下的程式碼將這個.css檔案連接進入:
<linkrel=stylesheettype="text/css" href="external-stylesheet.css">
以上這一行會將在external-stylesheet.css這個檔案內所宣告的樣式加入HTML文件內。
匯入套用匯入套用外部的CSS樣式也可以被匯入進HTML文件。
匯入的做法爲利用@import這個指令。
@import的語法爲:<STYLETYPE="text/css"><STYLETYPE="text/css"><</STYLE>@import">!--@importurl(
http://www.fengxiu88.com/#.mysite.com/style.css);@importurl(</STYLE>
@import指令最初的用意,是爲了能夠針對不同的瀏覽器而運用不同的樣式。不過,現在已經沒有這個必要。現在用@import的目的,最常是要加入多個CSS樣式。當多個CSS樣式被@import的方式加入,而不同CSS樣式互相有衝突時,後被加入的CSS樣式有優先的順位(詳情請見CSS串接)。
div css-其它最常用的佈局標籤
h1 這個標籤或許真正會去用的人很少,因爲它顯示的字體真的是太"大"了,但我們是CSSer,有什麼標籤樣式不能改呢?而且它所能表達的意思就如同它原先的作用一樣明顯(大標題)我想你已經知道怎麼去用它了 ^_^ . ul 這個標籤很多情況是用來定義導航部分的,當然也可以用ol來代替,但導航連接沒有什麼順序之分吧,所以還是用ul來的比較確切(去掉CSS後效果更明顯) .
b 這個已經不再推薦使用的標籤,在佈局上卻能帶來不少的方便(因爲短),雖然我不是太贊成使用這個標籤,但有些時候(比如細小地方的佈局定義)還是不錯的選擇
h2 h2使用最多的地方應該不是佈局上,而是副標題,但有些地方需要定義欄目樣式的話,用這個標籤比較合適,欄目內容就使用p。
CSS+DIV網站設計的問題 儘管DIV+CSS具有一定的優勢,不過現階段CSS+DIV
網站建設存在的問題也比較明顯,主要表現在:
第一,對於CSS的高度依賴使得
網頁設計變得比較複雜。相對於HTML4.0中的表格佈局(table),CSS+DIV儘管不是高不可及,但至少要比表格定位複雜的多,即使對於
網站設計高手也很容易出現問題,更不要說初學者了,這在一定程度上影響了XHTML網站設計語言的普及應用。
第二,CSS文件異常將影響整個網站的正常瀏覽。CSS網站製作的設計元素通常放在幾個l外部文件中,這一個或幾個文件有可能相當複雜,甚至比較龐大,如果CSS文件調用出現異常,那麼整個網站將變得慘不忍睹。
第三,對於CSS網站設計的瀏覽器兼容性問題比較突出。基於HTML4.0的網頁設計在IE4.0之後的版本中幾乎不存在瀏覽器兼容性問題,但CSS+DIV設計的網站在IE瀏覽器裏面正常顯示的頁面,到火狐瀏覽器(FireFox )中卻可能面目全非(這也是爲什麼建議網絡營銷人員使用火狐瀏覽器的原因所在 )。CSS+DIV還有待於各個瀏覽器廠商的進一步支持。
第四,CSS+DIV對搜索引擎優化與否取決於網頁設計的專業水平而不是CSS+DIV本身。CSS+DIV
網頁設計並不能保證網頁對搜索引擎的優化,甚至不能保證一定比HTML網站有更簡潔的代碼設計,何況搜索引擎對於網頁的收錄和排序顯然不是以是否採用表格和CSS定位來衡量,這就是爲什麼很多傳統表格佈局製作的網站在搜索結果中的排序靠前,而很多使用CSS及web標準製作的
網站排名依然靠後的原因。因爲對於搜索引擎而言,網站結構、內容、相關網站鏈接等因素始終是
網站優化最重要的指標。
使用DIV+CSS佈局網站的優點和缺陷 隨着WEB2.0標準化設計理念的普及,國內很多大型門戶網站已經紛紛採用DIV+CSS製作方法,奮鬥網絡也成爲了CSS網頁佈局技術學習的先鋒站點,從實際應用情況來看,此種方法絕對好於表格製作頁面的方法。
如今大部分網站仍然採用表格嵌套內容的方式來製作網站,雖然此方法對於我們來說比較熟悉、比較上手;但是,它卻阻礙了一種更好的、更有親和力的、更靈活的,而且功能更強大的網站設計方法——DIV+CSS。
CSS網頁佈局的意義體現在如下方面: 一、使頁面載入得更快
由於將大部分頁面代碼寫在了CSS當中,使得頁面體積容量變得更小。相對於表格嵌套的方式,
DIV+CSS將頁面獨立成更多的區域,在打開頁面的時候,逐層加載。而不像表格嵌套那樣將整個頁面圈在一個大表格裏,使得加載速度很慢。
二、降低流量費用
頁面體積變小,瀏覽速度變快,這就使得對於某些控制主機流量的網站來說是最大的優勢了。
三、修改設計時更有效率
由於使用了DIV+CSS製作方法,在修改頁面的時候更加容易省時。根據區域內容標記,到CSS裏找到相應的ID,使得修改頁面的時候更加方便,也不會破壞頁面其他部分的佈局樣式。
四、保持視覺的一致性
DIV+CSS最重要的優勢之一:保持視覺的一致性;以往表格嵌套的製作方法,會使得頁面與頁面,或者區域與區域之間的顯示效果會有偏差。而使用DIV+CSS的製作方法,將所有頁面,或所有區域統一用CSS文件控制,就避免了不同區域或不同頁面體現出的效果偏差。
五、更好地被搜索引擎收錄
由於將大部分的HTML代碼和內容樣式寫入了CSS文件中,這就使得網頁中正文部分更爲突出明顯,便於被搜索引擎採集收錄。
六、對瀏覽者和瀏覽器更具親和力
我們都知道網站做出來是給瀏覽者使用的,對瀏覽者和瀏覽器更具親和力,DIV+CSS在這方面更具優勢。由於CSS富含豐富的樣式,使頁面更加靈活性,它可以根據不同的瀏覽器,而達到顯示效果的統一和不變形。
說了這麼多CSS網頁佈局的意義與優點,同時也不能輕視CSS網頁佈局的副作用:
一、DIV+CSS儘管不是高不可及,但至少要比表格定位複雜的多,即使對於網站設計高手也很容易出現問題,更不要說初學者了。
二、CSS
網站製作的設計元素通常放在1個外部文件中,或幾個文件,有可能相當複雜,甚至比較龐大,如果CSS文件調用出現異常,那麼整個網站將變得慘不忍睹。 三、雖然說DIV+CSS解決了大部分瀏覽器兼容問題,但是也有在部分瀏覽器中使用出現異常,比如火狐瀏覽器,在IE中顯示正常的頁面,到了火狐瀏覽器中可能會面目全非。當然這應該是瀏覽器的問題,但是可以說在目前來看,DIV+CSS還沒有實現所有瀏覽器的統一兼容。
四、DIV+CSS對搜索引擎優化與否,取決於網頁設計的專業水平,而不是DIV+CSS本身。DIV+CSS
網頁設計並不能保證網頁對搜索引擎的優化,甚至不能保證一定比HTML網站有更簡潔的代碼設計,何況搜索引擎對於網頁的收錄和排序顯然不是以是否採用表格和CSS定位來衡量,這就是爲什麼很多傳統表格佈局製作的網站在搜索結果中的排序靠前,而很多使用CSS及web標準製作的網頁排名依然靠後的原因。因爲對於搜索引擎而言,網站結構、內容、相關網站鏈接等因素始終是網站優化最重要的指標。
綜合以上討論的DIV+CSS優勢和略勢,我認爲不可盲目跟風,如何更有效、更合理的運用WEB2.0設計標準,這需要很長時間的學習和鍛鍊。而如何將DIV+CSS運用的更好,我覺得這需要通過不斷的實踐和體檢,積累豐富的設計經驗,才能很好的掌握這門技術。
Div+CSS常見錯誤總結 CSS+DIV是網站標準(或稱“WEB標準”)中常用的術語之一,通常爲了說明與HTML網頁設計語言中的表格(table)定位方式的區別,因爲XHTML網站設計標準中,不再使用表格定位技術,而是採用css+div的方式實現各種定位。應用應用DIV+CSS編碼時很容易犯一些錯誤。本文列舉了一些常見的錯誤:
1. 檢查HTML元素是否有拼寫錯誤、是否忘記結束標記
即使是老手也經常會弄錯div的嵌套關係。可以用dreamweaver的驗證功能檢查一下有無錯誤。
2. 檢查CSS是否正確
檢查一下有無拼寫錯誤、是否忘記結尾的 } 等。可以利用CleanCSS來檢查 CSS的拼寫錯誤。CleanCSS本是爲CSS減肥的工具,但也能檢查出拼寫錯誤。
3. 確定錯誤發生的位置
如果錯誤影響了整體佈局,則可以逐個刪除div塊,直到刪除某個div塊後顯示恢復正常,即可確定錯誤發生的位置。
4. 利用border屬性確定出錯元素的佈局特性
使用float屬性佈局一不小心就會出錯。這時爲元素添加border屬性確定元素邊界,錯誤原因即水落石出。
5. float元素的父元素不能指定clear屬性
MacIE下如果對float的元素的父元素使用clear屬性,周圍的float元素佈局就會混亂。這是MacIE的著名的bug,倘若不知道就會走彎路。
6. float元素務必指定width屬性
很多瀏覽器在顯示未指定width的float元素時會有bug。所以不管float元素的內容如何,一定要爲其指定width屬性。
另外指定元素時儘量使用em而不是px做單位。
7. float元素不能指定margin和padding等屬性
IE在顯示指定了margin和padding的float元素時有bug。因此不要對float元素指定margin和padding屬性(可以在float元素內部嵌套一個div來設置margin和padding)。也可以使用hack方法爲IE指定特別的值。
8. float元素的寬度之和要小於100%
如果float元素的寬度之和正好是100%,某些古老的瀏覽器將不能正常顯示。因此請保證寬度之和小於99%。
9. 是否重設了默認的樣式?
某些屬性如margin、padding等,不同瀏覽器會有不同的解釋。因此最好在開發前首先將全體的margin、padding設置爲0、列表樣式設置爲none等。
10. 是否忘記了寫DTD?
如果無論怎樣調整不同瀏覽器顯示結果還是不一樣,那麼可以檢查一下頁面開頭是不是忘了寫下面這行DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">[1]