客服
一列布局-Web標準(div+css)教程
今天我們開(kāi)始學(xué)習《十天學(xué)會(huì )web標準(div+css)》的一列布局，包含以下幾種形式：
一、 一列固定寬度
二、一列固定寬度居中
三、一列自適應寬度
四、一列自適應寬度居中
五、一列二至多塊布局
前一節我們回顧了xhtml基礎和css基礎部分，今天我們正式開(kāi)始使用網(wǎng)頁(yè)制作軟件——adobe公司出品的dreamweaver來(lái)開(kāi)始網(wǎng)頁(yè)設計之旅。相信之前您已經(jīng)用過(guò)這個(gè)軟件了，具體怎么使用我就不講了。為了照顧部分朋友，今天課程的css部分我們是以可視化生成方式，不過(guò)建議大家能手寫(xiě)的盡量還是手寫(xiě)，這樣有助于提高效率。西安做網(wǎng)站推薦閱讀>>> 二列和三列布局-Web標準(div+css)教程，
一、一列固定寬度
我們先看一下一列固定寬度，首先要新建一個(gè)頁(yè)面：
注意：這里的文檔類(lèi)型是過(guò)渡型，目前我們采用這種寬松驗證方式。
接下來(lái)在頁(yè)面中插入一個(gè)div標簽，我們可以點(diǎn)擊工具欄的“插入DIV標簽”按鈕，在打開(kāi)的對話(huà)框中ID項給這個(gè)div命一下名，我們給它起個(gè)名叫layout（名稱(chēng)根據自己需要命名）。
插入div后，在右側的css樣式面板中，定義id為layout的樣式，確定后在打開(kāi)的css編輯對話(huà)框的方框選項中設計寬度500，高度300。為了看清楚起見(jiàn)，我們把這個(gè)div設置個(gè)背景色，這樣就能預覽出大小和位置了。
這里選擇高級，然后在選擇器中填寫(xiě)：#layout，如果是選中div后，再點(diǎn)擊添加，它會(huì )自動(dòng)添加上。因為是定義ID，所以前面需要加#，后面會(huì )有id和class的詳細講解
我們預覽一下，看看在IE中的顯示效果，一列固定寬度就這樣做成了，簡(jiǎn)單吧！CSS代碼及在IE中顯示如下：
<style type="text/css">
#layout { height: 300px; width: 400px; background: #99FFcc; }
</style>
代碼原文：
|
<!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; charset=gb2312" /> <style type="text/css"> #layout { height: 300px; width: 400px; background: #99FFcc; } </style> </head> <body> <div id="layout">此處顯示 id "layout" 的內容</div> </body> </html> |
提示：可以先修改部分代碼后再運行
二、一列固定寬度居中
一列固定寬度居中和一列固定寬度相比，我們要解決的問(wèn)題就是居中。這里我們用到css的外邊距屬性：margin。在IE6及以上版本和標準的瀏覽器當中，當設置一個(gè)盒模型的的margin:auto;時(shí)，可以讓這個(gè)盒模型居中。我們下邊在css樣式表中加上這個(gè)屬性看看效果：
#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }
在dreamweaver的設計視圖中我們選中看看，是不是已經(jīng)居中了，我們再在IE下預覽一下，同樣居中。
代碼原文：
|
<!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; charset=gb2312" /> <style type="text/css"> #layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; } </style> </head> <body> <div id="layout">此處顯示 id "layout" 的內容</div> </body> </html> |
三、一列自適應寬度
自適應寬度是相對于瀏覽器而言，盒模型的寬度隨著(zhù)瀏覽器寬度的改變而改變。這時(shí)要用到寬度的百分比。當一個(gè)盒模型不設置寬度時(shí)，它默認是相對于瀏覽器顯示的。我們把剛才的固定寬度例子中的寬度去掉看看：
#layout { height: 300px; background: #99FFcc;}
有些朋友可能要問(wèn)了，那為什么還有那么寬的白邊呢？這個(gè)是由body默認的外邊距造成的。當我們不用任何樣式表進(jìn)行定義時(shí)，body，h1－h(huán)6，ul等元素默認有外邊距或其它樣式的。這里我們在css樣式中增加一項：body {margin:0;}，就可以把body默認的外邊距去掉，這時(shí)再預覽一下，白邊就沒(méi)了。
body { margin: 0px; }
#layout { height: 300px; background: #99FFcc;}
這里的選擇器類(lèi)型是新手朋友最容易迷糊的地方，類(lèi)：是指定義一個(gè)class，可以多個(gè)對象引用；標簽：指對默認的html標簽進(jìn)行重新定義，如可以定義body{margin:0}，意思是 將body的外邊距設置為0，h2{color:#f00}是將所有h2標簽的文字顏色設置為紅色；高級它把ID和偽類(lèi)放到一塊了，是一個(gè)設置不合理的地方，在cs4版本中已經(jīng)分開(kāi)了。ID是以#開(kāi)始，id只能作用于一個(gè)對象，不能作用于多個(gè)對象，優(yōu)先級高于class，這是id和class的區別。偽類(lèi)會(huì )在第九節時(shí)詳細講解
如果我們需要按瀏覽器的80%顯示，那么設置寬度為80%，當改變?yōu)g覽器窗口大小時(shí)，盒模型的寬度也會(huì )跟著(zhù)改變。
代碼原文：
|
<!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; charset=gb2312" /> <style type="text/css"> body { margin:0;} #layout { height: 300px; width: 80%; background: #99FFcc; } </style> </head> <body> <div id="layout">此處顯示 id "layout" 的內容</div> </body> </html> |
四、一列自適應寬度居中
同樣和固定寬度居中一樣，我們只需要設置div的外邊距為auto即可實(shí)現居中了。西安做網(wǎng)站推薦閱讀>>> 縱向導航菜單及二級彈出菜單-Web標準(div+css)教程，
body { margin: 0px; }
#layout { margin:auto; height: 300px; background: #99FFcc; width: 80%; }
代碼原文：
|
<!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; charset=gb2312" /> <style type="text/css"> body { margin:0;} #layout { height: 300px; width: 80%; background: #99FFcc; margin:auto;} </style> </head> <body> <div id="layout">此處顯示 id "layout" 的內容</div> </body> </html> |
五、一列二至多塊布局
一般的網(wǎng)站整體可以分為上中下結構，即：頭部、中間主體、底部。那么我們可以用三個(gè)div塊來(lái)劃分，分別給它們起名為：頭部（header）、主體（maincontent）、詢(xún)問(wèn)（footer）。
采用固定寬度居中的方式，代碼如下：
body { margin:0; padding:0;}
#header { margin:5px auto; width:500px; height:80px; background:#9F9;}
#main { margin:5px auto; width:500px; height:400px; background:#9FF;}
#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}
為了便于區分，在背景項里設置了背景色，這里不在貼圖。依此類(lèi)推，把另外兩個(gè)div塊給置好，整個(gè)效果就出來(lái)了。這是一個(gè)大多數網(wǎng)站采用的上中下布局結構。西安網(wǎng)站建設推薦閱讀>>> 超鏈接偽類(lèi)-Web標準(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; charset=gb2312" /> <style type="text/css"> body { margin:0; padding:0;} #header { margin:5px auto; width:500px; height:80px; background:#9F9;} #main { margin:5px auto; width:500px; height:400px; background:#9FF;} #footer { margin:5px auto; width:500px; height:80px; background:#9f9;} </style> </head> <body> <div id="header">此處顯示 id "header" 的內容</div> <div id="main">此處顯示 id "main" 的內容</div> <div id="footer">此處顯示 id "footer" 的內容</div> </body> </html> |
許多朋友在問(wèn)：為什么兩個(gè)相鄰的容器中間的間距不是10px，而是5px呢？按照我們正常的理解，認為應該是兩個(gè)值相加，其實(shí)這里是兩個(gè)合并后取最大值。用css手冊中的話(huà)說(shuō)：塊級元素的垂直相鄰外邊距會(huì )合并，而行內元素實(shí)際上不占上下外邊距。行內元素的的左右外邊距不會(huì )合并。同樣地，浮動(dòng)元素的外邊距也不會(huì )合并。允許指定負的外邊距值，不過(guò)使用時(shí)要小心（有關(guān)塊級元素和行內元素的概念在下一節講到）。
六、小結
本節課涉及到以下知識點(diǎn)：
1、CSS可視化生成、格式化
本教程便于新手學(xué)習，采用dw的css可視化生成方式，熟練后的朋友盡量手寫(xiě)，這樣可以提高工作效率。目前來(lái)說(shuō)，希望常用的大家都能記住。關(guān)于css的格式化，指css的排版方式，細心的朋友已發(fā)現，我在這里貼出的css代碼，每個(gè)類(lèi)或ID都是寫(xiě)在一行的?？赡苣愕倪€是分成多行，怎么把它們弄到一行上呢？請看下面的代碼和圖示：
|
body { margin:0; padding:0; } #header { margin:5px auto; width:500px; height:80px; background:#9F9; } #main { margin:5px auto; width:500px; height:400px; background:#9FF; } #footer { margin:5px auto; width:500px; height:80px; background:#9f9; } |
經(jīng)過(guò)以上三步之后，看看，你的代碼是不是和我的一樣了。
2、CSS縮寫(xiě)
css的許多屬性是可以簡(jiǎn)寫(xiě)的，這樣便于閱讀和修改，減少代碼量，設置方法如下：
把需要縮寫(xiě)的項目選中，再生成的css代碼即為簡(jiǎn)寫(xiě)形式了。這里所說(shuō)的是多個(gè)屬性合并到一塊的簡(jiǎn)寫(xiě)方式，另外像顏色值了也可以簡(jiǎn)寫(xiě)的。比如顏色值為#ff6600;可以簡(jiǎn)寫(xiě)為#f60;兩位兩位一樣的才可以簡(jiǎn)寫(xiě)，像#c2c2c2是不可以簡(jiǎn)寫(xiě)的。
3、CSS語(yǔ)法
如圖所示，CSS語(yǔ)法由如下三部分構成，選擇器：可以是ID、CLASS或標簽；屬性和值是用來(lái)定義這個(gè)物件的某一個(gè)特性。如一張桌子的長(cháng)3000px，寬1500px，套用css的格式為，桌子{長(cháng):3000px;寬:1500px;}，這樣是不是容易理解。
4、ID和CLASS選擇器
id只能在頁(yè)面中對應一個(gè)元素，就像我們的身份證號一樣，每個(gè)人的都不一樣；class為類(lèi)，可以對應多個(gè)元素，比如說(shuō)一年級三班的學(xué)生，它所對應的可能是10個(gè)20個(gè)學(xué)生。
id的優(yōu)先級高于class，比如說(shuō)今天三班的學(xué)生上體育課，小明留下來(lái)打掃衛生。那么三班的學(xué)生上體育課這是一個(gè)類(lèi)，而小明打掃衛生這是個(gè)id，雖然小明也是三班的學(xué)生，但id高于class，所以小明執行打掃衛生的任務(wù)。
文章出處：標準之路 編輯：楊雨晨思
相關(guān)文章：
-
西安網(wǎng)站建設_西安做網(wǎng)站_西安網(wǎng)站制作——西安網(wǎng)絡(luò )公司...
-
CSS實(shí)現圖片裁剪居中 其實(shí)，css實(shí)現起來(lái)很簡(jiǎn)單，只需要設置img的樣式：object-fit：none即可，不過(guò)你要給img一個(gè)高度，因為裁剪嘛 頁(yè)面：（圖片可以自己隨便截兩張來(lái)測試） !--長(cháng)圖片-- div clas...
-
CSS背景圖片自適應全屏 .bg{ background:url(bg.png) no-repeat; background-size:cover; filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )//IE特有的濾鏡 }...
-
Viewport viewport：可視窗口，也就是瀏覽器。 vw Viewport寬度， 1vw 等于viewport寬度的1% vh Viewport高度， 1vh 等于viewport高的的1% CSS3使用Calc calc()使用通用的數學(xué)運算規則，但是也提供更智能的功能：...
-
從企業(yè)建站角度講，最便捷、最適合企業(yè)的建站系統莫過(guò)于自助建站系統，市場(chǎng)上可供選擇的自助建站平臺也是一搜一大把。這些自助建站平臺采用傻瓜式建站風(fēng)格，容易上手，操作簡(jiǎn)單方便...
-
現在想做一個(gè)網(wǎng)站成本很低了，買(mǎi)個(gè)域名，買(mǎi)個(gè)幾十塊空間，弄個(gè)網(wǎng)站建設程序就可以開(kāi)始你的玩耍了，如果你還想找成本更低的，可以看下面的分享。 如何創(chuàng )建網(wǎng)站一直都是很多朋友想要知...
-
商城網(wǎng)站建設如何將吸引力提升 在信息如此豐富多樣的今天，商城網(wǎng)站建設如何才能夠在眾多的同類(lèi)當中脫穎而出，獲得大眾的吸引和青睞呢？這其實(shí)是相關(guān)網(wǎng)站建設人員一直在思考的一個(gè)問(wèn)...
-
現在越來(lái)越多的企業(yè)重視網(wǎng)站的運營(yíng)推廣，那怎樣推廣效果更好呢？西安蟠龍網(wǎng)絡(luò )小編認為沒(méi)用永恒不變得，而且要根據企業(yè)的具體情況選擇合適的推廣方式才是最好的，如果你又運營(yíng)推廣的...
-
隨著(zhù)互聯(lián)網(wǎng)的發(fā)展，人們每時(shí)每刻已經(jīng)離不開(kāi)網(wǎng)絡(luò )，而網(wǎng)站是網(wǎng)絡(luò )的基本組成部分，可以這么說(shuō)，網(wǎng)絡(luò )是由各種各樣的網(wǎng)站組成的，當下，網(wǎng)站是每個(gè)企業(yè)的標配，很多個(gè)人都有自己的網(wǎng)站，...
-
網(wǎng)站現在是一個(gè)企業(yè)的標配，很多沒(méi)有網(wǎng)站的企業(yè)不清楚網(wǎng)站對企業(yè)有什么作用，那么今天西安蟠龍小編總結一下網(wǎng)站對企業(yè)都有哪些好處，希望看完之后您對網(wǎng)站有更深一層的認識。 一、低...