| 導購 | 订阅 | 在线投稿
分享
 
 
 

CSS教程:十步學會用css建站(1)

來源:互聯網  2008-12-15 07:35:10  評論

本篇已得到原作者 Steve Dennis 的翻譯准予,在此Jorux表示感謝!

本教程主要參考 Creating aCSS Layout from scratch ,由Jorux翻譯,以意譯爲主,其間加入了不少Jorux的個人觀點,省略了一些多余的說明,請讀者明鑒。

規劃網站

首先需要規劃網站,本教程將以下圖爲例構建網站。

CSS教程:十步學會用css建站(1)

圖1

其基本布局見下圖:

CSS教程:十步學會用css建站(1)

圖2

主要由五個部分構成:

1. Main Navigation 導航條,具有按鈕特效。

Width: 760px Height: 50px

2. Header 網站頭部圖標,包含網站的logo和站名。

Width: 760px Height: 150px

3. Content 網站的主要內容。

Width: 480px Height: Changes depending on content

4. Sidebar 邊框,一些附加信息。

Width: 280px Height: Changes depending on

5. Footer 網站底欄,包含版權信息等。

Width: 760px Height: 66px

1.創建html模板及文件目錄等

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<title>CompanyName - PageName</title>

<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />

<meta name="MSSmartTagsPReventParsing" content="true" />

<meta name="description" content="Description" />

<meta name="keyWords" content="Keywords" />

<meta name="author" content="Enlighten Designs" />

<style type="text/css" media="all">@import "css/master.css";</style>

</head>

<body>

</body>

</html>

將其保存爲index.html,並創建文件夾css,images,網站結構如下:

CSS教程:十步學會用css建站(1)

圖3

2.創建網站的大框:

建立一個寬760px的盒子,它將包含網站的所有元素。

在html文件的<body>和</body>之間寫入

<div id="page-container">

Hello world.

</div>

創建css文件,命名爲master.css,保存在/css/文件夾下。寫入:

#page-container {

width: 760px;

background: red;

}

控制html的id爲page-container的盒子的寬爲760px,背景爲紅色,表現如下。

CSS教程:十步學會用css建站(1)

圖4

現在爲了讓盒子居中,寫入margin: auto;,使css文件爲:

#page-container {

width: 760px;

margin: auto;

background: red;

}

現在你可以看到盒子和浏覽器的頂端有8px寬的空隙。這是由于浏覽器的默認的填充和邊界造成的。消除這個空隙,就需要在css文件中寫入:

html, body {

margin: 0;

padding: 0;

}

將網站分爲五個div

1.將"第一步"提到的五個部分都放入盒子中,在html文件中寫入:

<div id="page-container">

<div id="main-nav">Main Nav</div>

<div id="header">Header</div>

<div id="sidebar-a">Sidebar A</div>

<div id="content">Content</div>

<div id="footer">Footer</div>

</div>

表現如下:

CSS教程:十步學會用css建站(1)

圖5

2.爲了將五個部分區分開來,我們將這五個部分用不同的背景顔色標示出來,在css文件寫入:

#main-nav {

background: red;

height: 50px;

}

#header {

background: blue;

height: 150px;

}

#sidebar-a {

background: darkgreen;

}

#content {

background: green;

}

#footer {

background: orange;

height: 66px;

}

表現如下:

CSS教程:十步學會用css建站(1)

圖6

網頁布局與div浮動等

1.浮動:首先讓邊框浮動到主要內容的右邊。用css控制浮動。

#sidebar-a {

float: right;

width: 280px;

background: darkgreen;

}

表現如下:

CSS教程:十步學會用css建站(1)

圖7

2.往主要內容的盒子中寫入一些文字。在html文件中寫入:

<div id="content">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.

Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.

Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus

euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.

Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,

purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.

</div>

表現如下:

CSS教程:十步學會用css建站(1)

圖8

但是你可以看到主要內容的盒子占據了整個page-container的寬度,我們需要將#content的右邊界設爲280px。以使其不和邊框發生沖突。

css代碼如下:

#content {

margin-right: 280px;

background: green;

}

同時往邊框裏寫入一些文字。在html文件中寫入:

<div id="sidebar-a">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.

Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.

Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus

euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.

Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,

purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.

</div>

表現如下:

CSS教程:十步學會用css建站(1)

圖9

這也不是我們想要的,網站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動,由于是浮動,所以可以理解爲它位于整個盒子之上的另一層。因此,底框和內容盒子對齊了。

因此我們往css中寫入:

#footer {

clear: both;

background: orange;

height: 66px;

}

表現如下:

CSS教程:十步學會用css建站(1)

圖10

網頁主要框架之外的附加結構的布局與表現

除網頁主要框架之外的附加結構的表現(Layout),包括以下內容:

1. 主導航條;

2. 標題(heading),包括網站名和內容標題;

3. 內容;

4. 頁腳信息,包括版權,認證,副導航條(可選)。

加入這些結構時,爲了不破壞原有框架,我們需要在css文件"body"標簽(TAG)下加入:

.hidden {

display: none;

}

".hidden"即我們加入的類(class),這個類可以使頁面上任意屬于hidden類的元素(element)不顯示。這些會在稍後使用,現在請暫時忘記它。

現在我們加入標題(heading):

先回到HTML的代碼,<h1>到<h6>是我們常用的html標題代碼。比如我們一般用<h1>網站名 </h1>,<h2>網站副標題</h2>,<h3>內容主標題</h3>等。我們往 html文件的Header層(Div)加入:

<div id="header">

<h1>Enlighten Designs</h1>

</div>

刷新一下頁面,你就可以看到巨大的標題,和標題周圍的空白,這是因爲<h1>>標簽的默認大小和邊距(margin)造成的,先要消除這些空白,需要加入:

h1 {

margin: 0;

padding: 0;

}

接下來是導航條:

控制導航條表現的css代碼相對比較複雜,我們將在第九步或是第十步中詳細介紹。現在html文件加入導航代碼:

<div id="main-nav">

<ul>

<li id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></li>

<li id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></li>

<li id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></li>

<li id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></li>

</ul>

</div>

(注:原教程使用了dl和dt,jorux在這使用了更常用的ul和li標簽)

目前導航條的表現比較糟糕,但是要在以後的教程中介紹其特殊表現,故需要暫時隱藏導航條,于是加入:

<div id="main-nav">

<dl class="hidden">

<dt id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></dt>

<dt id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></dt>

<dt id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></dt>

<dt id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></dt>

</dl>

</div>

  本篇已得到原作者 Steve Dennis 的翻譯准予,在此Jorux表示感謝!   本教程主要參考 Creating aCSS Layout from scratch ,由Jorux翻譯,以意譯爲主,其間加入了不少Jorux的個人觀點,省略了一些多余的說明,請讀者明鑒。   規劃網站   首先需要規劃網站,本教程將以下圖爲例構建網站。 [url=/bbs/detail_1886971.html][img]http://image.wangchao.net.cn/it/1323256229144.jpg[/img][/url] 圖1   其基本布局見下圖: [url=/bbs/detail_1886971.html][img]http://image.wangchao.net.cn/it/1323256229429.jpg[/img][/url] 圖2   主要由五個部分構成:   1. Main Navigation 導航條,具有按鈕特效。   Width: 760px Height: 50px   2. Header 網站頭部圖標,包含網站的logo和站名。   Width: 760px Height: 150px   3. Content 網站的主要內容。   Width: 480px Height: Changes depending on content   4. Sidebar 邊框,一些附加信息。   Width: 280px Height: Changes depending on   5. Footer 網站底欄,包含版權信息等。   Width: 760px Height: 66px   1.創建html模板及文件目錄等   代碼如下:   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html>   <head>   <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />   <title>CompanyName - PageName</title>   <meta http-equiv="Content-Language" content="en-us" />   <meta http-equiv="imagetoolbar" content="no" />   <meta name="MSSmartTagsPReventParsing" content="true" />   <meta name="description" content="Description" />   <meta name="keyWords" content="Keywords" />   <meta name="author" content="Enlighten Designs" />   <style type="text/css" media="all">@import "css/master.css";</style>   </head>   <body>   </body>   </html>   將其保存爲index.html,並創建文件夾css,images,網站結構如下: [url=/bbs/detail_1886971.html][img]http://image.wangchao.net.cn/it/1323256229639.gif[/img][/url] 圖3   2.創建網站的大框:   建立一個寬760px的盒子,它將包含網站的所有元素。   在html文件的<body>和</body>之間寫入   <div id="page-container">   Hello world.   </div>   創建css文件,命名爲master.css,保存在/css/文件夾下。寫入:   #page-container {   width: 760px;   background: red;   }   控制html的id爲page-container的盒子的寬爲760px,背景爲紅色,表現如下。 [url=/bbs/detail_1886971.html][img]http://image.wangchao.net.cn/it/1323256229702.jpg[/img][/url] 圖4   現在爲了讓盒子居中,寫入margin: auto;,使css文件爲:   #page-container {   width: 760px;   margin: auto;   background: red;   }   現在你可以看到盒子和浏覽器的頂端有8px寬的空隙。這是由于浏覽器的默認的填充和邊界造成的。消除這個空隙,就需要在css文件中寫入:   html, body {   margin: 0;   padding: 0;   }   將網站分爲五個div   1.將"第一步"提到的五個部分都放入盒子中,在html文件中寫入:   <div id="page-container">   <div id="main-nav">Main Nav</div>   <div id="header">Header</div>   <div id="sidebar-a">Sidebar A</div>   <div id="content">Content</div>   <div id="footer">Footer</div>   </div>   表現如下: [url=/bbs/detail_1886971.html][img]http://image.wangchao.net.cn/it/1323256229758.gif[/img][/url] 圖5   2.爲了將五個部分區分開來,我們將這五個部分用不同的背景顔色標示出來,在css文件寫入:   #main-nav {   background: red;   height: 50px;   }   #header {   background: blue;   height: 150px;   }   #sidebar-a {   background: darkgreen;   }   #content {   background: green;   }   #footer {   background: orange;   height: 66px;   }   表現如下: [url=/bbs/detail_1886971.html][img]http://image.wangchao.net.cn/it/1323256229828.gif[/img][/url] 圖6   網頁布局與div浮動等   1.浮動:首先讓邊框浮動到主要內容的右邊。用css控制浮動。   #sidebar-a {   float: right;   width: 280px;   background: darkgreen;   }   表現如下: [url=/bbs/detail_1886971.html][img]http://image.wangchao.net.cn/it/1323256229915.gif[/img][/url] 圖7   2.往主要內容的盒子中寫入一些文字。在html文件中寫入:   <div id="content">   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.   Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.   Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus   euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.   Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,   purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.   </div>   表現如下: [url=/bbs/detail_1886971.html][img]http://image.wangchao.net.cn/it/1323256229943.gif[/img][/url] 圖8   但是你可以看到主要內容的盒子占據了整個page-container的寬度,我們需要將#content的右邊界設爲280px。以使其不和邊框發生沖突。   css代碼如下:   #content {   margin-right: 280px;   background: green;   }   同時往邊框裏寫入一些文字。在html文件中寫入:   <div id="sidebar-a">   Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.   Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.   Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus   euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.   Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,   purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.   </div>   表現如下: [url=/bbs/detail_1886971.html][img]http://image.wangchao.net.cn/it/1323256230006.gif[/img][/url] 圖9   這也不是我們想要的,網站的底框跑到邊框的下邊去了。這是由于我們將邊框向右浮動,由于是浮動,所以可以理解爲它位于整個盒子之上的另一層。因此,底框和內容盒子對齊了。   因此我們往css中寫入:   #footer {   clear: both;   background: orange;   height: 66px;   }   表現如下: [url=/bbs/detail_1886971.html][img]http://image.wangchao.net.cn/it/1323256230115.gif[/img][/url] 圖10   網頁主要框架之外的附加結構的布局與表現   除網頁主要框架之外的附加結構的表現(Layout),包括以下內容:   1. 主導航條;   2. 標題(heading),包括網站名和內容標題;   3. 內容;   4. 頁腳信息,包括版權,認證,副導航條(可選)。   加入這些結構時,爲了不破壞原有框架,我們需要在css文件"body"標簽(TAG)下加入:   .hidden {   display: none;   }   ".hidden"即我們加入的類(class),這個類可以使頁面上任意屬于hidden類的元素(element)不顯示。這些會在稍後使用,現在請暫時忘記它。   現在我們加入標題(heading):   先回到HTML的代碼,<h1>到<h6>是我們常用的html標題代碼。比如我們一般用<h1>網站名 </h1>,<h2>網站副標題</h2>,<h3>內容主標題</h3>等。我們往 html文件的Header層(Div)加入:   <div id="header">   <h1>Enlighten Designs</h1>   </div>   刷新一下頁面,你就可以看到巨大的標題,和標題周圍的空白,這是因爲<h1>>標簽的默認大小和邊距(margin)造成的,先要消除這些空白,需要加入:   h1 {   margin: 0;   padding: 0;   }   接下來是導航條:   控制導航條表現的css代碼相對比較複雜,我們將在第九步或是第十步中詳細介紹。現在html文件加入導航代碼:   <div id="main-nav">   <ul>   <li id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></li>   <li id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></li>   <li id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></li>   <li id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></li>   </ul>   </div>   (注:原教程使用了dl和dt,jorux在這使用了更常用的ul和li標簽)   目前導航條的表現比較糟糕,但是要在以後的教程中介紹其特殊表現,故需要暫時隱藏導航條,于是加入:   <div id="main-nav">   <dl class="hidden">   <dt id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></dt>   <dt id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></dt>   <dt id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></dt>   <dt id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></dt>   </dl>   </div>
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有