css3技术

WEB2.0标准教程:第九天第一个CSS布局实例_div+css布局教程

字号+ 作者:H5之家 来源:H5之家 2015-10-02 14:02 我要评论( )

WEB2.0标准教程:第九天第一个CSS布局实例,学习WEB2.0标准教程:第九天第一个CSS布局实例,WEB2.0标准教程:第九天第一个CSS布局实例,查看WEB2.0标准教程:第九天

接下来开始要真正设计布局了。和传统的方法一样,你首先要在脑海里有大致的轮廓构想,然后用photoshop把它画出来。你可能看到有关web标准的站点大都很朴素,因为web标准更关注结构和内容,实际上它与网页的美观没有根本冲突,你想怎么设计就怎么设计,用传统表格方法实现的布局,用DIV也可以实现。技术有一个成熟的过程,把DIV看成和TABLE一样的工具,如何运用就看你的想象力了。
注:在实际应用过程中,DIV在有些地方的确不如表格方便,比如背景色的定义。但任何事情都有得有失,取舍在于你的价值判定。好,不罗嗦了,我们开始:

1.确定布局
w3cn的最初设计草图如下:


用表格的设计方法的话,一般都是上中下三行布局。


用DIV的话,我考虑使用三列来布局,成为这样



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

div css xhtml xml Example Source Code

Example Source Code []

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中如下定义:

div css xhtml xml Example Source Code

Example Source Code []

/*定义页面左列样式*/
#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;。

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

div css xhtml xml Source Code to Run

Source Code to Run []


[ 可先修改部分代码 再运行查看效果 ]


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

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • WEB2.0标准教程:第十二天校验及常见错误_div+css布局教程

    WEB2.0标准教程:第十二天校验及常见错误_div+css布局教程

    2015-10-02 14:13

  • WEB2.0标准教程:第十天自适应高度_div+css布局教程

    WEB2.0标准教程:第十天自适应高度_div+css布局教程

    2015-10-02 14:10

  • WEB2.0标准教程:第十一天不用表格的菜单_div+css布局教程

    WEB2.0标准教程:第十一天不用表格的菜单_div+css布局教程

    2015-10-02 14:07

  • WEB2.0标准教程:第七天CSS入门_div+css布局教程

    WEB2.0标准教程:第七天CSS入门_div+css布局教程

    2015-10-02 14:00

网友点评