zoukankan      html  css  js  c++  java

  • DIV仿框架布局

    做了几天,勉强兼容了FF,IE6,7,8几大浏览器.IE7有些地方还有些瑕疵,看来还得补习一下基础.

    补充:页面在1024x768分辨率以上时都是显示全部的(如图).只有窗口变很小时才会出现导航条.

    因为以下两个原因所以发了上来,希望能得到高人指点:

    1.样式还有点不兼容,IE7里最大化显示还是有空白部分.不清楚怎么出来的.

    2.想实现个效果,当窗口高度减小到一定程度时外框不再缩小,外面出现滚动条.(有点没说明白,就是窗口小的一定高度时不会让iframe也变的很小,脑袋有点乱,这个好像不是很难)

    3.想问问各位,我这水平算是入门级别呢,还是入门高一点.对自己水平不是很了解,找份工作才赚个车费饭费,希望园子里的大哥们别喷,有爱对待.

    这个是效果图:

     

    HTML代码下的图片随便找个

    HTML代码
    <!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>
    </head>
    <link href="CSS/css.css" rel="stylesheet" type="text/css" />
    <body>
            <div class="container">
                <div class="header">
                    <div class="header_top">
                        <div class="logo"><img src="images/logo.jpg" alt="ESD LOGO" width="136" height="82" title="ESD LOGO"/></div>
                        <div class="menu">
                            <ul class="menu_image">
                                <li class="tu"><img src="images/forum_new.gif" /></li>
                                <li class="tu"><img src="images/forum_new.gif" /></li>
                                <li class="tu"><img src="images/forum_new.gif" /></li>
                                <li class="tu"><img src="images/forum_new.gif" /></li>
                                <li class="tu"><img src="images/forum_new.gif" /></li>
                                <li class="tu"><img src="images/forum_new.gif" /></li>
                                <li class="tu"><img src="images/forum_new.gif" /></li>
                            </ul>
                            <ul class="menu_text">
                                <li class="zi">系统设置</li>
                                <li class="zi">用户管理</li>
                                <li class="zi">栏目管理</li>
                                <li class="zi">栏目管理</li>
                                <li class="zi">栏目管理</li>
                                <li class="zi">栏目管理</li>
                                <li class="zi">栏目管理</li>
                             </ul>
                            <div class="clearboth"></div>
                        </div>
                        <div class="person">
                            <ul>
                                <li>2009年11月8日星期三</li>
                                <li>角色：系统管理员</li>
                                <li>用户名：系统管理员 </li>
                            </ul>
                        </div>
                        <div class="state">
                            <p>注销</p>
                        </div>
                        <div class="disappear"></div>
                        <div class="clearboth"></div>
                    </div>
                    <div class="header_bottom">
                        <span class="h_b_left">管理系统</span>
                        <span class="h_b_right">当前版本：1.0</span>
                        <div class="clearboth"></div>
                    </div>
                </div>    
                    <div class="mainer">    
                        <div class="sideleft">
                            <iframe frameborder="0" src="http://www.baidu.com/"></iframe>
                        </div>
                        <div class="sidecenter"><</div>
                        <div class="sideright">
                            <iframe frameborder="0" src="http://www.baidu.com/"></iframe>
                        </div>
                        <div class="clearboth"></div>    
                    </div>     
                <div class="footer">
                    <span>版权所有：Abner</span>
                </div>
            </div>  
    </body>
    </html>

    CSS代码

    CSS代码
    *{
        padding    :0;
        margin    :0;
        list-style    :none;
        
        font-family    :"宋体";
        font-size    :12px;
        font-weight    :normal;
        line-height    :20px;
    }
    html     {
        height    :100%;
    }
    body    {
        background-color    :#ffffff;
        height    :100%;
        width    :expression((documentElement.clientWidth < 1000) ? "1000px" : "auto" ); 
    }
    .clearboth    {
        clear    :both;
    }
    iframe    {
        width    :100%;
        height    :100%;
    }

    .container    {    
        width    :100%;
        height    :100%;
    }

    .header    {
        height    :130px;
        position    :absolute;
        left    :0px;
        top    :0px;
        right    :0px;
        min-width    :980px;
    }
    .header_top    {
        height    :106px;
        background    :#468ab4;
        min-width    :980px;
    }
    .logo    {
        padding    :8px 50px 0 8px;
        float    :left;
        display    :inline;
    }
    .menu    {
        float    :left;
        display    :inline;
        width    :570px;
    }
    .menu_image     {
        float    :left;
        width    :570px;
        margin    :10px 0px 0px 1px;
        padding    :0px;
    }
    .tu     {
        float    :left;
        margin    :0px 20px 0 0;
    }
    .menu_text     {
        float    :left;    
        width    :570px;
    }
    .zi     {
        float    :left;
        font-size    :13px;
        font-weight    :bold;
        width    :60px;
        text-align    :center;
        margin    :0px 20px 0 0;
    }

    .person    {
        float    :left;
        width    :150px;
        display    :inline;
        padding-top    :35px;
    }

    .state    {
        padding    :70px 0 0 0px;
        float    :left;
        width    :50px;    
        display    :inline;
    }
    .state p    {
        font-size    :13px;
        font-weight    :bold;    
    }
    .disappear    {
        visibility    :hidden;
        display    :none;
    }

    .header_bottom     {
        background-color    : #468ab4;
        height    :24px;
        line-height    :24px;
        vertical-align    :middle;
        color    :#FFF;  
        min-width    :980px;
    }
    .h_b_left    {
        float    :left;
        padding-left    :12px;
        
    }
    .h_b_right    {
        float    :right;
        padding-right    :120px;    
    }

    .sideleft    {    
        position    :absolute;
        width    :190px;
        top    :130px;
        left    :0px;
        bottom    :28px;
        border-left    :10px solid #468ab4;
        *overflow    :auto;
    }

    .sidecenter    {
        background-color    : #468ab4;
        width    :10px;
        position    :absolute;
        top    :130px;
        left    :200px;
        bottom    :28px;    
    }
    .sideright    {
        position    :absolute;
        top    :130px;
        left    :210px;
        right    :0px;
        bottom    :28px;
        border-right    :10px solid #468ab4;
        min-width    :760px;
    }

    .footer    {
        position    :absolute;
        height    :28px;
        background    :#468ab4;
        left    :0px;
        bottom    :0px;
        right    :0px;
        text-align    :center;
        min-width    :980px;
    }
    .footer span    {
        line-height    :28px;
        vertical-align    :middle;
        color    :#FFF;
        display    :block;
        width    :100%;
        
            }
    /******IE6********/
    html    {
        *padding    :130px 10px 28px 10px;
    }
    .header    {
        *height    :130px; 
        *margin-top    :-130px; 
        *position    :relative; 
        *top    :0; 
        *right    :0;
        *bottom    :0;
        *left    :0;
        
    }

    .container    {
        *min-width    :1004px;
    }
    .sideleft    {
        *height    :100%;
        *float    :left;
        *width    :200px; 
        *position    :relative;
        *top    :0; 
        *right    :0; 
        *bottom    :0; 
        *left    :0;
    }
    .sidecenter    {
        *height    :100%;
        *float    :left;
        *width    :10px; 
        *position    :relative;
        *top    :0; 
        *right    :0; 
        *bottom    :0; 
        *left    :0;
    }
    .sideright    {
        *height    :100%;
        *margin-left    :210px;
        _margin-left    :207px; 
        *position    :relative; 
        *top    :0; 
        *right    :0; 
        *bottom    :0;
        *left    :0;
    }
    .footer    {
        *height    :28px; 
        *position    :relative;
        *top    :0; 
        *right    :0;
        *bottom    :0; 
        *left    :0;
    }


    这基本就全了,看的时候要改一下css的link路径.

    天空一片蔚蓝,我却原地徘徊.
  • 相关阅读:
    新发地突发新冠病例，我从北京来赶来为疾控软件开发人员分享Azure DevOps，汗
    Azure DevOps Server：还原被删除的分支
    Azure DevOps Server 拉取请求模板(Pull Request Template)
    Azure DevOps Server：使用Postman批量删除测试用例
    Visual Studio Code：在操作系统文件夹或文件上出现Open with Code菜单
    在Windows XP上访问Azure DevOps Server 2019(TFS)
    将团队项目迁移到另外一个团队项目集合中
    快速排序c++实现 快排C++代码实现
    高等代数(第四版) 王萼芳课后答案
    数据结构题集(C语言版)课后答案+源码严蔚敏、吴伟民编著
  • 原文地址：https://www.cnblogs.com/abner/p/1619332.html
Copyright © 2011-2022 走看看