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>

  • 相关阅读:
    【转】TCP协议的无消息边界问题
    【转】Log4net用法
    【转】微信公众账号 Senparc.Weixin.MP SDK 开发教程 索引
    关于Asp.Net MVC 中 UpdateModel 的未能更新***模型的 解决方案!
    批准加强军队信息安全工作意见
    iOS--开发从入门到精通
    iOS-开发者账号与证书
    iOS--高级技术
    iOS-----App闪退,程序崩溃---解决方案
    iOS-运行时机制
  • 原文地址:https://www.cnblogs.com/jly144000/p/7203073.html
Copyright © 2011-2022 走看看