1、DIV + CSS 布局入门,阶段一:页面元素的类型,div 是什么,div的全称: division (区分) 使用方法: 职责:负责页面的结构 特性: 容器性质。 可内嵌table,还可嵌文本和其它的html代码。,头部内容区,导航菜单区,广告栏区,左侧内容区,右侧内容区,底部内容区,版权内容区,世华财讯页面,页面元素的分类,页面元素分为两大类:块元素和行元素块元素的代表:div 行元素的代表:span,块元素,div - 常用块级容易 table - 表格 dl - 定义列表 form - 交互表单 ul - 非排序列表 ol - 排序表单 Li 列表项 p - 段落 center -
2、举中对齐块 pre - 格式化文本 blockquote - 块引用,h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容 address - 地址 dir - 目录列表 fieldset - form控制组,块元素,块元素特性: 可以容纳行元素和其他块元素; 会顺序以每次另起一行的方式一直往下排。,div,table,ul,行元素,a - 锚点abbr - 缩写acronym - 首字b - 粗体
3、(不推荐)bdo - bidi overridebig - 大字体br - 换行cite - 引用code - 计算机代码dfn - 定义字段em - 强调font - 字体设定(不推荐)i - 斜体img - 图片input - 输入框,kbd - 定义键盘文本label - 表格标签q - 短引用s - 中划线(不推荐)samp - 定义范例计算机代码select - 项目选择small - 小字体文本span - 常用内联容器strike - 中划线strong - 粗体强调sub - 下标sup - 上标textarea - 多行文本输入框tt - 电传文本u - 下划线var - 定
4、义变量,行元素,行元素特性: 只能容纳文本或者其他行元素; 不可以容纳块元素; 会以顺序横排的方式一直往后排下去。,span,a,img,元素自身的属性,div,边框(border),背景色(background-color),背景图(background-img),填充(padding),每个元素有以下五种属性:,间隙(margin),阶段一总结:两个要点,元素的类型 行元素 块元素 元素的构造属性 边框(border) 填充(padding) 间隙(margin) 背景色(background-color) 背景图(background-img),阶段二:实际应用,为什么选择DIV进行布局
5、,布局要采用块元素:因为块元素可以包含行元素和块元素,而行元素则做不到;DIV的语义是分区的意思;,头部内容区,导航菜单区,广告栏区,左侧内容区,右侧内容区,底部内容区,版权内容区,右侧内容区,编写html代码,头部内容 导航菜单 广告条 内容一 内容二 内容三 版权信息,编写css代码,. contentLfloat:left; (使得指定元素脱离普通的文档流而产生的特别的布局特性)width:400px;background-color:#fff;提示: 块元素可以转换为行元素; 行元素可以转换为块元素;,如何改变块布局,DIV是块元素,两个DIV排列时,会竖着排,如何让他能横排呢?. c
6、ontentLfloat:left;, 左侧内容区 , 右侧内容区 ,元素特性的改变,块元素改为具有行元素的特性: display:inline;(改为行元素) float:left;(向左浮动) 提示:只有块元素可以使用行元素改为具有块元素的特性: display:block ;,元素位置的改变,改变元素的定位属性 position:relative; position:absolute; top bottom left right,阶段三: 使用div布局-示例,3.1 布局步骤1,1、使用div定义语义结构 一个典型的版面分栏结构:页头、导航栏、内容、版权 结构代码:把这四个盒子装进一个
7、更大的盒子,body中,如下上面四行代码,3.2 布局步骤2,这样,我们定义最外边的大盒子(body)的属性,让它在页面居中,并定义其宽度为760像素,加上边框,如下:bodyfont-family:Arial,Helvetica,sans-serif;font-size:12px;margin:0px auto;height:auto;width:760px;border:1px solid #006633;,3.3 布局步骤3,对于页头,我们应用一幅背景图,并在其下边界设计一定的间隙,使页头的图片不要和下面的导航栏连在一起,如下:#headerheight:100px;width:760p
8、x;background-image:url(headPic.gif);background-repeat:no-repeat;margin:0px 0px 3px 0px;,3.4 布局步骤4,对于导航栏,做成像一个个小按钮,鼠标移上去会改变按钮的背景色和字体色,而这些小按钮我们也可以理解为小盒子,则是一个盒子嵌套的问题了,如下:#nav/*定义一个导航栏的长盒子*/ height:25px;width:760px;font-size:14px;list-style-type:none;/*让nav这个大盒子下面的小盒子LI列表样式不显示,这对于标准浏览器很重要*/ #nav lifloat
9、:left;/*让LI这些小盒子左对齐*/ ,3.5 布局步骤5,#nav li acolor:#000000;text-decoration:none;/*让LI盒子里面的链接样式没有下滑线*/ padding-top:4px;display:block;/*让LI里面的链接块状呈现,就像一个按钮,而不必一定要点中链接文字才起作用*/ width:97px;height:22px;text-align:center;background-color:#009966;margin-left:2px;,3.6 布局步骤6,#nav li a:hoverbackground-color:#0066
10、33;/*鼠标移到链接盒子上面改变盒子背景色*/ color:#FFFFFF;,3.7 布局步骤7,对于内容部分,主要是放入文章内容,有标题和段落;给标题加粗,使用H标签;段落首行缩进2个字,同时所有内容看起来与大盒子的边框要有一定距离,如下:#contentheight:auto; width:740px;line-height:1.5em; padding:10px;#content ptext-indent:2em;#content h3font-size:16px; margin:10px;,3.8 布局步骤8,对于版权栏,加上背景,与页头呼应,里面的文字要居中对齐,有多行内容时,行间
11、距合适,如下:#footerheight:50px; width:740px;line-height:2em;text-align:center;background-color:#009966;padding:10px;,3.9 布局步骤9,最后,在开头增加如下样式代码,用通配符初始化各标签边界和填充(因为有部分标签默认有一定的边界,如form标签):*margin:0px;padding:0px;,3.10 布局步骤10,结构代码如下:首 页 文 章 相册 Blog 论 坛 帮助 ,3.11 布局步骤11, 前言 第一段内容(插入大量文字) 理解CSS盒子模式 第二段内容(插入大量文字) 关于| 广告服务 | 招聘 | 客服中心 | Q Q留言 | 网站管理 | 会员登录 | 购物车Copyright 2006 - 2008 All Rights Reserved ,主讲内容总结,用块元素DIV进行布局 元素分为行元素和块元素 元素的构造 行元素和块元素的属性可以互相转换,DIV+CSS学习资料,http:/ 入门培训 http:/ 70位专家谈CSS设计 http:/ CSS 样式 在线编辑器 http:/ CSS在线压缩,