我要投稿
  • 您当前的位置:57365.com -> 技术教程 -> 网站建设教程 -> CSSHTML教程 -> 教程内容
  • [ 收藏本页教程 ]
  • 使用Web标准建站第9天:CSS布局入门CSSHTML教程

    教程作者:佚名    教程来源:不详   教程栏目:CSSHTML教程    收藏本页
     

    接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。

    注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义。但任何事情都有得有失,取舍在于你的价值判断。好,不罗嗦了,我们开始:

    1.确定布局

      w3cn的最初设计草图如下:

      用表格的设计方法的话,一般都是上中下三行布局。用DIV的话,我考虑使用三列来布局,成为这样

    2.定义body样式

      先定义整个页面的body的样式,代码如下:

    body { MARGIN: 0px;
    PADDING: 0px;
    BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
    FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
    COLOR: #666;
    FONT-SIZE:12px;
    LINE-HEIGHT:150%; }

      以上代码的作用在上一天的教程有详细说明,大家应该一看就明白。定义了边框边距为0;背景颜色为#FEFEFE,背景图片为bg_logo.gif,图片位于页面右下角,不重复;定义了字体尺寸为12px;字体颜色为#666;行高150%。

    3.定义主要的div

      初次使用CSS布局,我决定采用固定宽度的三列布局(比自适应分辨率的设计简单,hoho,别说我偷懒,先实现简单的,增加点信心嘛!)。分别定义左中右的宽度为200:300:280,在CSS中如下定义:


    /*定义页面左列样式*/
    #left{ WIDTH:200px;
    MARGIN: 0px;
    PADDING: 0px;
    BACKGROUND: #CDCDCD;
    }
    /*定义页面中列样式*/
    #middle{ POSITION: absolute;
    LEFT:200px;
    TOP:0px;
    WIDTH:300px;
    MARGIN: 0px;
    PADDING: 0px;
    BACKGROUND: #DADADA;
    }
    /*定义页面右列样式*/
    #right{ POSITION: absolute;
    LEFT:500px;
    TOP:0px;
    WIDTH:280px;
    MARGIN: 0px;
    PADDING: 0px;
    BACKGROUND: #FFF; }

      注意:定义中列和右列div我都采用了

    POSITION: absolute;

    ,然后分别定义了

    LEFT:200px;TOP:0px;

    LEFT:500px;TOP:0px;

    这是这个布局的关键,我采用了层的绝对定位。定义中间列距离页面左边框200px,距离顶部0px;定义右列距离页面左边框500px,距离顶部0px;。

      这时候整个页面的代码是:

    <!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="/images/faviconico.ico" type="image/x-icon" />
    <link rel="shortcut icon" href="/images/httpwwww3cnorgfaviconico.ico" type="image/x-icon" />
    <link rel="stylesheet" rev="stylesheet" href="/images/jishu513549cssstyle01css.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思维禁锢太深了,这个办法在下一节的学习中详细介绍。

     
  • 上一篇:使用Web标准建站第8天:CSS布局入门CSSHTML教程
  • 下一篇:鼠标在文本上移动时层的显示与消失CSSHTML教程
  • 加入收藏】【告诉好友】【 】【打印此文】【回到顶部】【关闭窗口
    我要投稿   -   广告合作   -   关于本站   -   友情连接   -   网站地图   -   联系我们   -   版权声明   -   设为首页   -   加入收藏   -   网站留言
    Copyright © 2009 - 20012 www.www.hxswjs.com All Rights Reserved.57365.com 版权所有