創(chuàng)新互聯(lián)公司是一家專業(yè)的成都網(wǎng)站建設(shè)公司，我們專注成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、網(wǎng)絡(luò)營銷、企業(yè)網(wǎng)站建設(shè)，賣友情鏈接，一元廣告為企業(yè)客戶提供一站式建站解決方案，能帶給客戶新的互聯(lián)網(wǎng)理念。從網(wǎng)站結(jié)構(gòu)的規(guī)劃UI設(shè)計(jì)到用戶體驗(yàn)提高，創(chuàng)新互聯(lián)力求做到盡善盡美。

本文目錄一覽

• 1，請(qǐng)問為什么要使用CSSDIV來布局網(wǎng)頁
• 2，為什么需要CSS樣式表
• 3，從零開始學(xué)網(wǎng)頁設(shè)計(jì) 為什么要使用CSS設(shè)計(jì)網(wǎng)頁
• 4，網(wǎng)頁設(shè)計(jì)為什么要用DIV布局
• 5，為什么使用css

1，請(qǐng)問為什么要使用CSSDIV來布局網(wǎng)頁

1.標(biāo)準(zhǔn)化 2.維護(hù)簡單 3.費(fèi)用低 4.訪問速度快如果你要把網(wǎng)頁發(fā)布成HTML這種類弄的就用CSS+DIV,(為什么呢,因?yàn)檫@種能常是用電子商務(wù)軟件做的,為了便于修改所以都是有CSS+DIV做.)如果是網(wǎng)站還是用表格做的好.

2，為什么需要CSS樣式表

CSS樣式表就像你編寫程序要包含的公共信息.比如A.htm,B.htm,c.htm三個(gè)文件,都有一個(gè)元素,并且要有一個(gè)相同的樣式如向右對(duì)齊,文本,如果沒有樣式表,你必須每個(gè)文件的頭部定義;顯然是比較煩瑣的.而統(tǒng)一包含一個(gè)樣式表,就可以修改樣式表,即達(dá)到所有頁風(fēng)格的更新.css樣式表是決定網(wǎng)頁布局的關(guān)鍵，如果修改之，剛相關(guān)的屬性產(chǎn)生變化，自然布局及樣式就會(huì)發(fā)生變化。具體的css有很多屬性值，這里沒辦法一一羅列出來。您可以買本相關(guān)的書籍，閱讀參考一下，就會(huì)明白了！css一般是與div結(jié)合來進(jìn)行網(wǎng)頁的排版布局！也可以用來做一些比較簡單的特效！

3，從零開始學(xué)網(wǎng)頁設(shè)計(jì) 為什么要使用CSS設(shè)計(jì)網(wǎng)頁

CSS起初用于 HTML 網(wǎng)頁中，可取代傳統(tǒng)字型標(biāo)簽和其他樣式（背景顏色、文字顏色大小、邊界...等等)，一直到W3C 批淮了 CSS 第二級(jí)，除了在第一級(jí)的規(guī)范里增加了更多功能之外，同時(shí)也出現(xiàn)了定位的屬性，而這些屬性也取代了被泛濫使用的table標(biāo)簽。表格設(shè)計(jì)是死的，css設(shè)計(jì)是活的，設(shè)計(jì)好的表格版型因原始碼的復(fù)雜，很難再改變。再者，您可一次更新網(wǎng)站的相同內(nèi)容，而不需要每個(gè)頁面分別修改。假設(shè)，想要把原本標(biāo)題靠右的文字內(nèi)容改為置中，只需修改css即可，CSS能讓我們更輕易的修改整個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格。css 是樣式 如果網(wǎng)頁中沒有css的樣式 將會(huì)變成最初的樣子 沒有排列 沒有色彩 css很重要

4，網(wǎng)頁設(shè)計(jì)為什么要用DIV布局

說起來我干網(wǎng)頁設(shè)計(jì)和網(wǎng)站制作也有六七年的時(shí)間了，當(dāng)初DIV剛剛興起的時(shí)候，曾和朋友們?cè)囘^用DIV，但因?yàn)楫?dāng)時(shí)DIV+CSS這種技術(shù)還不成熟，所以也就沒太在意，依然用TABLE，但，時(shí)至今日，DIV+CSS已把TABLE+CSS淘汰了，我們這些常用TABLE的人，也得慢慢熟悉DIV了。

首先來說，DIV的好處在于樣式與主體內(nèi)容分離，大量減少網(wǎng)頁代碼量，使網(wǎng)頁下載速度更快。而且對(duì)于后期網(wǎng)站維護(hù)來說，也是相當(dāng)便捷的，這是DIV最大的優(yōu)勢。但個(gè)人認(rèn)為，DIV也不一點(diǎn)缺點(diǎn)都沒有，比如一個(gè)大型且架構(gòu)復(fù)雜的網(wǎng)站來說，采用DIV布局對(duì)團(tuán)隊(duì)合作來說就是一個(gè)不小的折磨。因?yàn)槿荄IV標(biāo)簽，如果不是本人做的，根本找不到需要的內(nèi)容，當(dāng)然可以添加注釋，但這并不能完全解決這個(gè)問題。

對(duì)于用習(xí)慣了TABLE的人來說，DIV確實(shí)很難適應(yīng)，這就像學(xué)習(xí)武功，你本來學(xué)習(xí)的少林的功夫，如果再學(xué)武當(dāng)?shù)?，興許里面就有些沖撞，除非你忘了原來的基礎(chǔ)，從頭再來。DIV來說也是這樣，對(duì)我來說對(duì)于用DIV控制盒子的各項(xiàng)屬性就是一個(gè)不小的難題，興好現(xiàn)在通過練習(xí)逐漸攻克了這個(gè)難關(guān)。

通常情況下，seoer非常喜歡把一個(gè)網(wǎng)站做到最細(xì)節(jié)，在網(wǎng)頁設(shè)計(jì)方面，有時(shí)與設(shè)計(jì)師溝通時(shí)，通常會(huì)問到：seo為什么要求網(wǎng)頁設(shè)計(jì)師用div+css布局網(wǎng)頁?有什么好處之類的問題，其實(shí)seo們考慮的問題就是如何讓網(wǎng)頁的內(nèi)容更好的讓搜索引擎抓取網(wǎng)頁的內(nèi)容，更容易評(píng)估網(wǎng)頁內(nèi)容的質(zhì)量，這樣有利于排名。這是seo們的最基本的目的，當(dāng)然css+div的好處并不局限于此，以下為詳細(xì)的分析： seo主要就是通過對(duì)網(wǎng)站的結(jié)構(gòu)，標(biāo)簽，排版等各方面的優(yōu)化，使google等搜索引擎更容易搜索網(wǎng)站的內(nèi)容，并且讓網(wǎng)站的各個(gè)網(wǎng)頁在google等搜索引擎中獲得較高的評(píng)分，從而獲得較好的排名。div css網(wǎng)頁布局對(duì)seo有哪些影響呢？ 代碼精簡 使用div+css布局，頁面代碼精簡，這一點(diǎn)相信對(duì)xhtml有所了解的都知道。

代碼精簡所帶來的直接好處有兩點(diǎn)：

一是提高spider爬行效率，能在最短的時(shí)間內(nèi)爬完整個(gè)頁面，這樣對(duì)收錄質(zhì)量有一定好處;

二是由于能高效的爬行，就會(huì)受到spider喜歡，這樣對(duì)收錄數(shù)量有一定好處。

表格的嵌套問題 很多網(wǎng)站如何推廣的文章中稱，搜索引擎一般不抓取三層以上的表格嵌套，這一點(diǎn)一直沒有得到搜索引擎官方的證實(shí)。我的幾項(xiàng)實(shí)驗(yàn)結(jié)果沒有完全出來，但根據(jù)目前掌握的情況來看，spider爬行table布局的頁面，遇到多層表格嵌套時(shí)，會(huì)跳過嵌套的內(nèi)容或直接放棄整個(gè)頁面。 使用table布局，為了達(dá)到一定的視覺效果，不得不套用多個(gè)表格。如果嵌套的表格中是核心內(nèi)容，spider爬行時(shí)跳過了這一段沒有抓取到頁面的核心，這個(gè)頁面就成了相似頁面。網(wǎng)站中過多的相似頁面會(huì)影響排名及域名信任度。

而div+css布局基本上不會(huì)存在這樣的問題，從技術(shù)角度來說，xhtml在控制樣式時(shí)也不需要過多的嵌套。 這雖然沒有得到確認(rèn)，但還是建議使用table布局的朋友們，在設(shè)計(jì)時(shí)盡可能的不要使用多層表格嵌套，seoer們?cè)谖恼轮姓f明了這一點(diǎn)，相信他們也不是沒有依據(jù)的。 速度問題 div+css布局較table布局減少了頁面代碼，加載速度得到很大的提高，這在spider爬行時(shí)是非常有利的。過多的頁面代碼可能造成爬行超時(shí)，spider就會(huì)認(rèn)為這個(gè)頁面無法訪問，影響收錄及權(quán)重。

另一方面，真正的seoer不只是為了追求收錄、排名，快速的響應(yīng)速度是提高用戶體驗(yàn)度的基礎(chǔ)，這對(duì)整個(gè)搜索引擎優(yōu)化及營銷都是非常有利的。

css對(duì)排名的影響 基于xthml標(biāo)準(zhǔn)的div+css布局，一般在設(shè)計(jì)完成后會(huì)盡可能的完善到能通過w3c驗(yàn)證。截止目前沒有搜索引擎表示排名規(guī)則會(huì)傾向于符合w3c標(biāo)準(zhǔn)的網(wǎng)站或頁面，但事實(shí)證明使用xthml架構(gòu)的網(wǎng)站排名狀況一般都不錯(cuò)。這一點(diǎn)或許會(huì)有爭議，但樂思蜀本人保持這樣的觀點(diǎn)，有異議者可以拿三組以上基本同等質(zhì)量的網(wǎng)站對(duì)比觀察。

我想，這樣的情況可能不是排名規(guī)則，最大的可能還是spider爬行網(wǎng)站時(shí)，出現(xiàn)以上差異導(dǎo)致收錄質(zhì)量的不同。 畢竟廖勝于無，建議建站或改版的朋友們，技術(shù)許可的情況下，還是選擇div+css布局為好,還有其他不明白的 咨詢我把 631063699

5，為什么使用css

用css可以讓結(jié)構(gòu)（html）和表現(xiàn)（css）分離，方便維護(hù)。以前我們寫網(wǎng)站都用table來布局，然后樣式都直接加在table上面，這樣一來頁面顯得特別的臃腫，然后想修改一下也顯得非常困難。后來w3c就出來了css，把結(jié)構(gòu)和樣式分離，html只負(fù)責(zé)結(jié)構(gòu)，樣式交給css來實(shí)現(xiàn)。

這樣一來開發(fā)者工作量和效率大大提升了，頁面也變得更加容易維護(hù)，想要修改某個(gè)字體或者樣式，直接在css文件中就搞定了，不需要?jiǎng)觝tml結(jié)構(gòu)。對(duì)于網(wǎng)站訪問者來說，體驗(yàn)更好，網(wǎng)站速度變快。html是內(nèi)容，比如剛放入鍋的肉，沒有柴米油鹽下去，就沒有味道和色鮮，拿來比喻css也是如此。html+css達(dá)到正式的一道菜肴。html：股市上漲。css： h1 不上色的話，瀏覽者有可能覺得純文本太單調(diào)，感覺沒有任何視覺體驗(yàn)。

當(dāng)然css作用不只如此，只是列舉。具體需要自己慢慢領(lǐng)會(huì)，前兩條回答都很專業(yè)，http://www.w3c.com.cn/，里面有詳解。當(dāng)瀏覽器閱讀css時(shí)，它會(huì)根據(jù)css編排文檔。有三種使用css方法： 外部樣式表(external style sheet) 內(nèi)部樣式表(internal style sheet) 內(nèi)聯(lián)樣式表(inline styles) 外部樣式表(external style sheet) 很多網(wǎng)頁需要用到同樣的樣式時(shí)，將樣式寫在一個(gè)css文件里，然后在每個(gè)需要用到這些樣式的網(wǎng)頁里鏈接這個(gè)css文件?？梢杂脴?biāo)記把這個(gè)外部樣式表鏈接到html文檔。標(biāo)記在html文檔的部使用。如果你在html文檔外部建立了一個(gè)“mystyle.css”文件，定義段落的文字的顏色為綠色： p { color: blue; } 然后你可以這樣使用它

這個(gè)段落的文字的顏色將為綠色

瀏覽器將會(huì)從mystyle.css這個(gè)文件閱讀樣式定義，并根據(jù)它編排文檔。 可以用任何的文本編輯器寫css外部樣式表。在這個(gè)文件內(nèi)不要包含有html標(biāo)記。你的樣式表以.css擴(kuò)展名保存。以下是一個(gè)css文件; hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} 不要在屬性值和單位之間留下空格。如果你使用"margin-left: 20 px" 而不"margin-left: 20px"，這只會(huì)在ie6有正確的顯示，在mozilla（firefox）或 netscape.不能正確的顯示 內(nèi)部樣式表(internal style sheet) 當(dāng)一個(gè)單獨(dú)的文檔有獨(dú)一無二的樣式時(shí)，使用內(nèi)部樣式表。在使用head部使用

這個(gè)段落的文字字體大小為20px

瀏覽器將會(huì)閱讀這個(gè)樣式表，并根據(jù)它編排文檔。 注意：瀏覽器一般會(huì)忽視它不支持的標(biāo)記，這意味著一些舊式瀏覽器不支持內(nèi)聯(lián)樣式表(inline styles) 內(nèi)聯(lián)樣式表失去了css的許多優(yōu)點(diǎn)，它內(nèi)容和表現(xiàn)混在一起，應(yīng)少用。 通過在相關(guān)的標(biāo)記里使用style屬性可以使用內(nèi)聯(lián)樣式表。例如：

這是一個(gè)段落 字體顏色為紅色,字體大小為8px

多項(xiàng)樣式將會(huì)層疊成一項(xiàng) css允許不同的方式定義樣式。樣式可以定義在一個(gè)單獨(dú)的html元素里面(內(nèi)聯(lián)樣式表)，也可以定義在一個(gè)htl頁面的部(內(nèi)部樣式表)，或者定義在一個(gè)外部的css文件內(nèi)。甚至在同一個(gè)html文檔內(nèi)可以引用多個(gè)外部css樣式表(外部樣式表)。

層疊順序（cascading order） 當(dāng)多于一項(xiàng)樣式定義一個(gè)html元素時(shí)什么樣式將會(huì)被使用？ 一般說來，我們可以說所有的樣式將會(huì)“層疊”成一個(gè)新的樣式表，它們遵從下面的優(yōu)先級(jí)。

（從低到高） 瀏覽器缺省樣式表(browser default)(優(yōu)先級(jí)最低) 外部樣式表(extenal style sheet) 內(nèi)部樣式表(internal style sheet) 內(nèi)聯(lián)樣式表(inline style)(優(yōu)先級(jí)最高) 所以，一個(gè)內(nèi)聯(lián)的樣式會(huì)覆蓋過內(nèi)部樣式表、外部樣式表和瀏覽器缺省樣式表

例如，在一個(gè)外部樣式表有這樣定義了： h3 { color: red; /* 字體顏色為紅色 */ text-align: left;/* 文本以左對(duì)齊*/ font-size: 8px /* 字體大小為8px*/ } 而在一個(gè)內(nèi)部樣式表中也有這樣這的定義 ： h3 { text-align: right; /* 文本以右對(duì)齊*/ font-size: 20px /* 字體大小為20px */ } 要是這個(gè)頁面使用到這個(gè)外部樣式表，那么h3聲明將是 color: red; /* 字體顏色為紅色 */ text-align: right; /* 文本以右對(duì)齊*/ font-size: 20px /* 字體大小為20px */ color值從外部樣式表繼承，text-alignment 和the font-size值從內(nèi)部樣式表繼承主流架構(gòu)兩個(gè)文件，一個(gè)html ，一個(gè)csshtml寫內(nèi)容，css寫內(nèi)容的格式效果類似代碼分離方式，方便管理以及多人開發(fā)一個(gè)項(xiàng)目

分享標(biāo)題：為什么要用css布局，請(qǐng)問為什么要使用CSSDIV來布局網(wǎng)頁
文章源于：http://chinadenli.net/article18/icjogp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、自適應(yīng)網(wǎng)站、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、虛擬主機(jī)、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)