zoukankan      html  css  js  c++  java
  • 131固定两边,变化中间

    这里要实现得是,两边固定不变,变化中间的效果

    实现代码如下:

    <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">
    #header,#content,#footer{
     background-color:#ccc;
     border:1px solid #00C;
     height:50px;
     80%;
     margin:10px auto;
    }
    #content{
     height:500px;
    }
    #left{
     height:500px;
     100px;
     float:left;
     border:solid 1px #FF0;
     background-color:#0C3;
    }
    #right{
     height:500px;
     100px;
     float:right;
     border:solid 1px #060;
     background-color:#c96;
    }
    #cont{
     height:500px;
     100%;
     float:left;
     margin-left:-208px;
     overflow:hidden;
    }
    #varcont{
     height:500px;
     border:1px solid #000;
     margin-left:208px;
     background-color:#CC3;
    }
    </style>
    </head>

    <body>
    <div id="header"><h3>1-3-1(2)</h3></div>

    <div id="content">
        <div id="left"> </div>
         <div id="cont"><div id="varcont"></div></div>
        <div id="right">
     sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs sddfsfd sdfs sd sdksd skdfjksd sd dfdf dfdkfdf dsdfs
        </div>
    </div>
    <div id="footer"></div>
    </body>
    </html>

    其实实现这一效果主要是利用调整 margin的变化,来实现得。

  • 相关阅读:
    python-web微信实现
    Python---BeautifulSoup模块
    Python—requests模块详解
    KindEditor编辑器
    Django实现瀑布流,组合搜索
    利用(CMD)在Django中创建文件
    ppt插入声音
    高性能mysql 第1,2,3章。
    mysql复制
    最长DNA重复序列长度,并输出该序列。 JAVA
  • 原文地址:https://www.cnblogs.com/zfang/p/2248067.html
Copyright © 2011-2022 走看看