标签：网站首页布局
要完成一个简单的网站首页并不难，我们只要寻找到方法便很容易，完成一个简单的网站首页我们只要将整体的首页布局用div+css写出来然后再填充内容那么一个简单的网站首页便可以完成了，那么我们一步一步来实现他们，首先我们从宏观的角度将首页分成几大块，以下的案例我们将首页分成三大块：
这个首页我们先不管放置大图的部分，我们将这个简单的首页分为三大块，这样我们就需要来一个最大的div包含我们要建立三大块的div，我们将最大的div取名为“container”容器的意思，那么再将其他三个div按照习惯分别取名为header、main、footer：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main"> </div>
<div id="footer"></div>
</div>
</body>
</html>
写好后我们再给这四个div规定大小颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
width: 960px;
background: grey;
}
#header{
height: 120px;
background: orange;
}
#main{
height: 720px;
background: green;
}
#lside{
width: 780px;
height: 720px;
}
#footer{
height: 120px;
background: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
那么效果呢就是以下图片所呈现的了：
现在呢已经有三大块了，接下来我们再看下我们要做的首页，三大块中间的一块被分成了两块，两块中的左边一块又被分成了四块：
好了，初步的效果已经有了，那么可以看到我们这个并没有在浏览器居中显示而是靠左边的，如果我们用偏移也是可以做到居中的，但是如果换一台电脑或换一个浏览器也许就不是居中了，那么怎么做到居中呢，我们可以用margin中特殊的一个属性，我们来看下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
width: 960px;
background: grey;
margin:0 auto;
}
#header{
height: 120px;
background: orange;
}
#main{
height: 720px;
background: green;
}
#lside{
float: left;
width: 780px;
height: 720px;
background:pink;
}
.four{
width: 300px;
height: 300px;
background: white;
margin: 10px;
float: left;
padding: 20px;
}
#rside{
float: right;
width: 180px;
height: 720px;
background: purple;
}
#footer{
height: 120px;
background: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="lside">
<div class="four">当面对两个选择时，抛硬币总能奏效，因为在你把它抛在空中的那一秒里，你突然知道你希望它是什么。</div>
<div class="four">当面对两个选择时，抛硬币总能奏效，因为在你把它抛在空中的那一秒里，你突然知道你希望它是什么。</div>
<div class="four">当面对两个选择时，抛硬币总能奏效，因为在你把它抛在空中的那一秒里，你突然知道你希望它是什么。</div>
<div class="four">当面对两个选择时，抛硬币总能奏效，因为在你把它抛在空中的那一秒里，你突然知道你希望它是什么。</div>
</div>
<div id="rside"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
好，经过调整和居中，那么再来看下我们现在的效果：
好了，现在我们的简单的一个网站首页的布局就差不多完成，之后就添加内容等等...
本文出自 “别闹好好的” 博客，谢绝转载！
标签：网站首页布局
原文地址：http://716870410.blog.51cto.com/9389474/1557168
