正在阅读：CSS教程：十步学会用css建站CSS教程：十步学会用css建站

2008-12-09 09:59 出处：作者：中国教程网 Jorux 责任编辑：zengxiaolan

　　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建站
图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建站
图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建站
图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;
　　}