第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太深了,法在下一的学详细

一个好例子:DIV+CSS布局-固定页面开度布局

DIV+CSS布局中主要CSS属性介绍: Float:        Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道标签默认一行只能显示一个,而使用...
  • u014801801
  • u014801801
  • 2016年12月11日 22:20
  • 4814

CSS——排版布局

1.满版100%布局:这个布局将整个页面切割为一块跟浏览器页面相同高度、宽度的块状区域,且会随着浏览器缩放而缩放区域大小。乍听之下,这个排版似乎有点多余,页面大小就已经显示在浏览器上了,为什么还要画蛇...
  • laobai1015
  • laobai1015
  • 2016年05月20日 14:35
  • 4217

css table布局样式用法总结

个人习惯在项目中经常会用到table布局,这里来汇总下经常会用到的样式(会不断更新的): 一、table加边框 直接写上这段style代码就可以了 table ...
  • panyuanyuan
  • panyuanyuan
  • 2015年01月20日 14:06
  • 5928

CSS实例(一):漂亮的表格样式

WEB2.0提倡使用div布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。 现在使用介绍使用CSS样式表来控制、美化表格的方法。 Html代码   ...
  • qq1162195421
  • qq1162195421
  • 2013年08月19日 21:53
  • 2930

利用div+css实现几种经典布局的详解,样式以及代码!

一、左右两侧,左侧固定宽度200px,右侧自适应占满 html代码 css代码 *{ margin: 0px; padding: 0px; ...
  • kongkongyou
  • kongkongyou
  • 2017年01月15日 14:15
  • 1793

asp.net-css页面布局的应用-经典盒子模型

css构造练习.aspx代码如下: #div_head,#div_foot { border:1px solid gray; ...
  • yayun0516
  • yayun0516
  • 2014年11月05日 14:53
  • 969

css选中子元素中不是第一个元素的3种方法

第一种:使用伪类选择器:not
  • CodingNoob
  • CodingNoob
  • 2017年07月26日 23:43
  • 5338

CSS Grid布局指南

简介 CSS Grid布局 (又名"网格"),是一个基于二维网格布局的系统,主要目的是改变我们基于网格设计的用户接口方式。如我们所知,CSS 总是用于网页的样式设置,但它并没有起到很好的作用。刚开始...
  • ceshi986745
  • ceshi986745
  • 2016年06月22日 12:18
  • 8483

DIV+CSS实操一:经管系网页总体模块布局

首先我们先来打开经管系网页,看看网页效果是怎么样的。通过所学Web前端开发的知识,我们一步一步模仿出 标准的网页。我们知道DIV+CSS可以实现网页模块的总体布局,这基本取代了HTML中用table布...
  • erlian1992
  • erlian1992
  • 2015年11月19日 15:37
  • 2130

CSS基础之盒子模型及浮动布局

盒模型      谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content)、填充(padding)、边框(border)、边界(margin); 这些属性我们可以把它转移到我们日常...
  • u013063153
  • u013063153
  • 2016年09月03日 17:09
  • 991
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第9天:第一个CSS布局实例
举报原因:
原因补充:

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