第9天:第一个CSS布局实例

转载 2012年03月29日 10:23:46

接下来始要真正设计布局了。和传统的方法一,你首先要在海里有大致的廓构想,然后用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="/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太深了,法在下一的学详细

相关文章推荐

CSS3弹性布局align-items和align-self垂直轴方向行对齐属性详解及实例

弹性项目可以按弹性容器当前行的cross axis来对齐,和justify-content类似,但在垂直方向上。其中align-items属性用于弹性容器,而align-self用于弹性项目。 ali...
  • iefreer
  • iefreer
  • 2016年03月01日 22:26
  • 9423

DIV CSS 布局定位 实例 菜单导航 详解

为什么要用Div Css可以简单的作如下解释: 当时创造WEB的那个人也发明了用TABLE布局,当TABLE布局泛滥之后,然后他说:我创造了WEB也毁了WEB,TABLE布局会给一个网...

CSS+HTML实例集合一,改变字体(样式,大小),overflow布局属性(如显示隐藏文字等),列表的展开闭合

改变字体(样式,大小) 无标题文档 a:link,a:visited{/*设置点击前,点击后a标签样式一样*/ color:#FF9900;/*颜色*/ text-deco...

div+css网页标准布局实例

  • 2012年12月21日 12:36
  • 1.33MB
  • 下载

第十天 div+css网页标准布局实例教程(三)

前边两节学完后,前台工作基本上完成了,下边的任务该程序员添加程序了。为什么说是基本完成呢?因为要做的工作还很多,不但要把首页做出来,其它的列表页详细页等页面也得做。还要配合程序员把整个网站完成,这样才...

div+css网页标准布局实例(免费)

  • 2013年04月17日 21:04
  • 1.47MB
  • 下载

PHP.5-DIV+CSS布局网站首页实例

DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html【页头、页脚、侧边栏和内容区域】 #避免各浏览器对...

div+css网页标准布局企业项目实例

  • 2016年06月29日 13:16
  • 1.12MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第9天:第一个CSS布局实例
举报原因:
原因补充:

(最多只允许输入30个字)