div css布局网页(全过程)

一、创建html模板及文件目录等

1.创建html模板。
　　代码如下：

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

　　将其保存为index.html,并创建文件夹css，images

自由画布

百度文库和百度网盘联合开发的AI创作工具类智能体

73

查看详情

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

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

　　创建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;
}

二、将网站分为五个div，网页基本布局的基础：

1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入：

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;
}

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

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

三、网页布局与div浮动等

1.浮动：首先让边框浮动到主要内容的右边。用css控制浮动。

#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}

2.往主要内容的盒子中写入一些文字。在html文件中写入：

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

　　但是你可以看到主要内容的盒子占据了整个page-container的宽度，我们需要将#content的右边界设为280px。以使其不和边框发生冲突。
　　css代码如下：

#content {
margin-right: 280px;
background: green;
}

　　同时往边框里写入一些文字。在html文件中写入：

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

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

这也不是我们想要的，网站的底框跑到边框的下边去了。这是由于我们将边框向右浮动，由于是浮动，所以可以理解为它位于整个盒子之上的另一层。因此，底框和内容盒子对齐了。
　　因此我们往css中写入：

#footer {
clear: both;
background: orange;
height: 66px;
}

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

四、网页主要框架之外的附加结构的布局与表现

　　除网页主要框架之外的附加结构的表现(Layout),包括以下内容：
　　1.主导航条；
　　2.标题(heading),包括网站名和内容标题；
　　3.内容；
　　4.页脚信息,包括版权,认证,副导航条(可选)。

　　加入这些结构时，为了不破坏原有框架，我们需要在css文件"body"标签(TAG)下加入:

.hidden {
display: none;
}

　　".hidden"即我们加入的类(class),这个类可以使页面上任意属于hidden类的元素(element)不显示。这些会在稍后使用，现在请暂时忘记它。

现在我们加入标题(heading)：
　　先回到HTML的代码，

到

是我们常用的html标题代码。比如我们一般用

网站名

网站副标题

内容主标题

　　刷新一下页面，你就可以看到巨大的标题，和标题周围的空白，这是因为

>标签的默认大小和边距(margin)造成的，先要消除这些空白,需要加入：

h1 {
margin: 0;
padding: 0;
}

接下来是导航条：
　　控制导航条表现的css代码相对比较复杂，我们将在第九步或是第十步中详细介绍。现在html文件加入导航代码：

　　(注：原教程使用了dl和dt，jorux在这使用了更常用的ul和li标签)
　　目前导航条的表现比较糟糕，但是要在以后的教程中介绍其特殊表现，故需要暂时隐藏导航条,于是加入：

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