• 网页布局基础 第三次(浮动布局)


    清楚浮动

    清除浮动的方法:
    对受到影响的元素设置如下属性
    1、为元素设置clear属性——clear:both;、clear:left;或者clear:right;
    2、同时设置100%(或固定宽度【固定宽度可能有问题】)+overflow:hidden;
    2的width设置为100%就是继承父容器的宽度。左右撑满整个容器,为自己清除浮动创建条件。再加溢出隐藏,就可以把包裹浮动的部分去除。

    横向两列布局的实现:这是网页布局最常见的方式之一
    主要应用技能:
    float属性——使纵向排列的块级元素,横向排列
    margin属性——设置两列之间的间距

    clear:both,主要用于对紧邻其后元素的清除浮动;
    width:100%;overflow:hidden,主要用于浮动对父包含块的影响

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0;
    }
    #wrap {
        background:#00C;
        margin:0 auto;
        width:960px;
    }
    #header {
        background:#FF3300;
        width:100%;
    }
    #mainbody {
            background:#FC0;
            width:100%;
            overflow:hidden;
    }
    .left {
        width:800px;
        height:200px;
        background:#000;
        float:left;
    }
    .right {
    width:140px;
    height:500px;
    background:#690;
    float:right;;
    }
    #footer {
        background:#639;
        width:100%;
    }
    </style>
    </head>
    
    <body>
    <div id="wrap">
      <div id="header">头部</div>
      <div id="mainbody">
        <div class="left">左边</div>
        <div class="right">右边</div>
      </div>
      <div id="footer">版权部分</div>
    </div>
    </body>
    </html>
    View Code

  • 相关阅读:
    第十二篇 -- 如何向MFC对话框添加菜单
    第十一篇 -- 如何实现MFC窗口的最大化以及控件随最大化
    第二十三篇 -- 学习第二十四天打卡20190715
    第十篇 -- 学习C++宝典2005版
    第二十二篇 -- 学习第二十一天打卡20190711
    修改nginx日志格式为json
    centos7 脚本搭建SVN
    jenkin、SVN、archery集成openLDAP
    centos搭建OPENldap
    matomo 开源网站分析平台
  • 原文地址:https://www.cnblogs.com/XDJjy/p/4670717.html
Copyright © 2020-2023  润新知