Div+CSS布局入门.pptVIP

DIV + CSS 布局入门 UE研究室:郭福恩 阶段一：页面元素的类型 div 是什么 div的全称: division (区分) 使用方法：div……/div 职责：负责页面的结构 特性： 容器性质。 可内嵌table，还可嵌文本和其它的html代码。 CSS 是什么 CSS：层叠样式表 使用方法：class=“name” 和 id=“name” 职责：负责页面的表现 可以定义： 文字或元素的颜色 color 背景颜色 background-color 背景图像 background-image 字体 font-family 文字大小 font-size 列表样式 list 鼠标样式 cursor 边框样式 border 内补白 padding 外边距 margin 等 世华财讯页面 页面元素的分类 页面元素分为两大类：块元素和行元素 块元素的代表：div 行元素的代表：span 块元素 块元素 块元素特性： 可以容纳行元素和其他块元素； 会顺序以每次另起一行的方式一直往下排。 行元素 行元素 行元素特性： 只能容纳文本或者其他行元素； 不可以容纳块元素； 会以顺序横排的方式一直往后排下去。 元素自身的属性 阶段一总结：两个要点 元素的类型 行元素 块元素 元素的构造属性 边框(border) 填充(padding) 间隙(margin) 背景色(background-color) 背景图(background-img) 阶段二：实际应用 为什么选择DIV进行布局 布局要采用块元素：因为块元素可以包含行元素和块元素，而行元素则做不到； DIV的语义是分区的意思； 编写html代码 div class=“header”头部内容/div div class=“nav”导航菜单/div div class=“banner”广告条/div div class=“contentL”内容一/div div class=“contentR”内容二/div div class=“contentB”内容三/div div class=“footer”版权信息/div 编写css代码 . contentL{ float：left; (使得指定元素脱离普通的文档流而产生的特别的布局特性) width：400px; background-color：#fff; } 提示： 块元素可以转换为行元素； 行元素可以转换为块元素； 阶段三：控制布局 如何改变块布局 DIV是块元素，两个DIV排列时，会竖着排，如何让他能横排呢？ . contentL{ float:left; } 元素特性的改变 块元素改为具有行元素的特性： display:inline；(改为行元素) float:left；(向左浮动) 提示:只有块元素可以使用 行元素改为具有块元素的特性： display:block ； 主讲内容总结 用块元素DIV进行布局 元素分为行元素和块元素 元素的构造 行元素和块元素的属性可以互相转换 DIV+CSS学习资料 /article.asp?id=167 入门培训 /blog/?p=340 70位专家谈CSS设计 /CssDesigner/Index.asp CSS 样式 在线编辑器 /index.php/main/csscompressor/ CSS在线压缩 谢谢大家！ * * div头部内容区/div div导航菜单区/div div广告栏区/div div左侧内容区/div div右侧内容区/div div底部内容区/div div版权内容区/div div - 常用块级容易 table - 表格 dl - 定义列表 form - 交互表单 ul - 非排序列表 ol - 排序表单 p - 段落 center - 举中对齐块 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 - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码 dfn - 定义字段 em - 强调 font - 字体设定(不推荐)