| 网站首页 | 硬件维修 | 应用学院 | 网络组建 | 网站制作 | 菜鸟黑客 | 编程之道 | 数码大全 | 娱乐休闲 | 软件下载 | 在线视频 | 请您留言 | 技术论坛 | 
专 题 栏 目
最 新 热 门
最 新 推 荐
相 关 文 章
  • javascript实例教程(19)…

  • javascript实例教程(19)…

  • javascript实例教程(19)…

  • javascript Web页面内容…

  • 用javascript连接access…

  • 调用IE内置打印组件完成web打…

  • 使用Web标准建站第8天:CSS布…

  • 通向web标准之路

  • 网站web标准测试

  • 正确使用XHTML的冒险以及解决…

  • Q
    您现在的位置: 我是IT人 >> 网站制作 >> 网页设计 >> CSS >> 文章正文
    [组图]使用Web标准建站第9天:CSS布局入门           
    使用Web标准建站第9天:CSS布局入门
    作者:网络 文章来源:转载 点击数: 更新时间:2006-1-4
    [ 字体:缩小 正常 放大 | 双击自动滚屏 ]
    请选择合适的字体颜色:

    <!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" lang="gb2312">
    <head>
    <title>欢迎进入新《网页设计师》:web标准教程及推广</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="Content-Language" content="gb2312" />
    <meta content="all" name="robots" />
    <meta name="author" content="ajie(at)netease.com,阿捷" />
    <meta name="Copyright" content="www.w3cn.org,自由版权,任意转载" />
    <meta name="description" content="新网页设计师,web标准的教程站点,推动web标准在中国的应用." />
    <meta content="web标准,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
    </head>
    <body>
    <div id="left">页面左列</div>
    <div id="middle">页面中列</div>
    <div id="right">页面右列</div>
    </body>
    </html>

      这时候页面的效果仅仅可以看到三个并列的灰色矩形,和一个背景图。但是我希望高度是满屏的,怎么办呢?

    4.100%自适应高度?

      为了保持三列有同样的高度,我尝试在#left、#middle和#right中设置"

    height:100%;

    ",但发现完全没有预想的自适应高度效果。经过一番尝试后,我只好给每个div一个绝对高度:"height:1000px;",并且随着内容的增加,需要不断修正这个值。难道没有办法自适应高度了吗?随着阿捷自己学习的深入,发现一个变通的解决办法,实际上根本不需要设置100%,我们已经被table思维禁锢太深了,这个办法在下一节的学习中详细介绍。

     

    上一页  [1] [2] 

    文章录入:54iter    责任编辑:54iter 
  • 上一篇文章:

  • 下一篇文章:
  • 发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    | 设为首页 | 加入收藏 | 联系站长 | 关于我们 | 友情链接 | 版权申明 |