div+css完成首页布局

浏览数：31 / 时间：2015年06月09日

要完成一个简单的网站首页并不难，我们只要寻找到方法便很容易，完成一个简单的网站首页我们只要将整体的首页布局用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>

那么效果呢就是以下图片所呈现的了：

现在呢已经有三大块了，接下来我们再看下我们要做的首页，三大块中间的一块被分成了两块，两块中的左边一块又被分成了四块：

那么我们就开始实现这几块div，看下效果：

好了，初步的效果已经有了，那么可以看到我们这个并没有在浏览器居中显示而是靠左边的，如果我们用偏移也是可以做到居中的，但是如果换一台电脑或换一个浏览器也许就不是居中了，那么怎么做到居中呢，我们可以用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>