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>

  • 相关阅读:
    SQL Server 数据类型映射 (ADO.NET)
    微软SQLHelper.cs类 中文版
    在WinForm中使用Web Service来实现软件自动升级
    Winform开发框架之通用自动更新模块(转)
    C# winform 最小化到电脑右下角
    3层数据访问架构(部分)
    Castle ActiveRecord学习实践
    .Net下的 ORM框架介紹
    配置企业库5.0管理
    一个简洁通用的调用DLL函数的帮助类
  • 原文地址:https://www.cnblogs.com/jly144000/p/7203073.html
Copyright © 2011-2022 走看看