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

本篇已得到原作者 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>

CSS教程:十步學會用css建站(1)
CSS教程:十步學會用css建站(1)
  本篇已得到原作者 Steve Dennis 的翻譯准予,在此Jorux表示感謝!  本教程主要參考 Creating aCSS Layout from scratch ,由Jorux翻譯,以意譯爲主,其間加入了不少Jorux的個人觀點,省略了一些多余的說明,請...查看完整版>>CSS教程:十步學會用css建站(1)
 
web標准建站:CSS入門教程
  CSS是“Cascading Style Sheets”的簡稱,中文翻譯爲“串接樣式表”,也有人翻譯 爲“樣式表”。CSS用以作爲網頁的排版和風格設計,在web標准建站中,對CSS的熟悉和使用 是相當重要的一個內容。CSS的作用是彌補H...查看完整版>>web標准建站:CSS入門教程
 
web標准建站:CSS入門教程
CSS是“Cascading Style Sheets”的簡稱,中文翻譯爲“串接樣式表”,也有人翻譯 爲“樣式表”。CSS用以作爲網頁的排版和風格設計,在web標准建站中,對CSS的熟悉和使用 是相當重要的一個內容。CSS的作用是彌補HTML的...查看完整版>>web標准建站:CSS入門教程
 
web標准建站:CSS入門教程
  原創教程,轉載請注明出處:  CSS是“Cascading Style Sheets”的簡稱,中文翻譯爲“串接樣式表”,也有人翻譯 爲“樣式表”。CSS用以作爲網頁的排版和風格設計,在web標准建站中,對CSS的熟悉和使用 是相當重...查看完整版>>web標准建站:CSS入門教程
 
Web標准建站教程7-CSS入門
在了解XHTML代碼規範後,我們就要進行CSS布局。首先先介紹一些CSS的入門知識。如果你已經很熟悉了,可以跳過這一節,CSS是Cascading Style Sheets(層疊樣式表)的縮寫。是一種對web文檔添加樣式的簡單機制,屬于表現層...查看完整版>>Web標准建站教程7-CSS入門
 
Web標准建站教程9-第一個CSS布局實例
接下來開始要真正設計布局了。和傳統的方法一樣,你首先要在腦海裏有大致的輪廓構想,然後用photoshop把它畫出來。你可能看到有關web標准的站點大都很樸素,因爲web標准更關注結構和內容,實際上它與網頁的美觀沒有根...查看完整版>>Web標准建站教程9-第一個CSS布局實例
 
Web標准建站教程8-CSS布局入門
CSS布局與傳統表格(table)布局最大的區別在于:原來的定位都是采用表格,通過表格的間距或者用無色透明的GIF圖片來控制文布局版塊的間距;而現在則采用層(div)來定位,通過層的margin,padding,border等屬性來控制版塊...查看完整版>>Web標准建站教程8-CSS布局入門
 
XHTML+CSS建站如何調用樣式表-css設計
WEB標准設計網站,方法主要是采用XHTML+CSS,CSS樣式表是必不可少的。要制作符合web標准的網站,不懂CSS是設計不出漂亮的頁面的。事實上,所有表現的地方都需要用CSS來實現。我們以前都習慣用table來定位和布局,現在...查看完整版>>XHTML+CSS建站如何調用樣式表-css設計
 
新手建站需要學會哪七種武器
  筆者在站長的生涯中算不少老鳥,最多算作剛入門的新手,也許正是因爲新手才更容易了解新手的缺陷在哪裏,需要學會哪些知識才能夠遊刃有余,下面我就結合自己的建站經曆跟大家總結一下新站長必學的建站之七種武器...查看完整版>>新手建站需要學會哪七種武器
 
 
回到王朝網路移動版首頁