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>
  • 相关阅读:
    Java面试题集（七）--Spring常见面试问题【重要】
    Java面试题集（六）
    qt4.8.4安装以及64位程序编译方法
    页面跳转动画设置方法
    Lua环境配置 windows + VS
    Oracle触发器(trigger):view,schema,database
    java课程设计（计算器）
    数据结构 练习 19-活动选择问题的实现（动态规划 和 贪心）
    网页在Safari快速滚动和回弹的原理： -webkit-overflow-scrolling : touch;的实现
    如何打开Nib文件
  • 原文地址：https://www.cnblogs.com/wudingfeng/p/1606309.html
Copyright © 2011-2022 走看看