zoukankan      html  css  js  c++  java
  • 利用Div+CSS整体布局页面的操作流程

      简单的网页布局(Div+CSS)<CSS盒模型+Div嵌套>:

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

  • 相关阅读:
    谁把天才变成了魔兽
    NetBeans 时事通讯(刊号 # 35 Nov 20, 2008)
    Java Annotation 手册
    《程序设计实践》读书笔记一
    5分钟让你明白金融危机爆发原因
    NetBeans 6.5 正式版可以下载了!
    Java Annotation 入门
    有关睡觉的学问
    oracle sql日期比较:
    C++编写安全OCX,IE不弹出安全提示
  • 原文地址:https://www.cnblogs.com/jly144000/p/7203073.html
Copyright © 2011-2022 走看看