zoukankan      html  css  js  c++  java
  • 百分比和固定宽度的混合布局

    今天准备做下载站的分类策划,在网上逛的时候,逛到了微软下载中心这个网站。感觉很不错,做得简洁大方。平时有个小嗜好,就是看看网页是怎样布局的,于是用firefox
    web developer插件,将浏览器窗口调小,当分辨率调到800*600时,水平方向依然没有出现滚动条。而网页的主要内容区都没有缩小,只是原来右边的空白部分没有了。以前在书上看过,有的设计师通过js检测浏览器窗口的来改变布局。是不是也是通过js实现的呢。还是还是通过css的百分比布局就能实现呢。
         于是,用firebug查看它的首页,一看,网页里用了很多的表格。网页的主要部分都是用表格布局的。我就想,作为微软这样知名的公司。为什么在现在这个css已经成为一种广泛使用的语言而仍然使用如此广受批评的表格布局呢。是不是要实现这种布局效果用css比较难以实现呢。
        “用表格能实现的,用
    css一定能实现,用css能实现的,用表格不一定能够实现”一直记着这句话。于是,我产生了一种用css将微软下载中心首页重写一遍的想法。下面是我重写的方案:
         头部:我用一个idhddiv包围了三个子div三个div分别是从上到下的三层。然后将对每一个子块的元素分别设向左、向右浮动。并设固定像素的宽度。就能实现
         中部:左边的侧栏和右边的主要内容栏。侧栏的宽度是固定的
    181px。而主要内容栏要实现铺平整个浏览器窗口的话,必须设百分比或em宽度,一般是百分比。
         尾部:用一个宽度为100%div就可以了。
         问题抽出来了,就是怎样实现百分比和固定宽度布局的问题:

           html可简化为:

            <div id=”content”>
                
    <div id=”s_content”>s_content
                
    </div>
                
    <div id=”m_content”>m_content
                
    </div>
            
    </div>
             

    设一下简单的css样式:


    #content    {
                width
    :100%;
                height
    :500px;
            
    }

            #s_content
    {
                width
    :180px;
                height
    :500px;
                background-color
    :#ccc;
                float
    :left;
            
    }

            #m_content
    {
                width
    :100%;
    height
    :500px; 
                background-color
    :#c4c9d6;
                float
    :left;
    }

    如果这样的话,根本不可能实现s_contentm_content在同一水平线上。难道把#m_contentwidth属性设为:100%-180px?在ie6firefox2下都相当于没有设定#m_content属性一样。当然,如果不设定m_contentwidth,当m_content里的内容宽度小于窗口右侧的宽度时,可以在一条水平线上。如果大于的话,ie6会自动撑开m_contentfirefox2中虽然不撑开,但是内容会跑到外面去。这都不是我们想要的。  
        这时,表格的作用就能够发挥出来了。将原来的
    html代码改为如下:

    <div id=”content”>
        
    <table width="100%">
            
    <tr><td width="180px">
                
    <div id="s_content">
                s_content
                
    </div>
            
    </td>
            
            
    <td width="100%">
                
    <div id="m_content"> 
                m_content
                
    </div>
            
    </td>
            
    </tr>
        
    </table>
    </div>
        这样,不管你的显示器分辨率是多少,网页都能填满整个宽度。而s_content的宽度是固定的。当然这只是使用表格实现固定宽度和百分比的原理。
  • 相关阅读:
    使用某些 DOCTYPE 时会导致 document.body.scrollTop 失效
    VB.NET 笔记1
    知识管理系统Data Solution研发日记之一 场景设计与需求列出
    知识管理系统Data Solution研发日记之五 网页下载,转换,导入
    折腾了这么多年的.NET开发,也只学会了这么几招 软件开发不是生活的全部,但是好的生活全靠它了
    分享制作精良的知识管理系统 博客园博客备份程序 Site Rebuild
    知识管理系统Data Solution研发日记之四 片段式数据解决方案
    知识管理系统Data Solution研发日记之二 应用程序系列
    知识管理系统Data Solution研发日记之七 源代码与解决方案
    知识管理系统Data Solution研发日记之三 文档解决方案
  • 原文地址:https://www.cnblogs.com/xie/p/1244301.html
Copyright © 2011-2022 走看看