首页 > > 网页制作 > css >

利用Div+CSS整体布局页面的操作流程

2018-06-24 01:39:39来源：未知阅读 ()

　　简单的网页布局（Div+CSS）<CSS盒模型+Div嵌套>：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>新浪网局部布局</title>
  <style>
    *{
     margin: 0px auto;
     padding: 0px;
    }
   .top-nav{
    width: 100%;
    height: 40px;
    background-color:#CCCCCC;
    }
   .container{
    width: 100%;
    border: 1px solid black;
   }
   .content{
    width: 1000px;
    height: 800px;
    border: 1px solid black;
   }
   .logo-banner, .content-nav{
    width: 100%;
    height: 40px;
    border: 1px solid black;
   }
   .logo-left{
    width: 30%;
    height: 40px;
    border: 1px solid black;
    float: left;
   }
   .logo-right{
    width: 30%;
    height: 40px;
    border: 1px solid black;
    float:right;
   }
   .content-nav{
    background-color: darkgreen;
   }
   .content-2{
    width: 60%;
    height: 400px;
    background-color: blueviolet;
    float: left;
   }
   .content-3{
    width: 40%;
    height: 400px;
    background-color:brown;
    float: left;
   }
  </style>
</head>
<body>
   <div class="top-nav"></div>
   <div class="container">
    <div class="content">
     <div class="logo-banner">
      <div class="logo-left"></div>
      <div class="logo-right"></div>
     </div>
     <div class="content-nav"></div>
     <div class="content-1">
      <div class="content-2"></div>
      <div class="content-3"></div>
     </div>
    <div style="clear: both;"></div>
   </div>

   </div>
</body>
</html>