发布日期:2007-10-07 15:38 来源: 标签: css 网站 布局 之十 实录 第三步
第三步:将网站分为五个div,网页基本布局的基础: 1.将第一步提到的五个部分都放入盒子中,在html文件中写入: Example Source Code [ divid=page-container divid=main-navMainNav/div divid=headerHeader/div divid=sidebar-aSidebarA/div divid=contentC

第三步:将网站分为五个div,网页基本布局的基础:

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

Example Source Code [

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


2.为了将五个部分区分开来,我们将这五个部分用不同的背景颜色标示出来,在css文件写入:

div css xhtml xml Example Source Code Example Source Code
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}


  表现如下:

本文作者:

相关评论

专题信息
    如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性。CSS最主要的目的是将文件的内容与显示分隔开来,有着许多的好处。如果你是初学者,那么就从我们的 CSS 入门基础教程开始吧,相信您肯定会受益良多的。