zoukankan      html  css  js  c++  java
  • 自适应布局

    自适应

    <!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" xml:lang="en">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <title>position</title>
      <style type="text/css">
        #wrap {*zoom: 1; position: relative;}
        #sidebar {width: 200px; float: right; border:1px solid #ccc;}
        #content {margin-left: -210px; float: left; width: 100%;}
        #contentb {margin-left: 210px; border: 1px solid #ccc;} 
      </style>
    
    </head>
    <body>
      <div id="wrap">
        <div id="content" style="height:140px;">
          <div id="contentb">
            content自适应区,在前面
          </div>
        </div>
        <div id="sidebar" style="height:240px;">sidebar固定宽度区</div>
      </div>
      <!-- <div id="foooter">后面的一个DIV,以确保前面的定位不会导致后面的变形</div> -->
    </body>
    </html>

    shuangfeiyi.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>固比固解决方案二——双飞翼布局</title>
            <style>
                .left {
                    width: 200px;
                    height: 150px;
                    background-color: red;
                    float: left;
                    margin-left: -100%;
                }
                .right {
                    width: 150px;
                    height: 150px;
                    background-color: green;
                    float: left;
                    margin-left: -150px;
                }
                .middle {
                    width: 100%;
                    height: 150px;
                    background-color: yellow;
                    float: left;
                }
                .m_content {
                    margin-left: 200px;
                    margin-right: 150px;
                    word-break: break-all;
                }
    
            </style>
        </head>
        <body>
            <div class="one">
                <div class="middle">
                    <div class="m_content">
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                        我是菜鸟!work one!
                    </div>
                </div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </body>
    </html>

    shengbei.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>固比固解决方案一——圣杯布局</title>
            <style>
                .left {
                    width: 200px;
                    height: 150px;
                    background-color: red;
                    float: left;
                    margin-left: -100%;
                    position: relative;
                    left: -200px;
                }
                .right {
                    width: 150px;
                    height: 150px;
                    background-color: green;
                    float: left;
                    margin-left: -150px;
                    position: relative;
                    left: 150px;
                }
                .middle {
                    width: 100%;
                    height: 150px;
                    background-color: yellow;
                    float: left;
                }
                .one {
                    padding: 0 150px 0 200px;
                    min-width: 400px;
                }
            </style>
        </head>
        <body>
            <div class="one">
                <div class="middle">
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                    我是菜鸟!
                </div>
                <div class="left"></div>
                <div class="right"></div>
            </div>
        </body>
    </html>

     clear_float1.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>清除浮动一,给孩子添加兄弟,且给clear:both属性</title>
            <style>
                .common {
                    width: 200px;
                    height: 200px;
                    float: left;
                }
                .test1 {
                    background-color: red;
                }
                .test2 {
                    background-color: blue;
                }
                .two {
                    width: 400px;
                    height: 200px;
                    background-color: yellow;
                }
                .clr {
                    clear: both;
                    height: 0;
                    line-height: 0;
                    font-size: 0;
                    display: block;
                    overflow: hidden;
                }
            </style>
        </head>
        <body>
            <div class="one">
                <div class="common test1"></div>
                <div class="common test2"></div>
                <div class="clr"></div>
            </div>
            <div class="two">
            </div>
        </body>
    </html>

    clear_float2.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>清除浮动二,给父亲添加伪元素,且给clear:both属性</title>
            <style>
                .common {
                    width: 200px;
                    height: 200px;
                    float: left;
                }
                .test1 {
                    background-color: red;
                }
                .test2 {
                    background-color: blue;
                }
                .two {
                    width: 450px;
                    height: 200px;
                    background-color: yellow;
                }
                /*给父元素的后面添加子元素,后使用clear: both属性*/
                .clearfix:after {
                    content:".";
                    display:block;
                    height:0;
                    visibility:hidden;
                    clear:both;
                }
                .clearfix {
                    zoom:1;
                }
            </style>
        </head>
        <body>
            <div class="one clearfix">
                <div class="common test1"></div>
                <div class="common test2"></div>
            </div>
            <div class="two">
            </div>
        </body>
    </html>

    clear_float3.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>清除浮动三,给父亲添加闭合伪元素,且给clear:both属性</title>
            <style>
                .common {
                    width: 200px;
                    height: 200px;
                    float: left;
                }
                .test1 {
                    background-color: red;
                }
                .test2 {
                    background-color: blue;
                }
                .two {
                    width: 450px;
                    height: 200px;
                    background-color: yellow;
                }
                /*给父元素的两边都添加子元素,后使用clear: both属性*/
                .clearfix:before, .clearfix:after {
                    content: " ";
                    display: table;
                }
                .clearfix:after {
                    clear: both;
                }
                .clearfix {
                    zoom:1;
                }
            </style>
        </head>
        <body>
            <div class="one clearfix">
                <div class="common test1"></div>
                <div class="common test2"></div>
            </div>
            <div class="two">
            </div>
        </body>
    </html>
  • 相关阅读:
    python3之微信文章爬虫
    selenium不提供修改请求headers、获取响应headers的功能
    dos/bat/cmd相关知识的三个层面
    python处理xml的常用包(lib.xml、ElementTree、lxml)
    python列表操作总结
    从哪些层面评价编程语言
    Windows环境下python多版本配置方案
    一个urllib2构建的html下载器的代理组件的实现方案
    python-selenium实现的简易下载器,并常见错误解决
    python环境配置selenium与IE、Chrome、Firefox、PhantomJS
  • 原文地址:https://www.cnblogs.com/yhdsir/p/4750140.html
Copyright © 2011-2022 走看看