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的变化,来实现得。

  • 相关阅读:
    前端综合练习与bootstrap
    05-前端之jQuery
    03-初识JavaScript
    02-初识CSS
    01-前端初识和body标签中的相关标签
    程序员笔记
    windows和Ubantu双系统安装图解
    获取http和ftp地址的图片
    HttpHelper类及调用
    简单的SqlHelper
  • 原文地址:https://www.cnblogs.com/zfang/p/2248067.html
Copyright © 2011-2022 走看看