只要十步就能學會用CSS建設網站 CSS建站的十個步驟(圖文教程)

2024-07-11 08:25:54

字體：大中小

來源：轉載

供稿：網友

第一步：規(guī)劃網站，本教程將以圖示為例構建網站
1.規(guī)劃網站，本教程將以下圖為例構建網站。
其基本布局見下圖：
CSS實例教程：十步學會用CSS建站錯新站長站

主要由五個部分構成：
CSS實例教程：十步學會用CSS建站

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
第二步：創(chuàng)建html模板及文件目錄等 1.創(chuàng)建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,并創(chuàng)建文件夾css，images，網站結構如下：

CSS實例教程：十步學會用CSS建站

2.創(chuàng)建網站的大框，即建立一個寬760px的盒子，它將包含網站的所有元素。
在html文件的<body>和</body>之間寫入

<div id="page-container">
Hello world.
</div>
創(chuàng)建css文件，命名為master.css,保存在/css/文件夾下。寫入：

#page-container {
width: 760px;
background: red;
}
控制html的id為page-container的盒子的寬為760px，背景為紅色。表現(xiàn)如下：
CSS實例教程：十步學會用CSS建站