div+css如何布局頭部導航條！
1、新建一個html頁面。
2、在html頁面上新建三個div標簽，分別為這三個div添加class為:header、main、footer。
3、創建style標簽用于設置css樣式。在title標簽下創建一個style標簽，然后為header類設置div的高、背景顏色樣式。
4、為顯示主要內容的main類設置樣式。在style標簽里設置main類樣式的邊框、寬、高、背景顏色。
5、設置底部footer的樣式。在style標簽里添加footer類樣式的背景顏色和高度。
6、保存好html文件后使用瀏覽器查看效果。
7、在瀏覽器上看到div標簽和瀏覽器存在一些空白的像素，為了去掉這些空白的像素我們需要把body標簽設置外邊框。
div+css教程教程
CSS/DIV頁面布局設計
http://learning.artech.cn/category/css-div-web-design
CSS/DIV網頁設計視頻教程目錄
2007年05月01日 星期二
歡迎您來到前沿視頻教室，下面列出的是CSS/DIV網頁設計視頻教程列表，我們還會不斷地推出相關的課程， 如果您有興趣，歡迎您常來這里看一看！
CSS基礎知識與核心概念
CSS初探 - CSS基本知識 - 第1課
CSS基本語法與核心概念 - CSS基本知識 - 第2課
設置豐富的文字效果 - CSS基本知識 - 第3課
CSS/DIV布局專題講解
設置圖片效果 - CSS/DIV專題講解 - 第1課
設置網頁背景 - CSS/DIV布局專題講解 - 第2課
設置表格與表單的樣式 - CSS/DIV布局專題講解 - 第3課
設置頁面和瀏覽器的元素 - CSS/DIV布局專題 - 第4課
用CSS制作漂亮的菜單- CSS/DIV布局專題講解 - 第5課
CSS濾鏡的應用 - CSS/DIV布局專題講解 - 第6課
理解CSS定位與div布局 - CSS/DIV布局專題講解 - 第7課
CSS排版 - CSS/DIV布局專題講解 - 第8課
網頁變幻 - CSS/DIV布局專題講解 - 第9課
CSS與其他技術
CSS與Javascript的綜合應用 - CSS與其他技術 - 第1課
CSS與XML的綜合運用 - CSS與其他技術 - 第2課
CSS與AJAX的綜合應用 - CSS與其他技術 - 第3課
CSS/DIV綜合實踐
博客設計DIY - CSS/DIV綜合實踐 - 第1課
小型工作室 - CSS/DIV綜合實踐 - 第2課
公司網站 - CSS/DIV綜合實踐 - 第3課
購物網站設計 - CSS/DIV綜合實踐 - 第4課
旅游觀光網站設計 - CSS/DIV綜合實踐 - 第5課
DIV+CSS教程
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; chart=gb2312" />
<title>無標題文檔</title>
<link rel="stylesheet" href="Untitled-3.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">網頁導航欄</div>
<div id="pagebody">
<div id="sidebar">分欄一</div>
<div id="mainbody">分欄二</div>
</div>
<div id="footer">網頁尾部</div>
</div>
</body>
</html>
以上代碼不用我多說吧？其中有一個注意點就是 <link rel="stylesheet" href="Untitled-3.css" type="text/css" />這是用來鏈接外部樣式表的，而這段代碼要放在<head></head>之間；
（新建一個HTML文檔，把以上代碼復制下來，然后粘貼到新建的HTML文檔中的<body></body>之間）這里一共用到了七個ID，下面我將CSS樣式表再傳上來，然后就樣式表中的一些相關屬性再一一細說！！！！！！
！
！
！
！
新建一個文檔，把后輟改為.css，然后把以下代碼復制到.CSS樣式表中即可；
下面來詳細說說其中代碼的起到的功能；由于為了讓你看的明白，加了顏色，色彩搭配上不是很合適，不好意思了！！！！
body{
margin:0px;
padding:0px;
font-size:12px;
text-align:center;
background-color:#999999;
}
/*body是頁面整體布局的設置，參數margin是外部邊的樣式；他的順序是：上－右－下－左； 參數padding是內邊的樣式，順序與margin是一樣的；font-size是字體大小;參數text-align是內容位置，center是居中顯示，還有其它參數可供選擇，這里就不一一詳述。參數background-color是背景顏色*/
a:link {
color: #CC9900;
}
a:visited {
color: #0000FF;
}
a:hover {
color: #009900;
}
a:active {
color: #FF0000;
}
/*以上是鏈接樣式 */
#container{
width:800px;
height:500px;
background-color:#0099FF;
}
/*以上是總體DIV的樣式，其中屬性：width是寬；height是高；background-color是背景色；以后樣式中屬性值相同處不再復述。明白嗎？呵呵*/
#header{
width:750px;
height:100px;
background-color:#FF6600;
}
/*以上的代碼是你要的導航頭部*/
#pagebody{
width:690px;
height:240px;
background-color:#339933;
margin:10px;
padding:20px;
}
/*以上這段代碼是信息主要區域了，新聞呀！！！商品呀！！！！圖片呀！！！主要的都在這里面寫了*/
#footer{
width:750px;
height:100px;
background-color:#996600;
}
/*以上這段代碼就是你要的結尾了！*/
#sidebar{
width:350px;
height:250px;
float:left;
background-color:#FF0000;
}
#mainbody{
width:340px;
height:250px;
float:right;
background-color:#FF00FF;
}
/*以上兩段代碼是為了讓你看明白怎么加入主區域內的分欄而寫，其中有一個參數要特別說一下，那就是float這個屬性了，它是讓#sidebar與#mainbody這兩個ID一個靠左一個靠右，如果不這樣設置的話，那么這兩個ID就會擠在一起了。明白了嗎？*/
不清楚之處請告訴我，我再詳細解答給你！
好好學吧！只要持之以恒就一定會學會的！剛開始的時候是有些摸不著頭腦，多看資料，多看書 多做練習，第一遍看不懂是正常的，第二遍如果還看不懂也沒關系，一直看下去，只到看懂為止，古人云：書讀萬遍其意自現呀！呵呵，這些都是題外話，有點MJ了，呵呵！！！不要只看不練習，那樣看多少都是徒勞的！一定要練習，多練習；正所謂，熟能生巧。
貼子就寫到這里了。共同學習，一起進步吧！！！！
DIV+CSS布局網頁的教程
推薦去看看《精通CSS》
我就是從那里開始看的···
網上的地址在這里 http://www.enet.com.cn/eschool/video/cpcss/
你也可以去弄本CSS中文完全參考手冊.chm 來邊做邊參考
地址：http://www.jzxue.com/System/plus/download.php?open=1&aid=1463&cid=3&link=aHR0cDovL3h1bmxlaS5qenh1ZS5jb20vMjAwOS0yLzYvQ1NTzerIq7LOv7zK1rLhMy4wLnJhcg%253D%253D
誰會div+CSS教教我 可以嗎 提供資料 也好啊
樓主您好，我會，樓主想要資料，可以私信發給你，謝謝，記得采納我喲！下面是科普DIV+CSS
DIV+CSS是WEB設計標準，它是一種網頁的布局方法。與傳統中通過表格（table）布局定位的方式不同，它可以實現網頁頁面內容與表現相分離。提及DIV+CSS組合，還要從XHTML說起。XHTML是一種在HTML（標準通用標記語言的子集）基礎上優化和改進的新語言，目的是基于XML應用與強大的數據轉換能力，適應未來網絡應用更多的需求。
“DIV+CSS”其實是錯誤的叫法，而標準的叫法應是XHTML+CSS。因為DIV與Table都是XHTML或HTML語言中的一個標記，而CSS只是一種表現形式。也許其提出者本意并沒有錯，但是跟風者從表現曲解了其意思，認為整個頁面就應當是DIV+CSS文件的組合。
方法
css是層疊樣式表（Cascading Style Sheets）的縮寫，用于定義HTML元素的顯示形式，是W3C推出的格式化網頁內容的標準技術。網頁設計者必須掌握的技術之一。
在HTML文檔中加入CSS
樣式表可分為嵌入式樣式表、外部樣式表和內聯樣式表三種，在同一文檔內可以同時使用三種方法。
發展
1、樣式定義放在一個單獨的文件中，例：新建一個后輟為CSS的樣式定義。
元素{ 屬性color:值red；} 在head段使用<link>標記，
引用語法：<link rel=”stylesheet” type=”text/css” href=”樣式表URL” />
2、嵌入式樣式表：
<style>元素段必須出現在head段內，有一個開始和結束標記，并且可以有多個<style>段
語法格式： <style type=”text/css”>
…樣式定義…
2樣式編輯
3、在嵌入式樣式表中我們可以使用@import導入一個外部樣式表，例：
<style type=”text/css”>
@import url(外部樣式表位置)；
…其它嵌入式的樣式定義…
</style>
4、內聯樣式表：
寫在開始標記里面，比如你要H1變紅色，
<h1 style=”color:red;”>變為紅色</h1>
總結： 三種樣式表優先使用外部樣式表、嵌入式樣式表用來調試用的、一般不使用內聯樣式表。
5、樣式規則。
一個樣式規則由一個選擇器后跟一個聲明塊組成，聲明塊是一個大容器,由大括號中間的部分組成,聲明塊中間的空間會被忽略,,聲明塊由一個一個的聲明組成,聲明由屬性和值組成,屬性和值用冒號隔開,分號結束，每個聲明內只能有一個屬性，如果屬性值中含有空格用雙引號括起來例，在一個聲明塊內可以有多個聲明，每個聲明用分號隔開。
選擇器
聲明塊
選擇一個元素
聲明{ }
屬性 : 值;
冒號開始分號結束
6、注釋：有關的詳細內容在中有詳細的解釋。
7、選擇器分組
當遇到幾個選擇器共享一個聲明的時候，可以分組放在一起，每個選擇器必須以逗號隔開。例：h1,h2,h3,h4 { color red;}選擇器分組時要將每個選擇器路徑寫全，分組結尾不能有逗號。
例：路徑不全： #maincontent p, ul{ border-top:1pxsolid #ddd;}
正確寫法：#maincontent p, #maincontent ul{ border-top:1pxsolid #ddd;}
例：結尾多了一個逗號： .a1 p, .a1 ul,{color:red;}
8、選擇器
元素選擇器：語法格式： 元素{color: blue;}
類選擇器： 語法格式： .類名{屬性: 值;}
ID選擇器：#id名 {屬性 : 值；} ID名不能重復
通配符選擇器：語法格式：*{屬性:值;}
偽類選擇器：
偽類選擇器可以以不同方式格式化超級鏈接<a>元素的四種不同狀態：以下順序依次寫；（記憶方法：a Love or Hate）
a:link 是用在未訪問的鏈接的選擇器
a:visited 是用在已訪問過的鏈接的選擇器
a:hover 是用在鼠標光標放在其上的鏈接的選擇器
a:active 是用在獲得焦點（比如，被點擊）的鏈接的選擇器
如果需要，我們可以組合這幾個狀態，按順序寫：
a:link，a:visited { color :blue;}
a:hover ，a:active { color :blue;}
9、偽元素選擇器
標準的選擇器不能格式化一個元素內容的第一個字母或者第一行，而偽元素選擇器能實現：
所有瀏覽器支持的有兩種： ：first-line和 ：first-letter
例：段落的第一行：p：first-line {屬性：值；}
例：段落的第一個字母：p：first-letter {屬性：值；}
3優先級編輯
介紹
所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先后順序。
優先說明
內聯樣式(inline style) > ID選擇符 > 類選擇符(class), 偽類(pudo-class)和屬*(attribute)選擇符 > 類別(type)，偽對象(pudo-element)
一,解釋：
*內聯樣式(inline style)：元素的style屬*，比如 <div style="color:red;"></div> ,其中的color:red;就是內聯樣式
*ID選擇符：元素的id屬*，比如 <div id="content"></div> 可以用ID選擇符#content
*類選擇符：比如<div class="box"></div>，可以使用類選擇符 .box
*偽類(pudo-class)：最常見的是錨(a)偽類，比如a:link,a:visited.
*屬性選擇符(attribute lectors)：比如div[class=demo],含有class為demo的div元素
*類別選擇器(type lector)：HTML標簽選擇，比如div .demo,div元素下含有class為demo的元素
*偽對象選擇器(pudo-element lector)：比如div:first-letter,div元素下的第一個單詞。
多重CSS樣式定義，屬性追加重復最后優先原則
一個標簽可以同時定義多個class，也可以是同一個class中重復定義屬性。例如：
我們先定義兩個樣式
.one{width:200px;background:url(images/imgA.jpg) no-repeat left top;}
.two{border:10px solid #000; background:url(images/imgB.jpg) no-repeat left top;}
在頁面代碼中，我們可以這樣調用:<div class="one two"></div>
這樣最終的顯示效果是這個div樣式是什么呢？？重復的是以哪一個為準呢？？
<div class="one two"></div>應用到的樣式如下：
width:200px;
border:10px solid #000;
background:url(images/imgB.jpg) no-repeat left top;
因為，當應用兩個或多個樣式時，瀏覽器所應用的樣式根據是屬性追加重復最后優先原則
就是說兩個或多個或重復的樣式名定義，瀏覽器所應用的樣式是按先后順序的，如果定義了重復的屬性值，以最后定義的為準，如果應用了兩個或多個樣式名，里面不重復定義的
屬性值就追加上去，重復的屬性值就以最后一個為準。這里要注意的是，樣式的先后不是根據頁面上應用的名字順序，而是樣式表里的樣式順序。
二、CSS的調用
頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。類似這樣：
<style type="text/css"> <!-- body { background : white ; color : black ; } --> </style>
外部調用法：將樣式表寫在一個獨立的.css文件中，然后在頁面head區用類似以下代碼調用。
<link href="css/style.css" type="text/css" rel="stylesheet"/>
"@import"命令方法：類以下代碼, <style type="text/css" media="all">@import url( css/style01.css );</style>
本人推薦使用第二種調用方法（外部調用法）
[1]
優先規則
既然樣式有優先級，那么就會有一個規則來約定這個優先級，而這個“規則”就是本次所需要講的重點。
樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：
1、統計選擇符中的ID屬性個數。
2、統計選擇符中的CLASS屬性個數。
3、統計選擇符中的HTML標記名個數。
最后，按正確的順序寫出三個數字，不要加空格或逗號，得到一個三位數(css2.1是用4位數表示)。( 注意，你需要把數字轉換成一個以三個數字結尾的更大的數)。相應于選擇符的最終數字列表可以很容易確定較高數字特性凌駕于較低數字的。
例如：
1、每個ID選擇符(#someid)，加 0,1,0,0。
2、每個class選擇符(.someclass)、每個屬性選擇符(形如[attr=value]等)、每個偽類(形如:hover等)加0,0,1,0。
3、每個元素或偽元素(:firstchild)等，加0,0,0,1。
4、其它選擇符包括全局選擇符*，加0,0,0,0。相當于沒加，不過這也是一種specificity，后面會解釋。[1]
4使用誤區編輯
1、DIV+CSS的合理之處在于可以進行網頁的統一設計管理，通過一個樣式表，牽一發而動全身，只要修改樣式表，就可以統一全站的[2]風格，如果為一個頁面單獨做一個樣式表，或者一個div就做一個樣式表，沒有全局設計觀念，那么這個div+CSS的設計方式就完全沒有必要，甚至成了累贅;
2、像Table一樣用DIV+CSS，無窮盡的嵌套，其效果與Table設計沒有兩樣，并不會帶來搜索引擎的優化效果，反而會增加頁面的負擔;
3、推崇Div+CSS，卻不考慮兼容性，TABLE設計由來已久，得到瀏覽器的廣泛支持，所以顯示效果很好，不會出現錯位情況，但是DIV+CSS卻在 部分瀏覽器中會發生頁面錯位的情況，因此在進行設計的時候也要考慮到不同瀏覽器的情況，進行更改和調試。
5作用編輯
SEO
1、精簡的代碼，使用DIV+CSS布局，頁面代碼精簡，這一點相信對XHTML有所了解的都知道。觀看更多的HTML教程內容。代碼精簡提高了百度蜘蛛的爬行效率以及高效性，能在最短的時間內爬完整個頁面，同時這樣對收錄質量有一定好處;
2、提高訪問速度、增加用戶體驗性
使得加載速度得到很大的提高，那么用戶點擊頁面的等待時間就越少，用戶體驗性的增加相應的帶來就是網站受到搜索引擎的喜歡，進而提高網站排名。
3、div+css結構清晰，很容易被搜索引擎搜索到，天生就是適合優化o，降低網頁大小，讓網頁體積變得更小。注意：div+css結構清晰、精簡，不意味著可以全部用div+css結構，比如通篇HTML標簽全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>，就如同整個HTML是一萬個毫不相干的內容拼裝起來，或者通篇是<div><ul><li>結構的，就如同這個頁面所有元素全是列表。事實上這兩種情況還相當普遍，因為曲解了“DIV+CSS”的真實含義，也許根本就不應該有這個說法，因為一個完整頁面幾乎不可能僅僅DIV+CSS就能完成。
怎么定義1個DIV的CSS樣式？
加入樣式可以有兩種途徑，1是適用ID，2是適用CLASS
如果DIV的ID是AA那么代碼會顯示為<div id="aa"></div>
class則為<div class="aa"></div>
那么CSS應該寫在哪里呢
如果頁面是引入了CSS文件，那么你就找到CSS文件中
id的定義樣式格式為#aa{background:red;}
class的定義樣式格式為.aa{background:red;}
沒錯 就是#和.的區別
那么如果沒有引入CSS文件應該放在哪里呢
看到頁面代碼頭部有個<head>標簽么
在<head>和</head>之間加入
<style>#aa{background:red;}</style>
即可。
同樣也可以寫多個
<style>
#aa{background:red;}
#bb{background:red;}
</style>
by--精通css
