十天學會web標準DIV CSS第二天 一列布局

來源:互聯網
上載者:User
原文地址:十天學會web標準DIV CSS第二天一列布局 作者:html

今天我們開始學習《十天學會web標準(div css)》的一列布局,包含以下幾種形式:

一列固定寬度
一列固定寬度置中
一列自適應寬度
一列自適應寬度置中
一列二至多塊布局
前一節我們回顧了xhtml基礎和css基礎部分,今天我們正式開始使用網頁製作軟體——adobe公司出品的dreamweaver來開始網頁設計之旅。相信之前您已經用過這個軟體了,具體怎麼使用我就不講了。為了照顧部分朋友,今天課程的css部分我們是以可視化產生方式,不過建議大家能手寫的盡量還是手寫,這樣有助於提高效率。

一、一列固定寬度
我們先看一下一列固定寬度,首先要建立一個頁面:

 

注意:這裡的文件類型是過渡型,目前我們採用這種寬鬆驗證方式。

接下來在頁面中插入一個div標籤,我們可以點擊工具列的“插入DIV標籤”按鈕,在開啟的對話方塊中ID項給這個div命一下名,我們給它起個名叫layout(名稱根據自己需要命名)。

 

插入div後,在右側的css樣式面板中,定義id為layout的樣式,確定後在開啟的css編輯對話方塊的方框選項中設計寬度500,高度300。為了看清楚起見,我們把這個div設定個背景色,這樣就能預覽出大小和位置了。

 

 

這裡選擇進階,然後在選取器中填寫:#layout,如果是選中div後,再點擊添加,它會自動添加上。因為是定義ID,所以前面需要加#,後面會有id和class的詳細講解

 

 

我們預覽一下,看看在IE中的顯示效果,一列固定寬度就這樣做成了,簡單吧!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>
提示:可以先修改部分代碼後再運行

二、一列固定寬度置中
一列固定寬度置中和一列固定寬度相比,我們要解決的問題就是置中。這裡我們用到css的外邊距屬性:margin。在IE6及以上版本和標準的瀏覽器當中,當設定一個盒模型的的margin:auto;時,可以讓這個盒模型置中。我們下邊在css樣式表中加上這個屬性看看效果:

#layout { height: 300px; width: 400px; background: #99FFcc; margin: auto; }

在dreamweaver的設計檢視中我們選中看看,是不是已經置中了,我們再在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>
提示:可以先修改部分代碼後再運行

三、一列自適應寬度
自適應寬度是相對於瀏覽器而言,盒模型的寬度隨著瀏覽器寬度的改變而改變。這時要用到寬度的百分比。當一個盒模型不設定寬度時,它預設是相對於瀏覽器顯示的。我們把剛才的固定寬度例子中的寬度去掉看看:

#layout { height: 300px; background: #99FFcc;}

 

有些朋友可能要問了,那為什麼還有那麼寬的白邊呢?這個是由body預設的外邊距造成的。當我們不用任何樣式表進行定義時,body,h1-h6,ul等元素預設有外邊距或其它樣式的。這裡我們在css樣式中增加一項:body {margin:0;},就可以把body預設的外邊距去掉,這時再預覽一下,白邊就沒了。

body { margin: 0px; }
#layout { height: 300px; background: #99FFcc;}

 

這裡的選取器類型是新手朋友最容易迷糊的地方,類:是指定義一個class,可以多個對象引用;標籤:指對預設的html標籤進行重新定義,如可以定義body{margin:0},意思是將body的外邊距設定為0,h2{color:#f00}是將所有h2標籤的文字顏色設定為紅色;進階它把ID和偽類放到一塊了,是一個設定不合理的地方,在cs4版本中已經分開了。ID是以#開始,id只能作用於一個對象,不能作用於多個對象,優先順序高於class,這是id和class的區別。偽類會在第九節時詳細講解

 

 

如果我們需要按瀏覽器的80%顯示,那麼設定寬度為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; }
</style>
</head>
<body>
<div id="layout">此處顯示  id "layout" 的內容</div>
</body>
</html>
提示:可以先修改部分代碼後再運行

四、一列自適應寬度置中
同樣和固定寬度置中一樣,我們只需要設定div的外邊距為auto即可實現置中了。

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>
提示:可以先修改部分代碼後再運行

五、一列二至多塊布局
一般的網站整體可以分為上中下結構,即:頭部、中間主體、底部。那麼我們可以用三個div塊來劃分,分別給它們起名為:頭部(header)、主體(maincontent)、底部(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;}

 

為了便於區分,在背景項裡設定了背景色,這裡不在貼圖。依此類推,把另外兩個div塊給置好,整個效果就出來了。這是一個大多數網站採用的上中下布局結構。

 

<!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>
 提示:可以先修改部分代碼後再運行
 

許多朋友在問:為什麼兩個相鄰的容器中間的間距不是10px,而是5px呢?按照我們正常的理解,認為應該是兩個值相加,其實這裡是兩個合并後取最大值。用css手冊中的話說:區塊層級元素的垂直相鄰外邊距會合并,而行內元素實際上不佔上下外邊距。行內元素的的左右外邊距不會合并。同樣地,浮動元素的外邊距也不會合并。允許指定負的外邊距值,不過使用時要小心(有關區塊層級元素和行內元素的概念在下一節講到)。

六、小結
本節課涉及到以下知識點:

1、CSS可視化產生、格式化

本教程便於新手學習,採用dw的css可視化產生方式,熟練後的朋友盡量手寫,這樣可以提高工作效率。目前來說,希望常用的大家都能記住。關於css的格式化,指css的排版方式,細心的朋友已發現,我在這裡貼出的css代碼,每個類或ID都是寫在一行的。可能你的還是分成多行,怎麼把它們弄到一行上呢?請看下面的代碼和圖示:

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;
}

 

 

 

經過以上三步之後,看看,你的代碼是不是和我的一樣了。還

2、CSS縮寫

css的許多屬性是可以簡寫的,這樣便於閱讀和修改,減少代碼量,設定方法如下:

 

把需要縮寫的項目選中,再產生的css代碼即為簡寫形式了。這裡所說的是多個屬性合并到一塊的簡寫方式,另外像顏色值了也可以簡寫的。比如顏色值為#ff6600;可以簡寫為#f60;兩位兩位一樣的才可以簡寫,像#c2c2c2是不可以簡寫的。

3、CSS文法

 

,CSS文法由如下三部分構成,選取器:可以是ID、CLASS或標籤;屬性和值是用來定義這個物件的某一個特性。如一張桌子的長120cm,寬60cm,套用css的格式為,桌子{長:120cm;寬:60cm;},這樣是不是容易理解。

4、ID和CLASS選取器

id只能在頁面中對應一個元素,就像我們的社會安全號碼一樣,每個人的都不一樣;class為類,可以對應多個元素,比如說一年級三班的學生,它所對應的可能是10個20個學生。

id的優先順序高於class,比如說今天三班的學生上體育課,小明留下來打掃衛生。那麼三班的學生上體育課這是一個類,而小明打掃衛生這是個id,雖然小明也是三班的學生,但id高於class,所以小明執行打掃衛生的任務。

相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。