网站布局基础写法

时间：2015-06-05 11:08:37 　来源：免费模板网　作者：风雪　阅读次数　tags布局

给你一张网站的PSD图片，你要怎么做成网站呢，首先就得想网站怎么布局，上中下结构还是左右，都是从基础一点点的加，下面是布局基础，初学者可以多实践实践

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>

表现如下：

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