css+div十步建站（一二步）_html/css_WEB-ITnose

第一步：规划网站，本教程将以图示为例构建网站；

基本布局

规划网主要由五个部分构成

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 content

5.Footer 网站底栏，包含版权信息等。

Width: 760px Height: 66px。

第二步：创建html模板及文件目录等；

立即学习“前端免费学习笔记（深入）”；

1.br />”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

@import “css/master.css”;

将其保存为index.html,并创建文件夹css，images，网站结构如下

2.创建网站的大框，即建立一个宽760px的盒子，它将包含网站的所有元素。

在html文件的

和之间写入

Hello world.

创建css文件，命名为master.css,保存在/css/文件夹下。写入：

#page-container {
width: 760px;
background: red;
} 

控制html的id为page-container的盒子的宽为760px，背景为红色。表现如下

现在为了让盒子居中，写入margin: auto;，使css文件为：

#page-container {
width: 760px;
margin: auto;
background: red;
} 

现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入：

html, body {
margin: 0;
padding: 0;
}