zoukankan      html  css  js  c++  java
  • DIV+CSS布局示例

    第一种:左菜单右边内容自动变宽的布局

    Code
    Code

    第二种,页宽度固定,分栏显示内容

    <style type="text/css">
         body
    { text-align:center; padding:0px; margin:5px; border:0px;}
        .topWrap
    { overflow:hidden; padding:5px 0px 0px 0px; background:#ccc;}
        .headerBox
    { margin:0px auto; width:950px; background-color:#aaa; height:30px;}
        .banner
    {margin:0px auto; width:950px; background-color:#888; height:80px;}
        .wrap
    { margin:0px auto; width:950px; padding:1px 0px 0px 0px; background:#000;}
        .p_1
    { overflow:hidden; text-align:left; margin-bottom:1px;}
        .p_1 .p_l_left
    { width:340px; background-color:#ff0000; float:left;}
        .p_1 .p_1_middle
    { width:340px; background-color:#00ff00; float:left; margin-left:10px;}
        .p_1 .p_1_right
    { width:250px; background-color:#0000ff; float:left; margin-left:10px;}
        </style>
    Code
    <body>
        
    <form id="form1" runat="server">
        
    <div class="topWrap">
        
    <div class="headerBox">header</div>
        
    <div class="banner">banner</div>
        
    </div>
        
    <div class="wrap">
        
    <div class="p_1">
        
    <div class="p_l_left">
        
    <div style=" height:30px;">Left</div>
        
    </div>
        
    <div class="p_1_middle">
        
    <div style=" height:50px;">
        Right
        
    </div>
        
    </div>
        
    <div class="p_1_right">
        
    <div style=" height:80px;">Right</div>
        
    </div>
        
    </div>
        
    </div>
        
        
    </form>
    </body>
  • 相关阅读:
    如何用redis/memcache做Mysql缓存层?
    孤儿进程和僵尸进程总结
    二叉树的遍历(非递归)
    Linux进程分配内存的两种方式--brk() 和mmap()
    Hbase
    cgroup 分析之CPU和内存部分
    十道海量数据处理面试题与十个方法大总结
    快速定位性能瓶颈,检查出所有资源(CPU、内存、磁盘IO等)的利用率(utilization)、饱和度(saturation)和错误(error)度量,即USE方法
    红黑树
    tcp 两个重要窗口:滑动窗口 和 拥塞窗口
  • 原文地址:https://www.cnblogs.com/wudingfeng/p/1606309.html
Copyright © 2011-2022 走看看