DIV+CSS实现网页布局实例代码(1)

网络整理 - 07-27

我们将通过一个代码实例实现网页布局,具体效果如图:

本文我们只是简单的实现了页面的布局。在下一文中我们将完成整个页面。

本文代码如下: 

<html>
<head>
 <title>div+css实现网页布局实例代码</title>

<style>
<!--
 body{
  margin:0px;
  text-align:center;
  background:#ffffcc;
 } 

 #container {
  width:800px;
  height:1000px;
  margin:auto 0px;
 }

 #header {
          float:left;
           width:800px;
           height: 100px;
         margin:auto 0px;
            background:red;
          clear:both;
       
 }

 #logo {
  float:left;
  width:250px;
  height:90px;
  background:green;
  clear:right;
   margin:opx;
 }

 #banner{
  float:right;
  width:540px;
  height:90px;
  margin:0px;
  clear:left;
  background:blue;
 }
 
 #menu {
    width:800px;
     height:35px;
     margin:auto 0px;
   clear: both;
 
 }
 
 
 .nav {
 margin:auto 0px;
  width:800px;
  height:10px;
   clear:both;
   background:#ffffff;
    line-height:10px;
 }

 .nav_a {
 float:left;
 margin:0px;
  width:610px;
   height:10px;
   clear:both;
   background:#ffffff;
    line-height:10px;
 }
 
 .left_main {
   margin:0px;
   float:left;
   width:610px;
   height:420px;
   background:red;

 }

 .right_main{
  margin:0px;
  float:right;
  width:180px;
  height:420px;
  background:green;
  clear:left;
 }

 .left_a {
  margin:0px;
  float:left;
  width:300px;
  height:205px;
  background:blue;

 }


 .left_b {
  margin:0px;
  float:right;
  width:300px;
  height:205px;
  background:blue;
  clear:left;
 }
 
 .con {
  margin:auto 0px;
   width:800px;
   height:200px;
  background:green;
  clear:both; 
 
 }
 
 .one {
  float:left;
  width:200px;
  height:200px;
  background:#ff99f0;
  clear:right;
 }

  .two{
  float:left;
  width:200px;
  height:200px;
  background:#ffcc00;
 }

  .three {
  float:left;
  width:200px;
  height:200px;
  background:#0ffff0;
 }

 .four {
  float:right;
  width:190px;
  height:200px;
  background:#f0fff0;
 }

 #footer {
  width:800px;
  height:100px;
  background:red;
  margin:auto 0px;
  padding-top: 30px;
  color: #ffffff;
 }
//--> 
</style>
</head>


<body>
<div  id="container" >
 <div id="header">
  <div id="logo"></div>

  <div id="banner"></div>
 </div>

 <div id="menu"></div>
 <div class="nav">nav</div>
 
 <div class="left_main">
  <div class="left_a"> </div>
  <div class="left_b"></div>

  <div class="nav_a">nav_left</div>

  <div class="left_a"></div>
  <div class="left_b"> </div>
 </div>
 <div class="right_main"></div> 
 <div class="nav">nav</div>


 <div class="con">
  <div class="one"></div>

  <div class="two"> </div>

  <div class="three"> </div>
 
  <div class="four"> </div>

 </div>

<div class="left_main">


  <div class="left_a"></div>
  <div class="left_b"></div>
  <div class="nav_a">nav_left</div>


 </div>


 <div class="right_main"></div> 
 <div class="nav">nav</div>

<div id="footer"></div>


</div>

</body>

</html>