DIV CSS课程大纲

div+css课程大纲

第一讲 课程背景(为什么要学习div+css) 1.web标准 1). 定义

网页主要由3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior） 2). w3c规定的网页三要素

a.结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。” b.表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。 c.行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。 3). 网页设计为何要遵循web标准 2.div+css 1). 概念

div+css是一个术语,是一种网页布局方法的简称, 网页布局就是将一个网页通过html或xhtml标记语言按照一定的布局形式展现出来,常见的有table型布局(传统)和div+css型布局(现代) 2). div+css 与html语言的关系 3).专门讨论div+css的意义 第二讲 div (结构层) 1.div概述 div是“块”的象征,word中排版将一篇文章分成许多块,网页布局也需要分块,div就是为分块进行布局 2.div用法 具体内容

将具体的内容(段落,标题,超链接?)放置在其中,便形成了一个”块”,再对其应用一定的样式,就是布局 3.如何用div进行基础性布局 第1步.分析页面结构,划分功能区域 第2步.进入结构层代码编写（div） 第3步.进入表示层代码编写（css） 第4步.代码测试（ie6-8,firefox,safari,opera....) 第5步.代码维护和优化 第三讲 css (表示层) 1. 名词解释:css

2. css的基本存在形式 a.内联样式(优先级最高)

asdfsadf b.内部样式(优先级中)

c.外联样式(优先级最低)

3. css样式基础

长大在线2011年暑期培训讲师——毛善海 第 1页 / 共 2页

a. CSS选择器 (重要) 1). 选择器定义方式

选择器 { 属性 : 值 ;} 2). 常用选择器

元素选择器 body{ color : green;} 类选择器 div.f-blue {color:blue;} 群组选择器 h1 , p ,strong{font-style:italic;} ID选择器 #four{ color:blue;}

b. 常用css控制方式

1). 对边距和衬距的控制 css盒模型: css中，将网页中每一个参与布局的块元素都当成一个盒子，盒子与盒子之间有距离，称为边距（margin），盒子与盒子里面的内容有距离，称为衬距（padding）,此外,盒子还有边框等属性

行内元素与块元素: 前者形如 等等元素,这些元素就像每一行中的文字一样,他们不直接影响布局;后者形如 ,

等等元素,这些元素的存在将会直接影响到整个页面的布局 2). 对定位的控制 (重要) 静态定位(position:static;left:无效;top:无效): 文档默认定位方式,从前到后

浮动定位(float:left或right): 多个块元素在一行内显示

绝对定位(position:absolute;left:100px;top:100px): 元素被放置在页面任意一个地方 相对定位(position:relative;left:100px;top:100px): 元素相对自己默认位置发生偏移 固定定位(position:fixed;left:100px;top:100px): 元素固定在浏览器可视区域某处 3). 对字体的控制 何种字体: div { font-family:微软雅黑，serif，黑体；}

字体大小: div { font-size:18px; } 4). 对颜色的控制 使用颜色名称: div { color:red }

使用16进制颜色值: div {color:#ff0000} 使用rgb颜色值: div { color:rgb(255,0,0) } 5). 对尺寸的控制 宽度: div { width:300px; } 高度: div { height:300px; } 6). 对背景的控制 设置背景色: div { background : #00ff00 } 设置背景图: div { background : url(“a.jpg”) } 7). 对边框的控制

边框使用“border”来声明，当一个元素需要定义边框时，我们要给他的边框至少传递三种类型的信息：边框粗细（px），边框样式（solid,dotted...)和边框颜色（red,green...) 举例: div { border: 1px solid green} ? 1像素宽，连续实线，绿色 4.css兼容性的处理 第四讲 布局实例分析 综合div+css技术将第二讲中提到的一个布局例子完成 总 结 1.使用div+css进行布局符合人们通常的逻辑思维形式,能够做到条理清晰,结构分明 2.div+css布局方式符合web2.0时代对标准化网页的要求,是网页设计师必知必会的一项技能

3.真正学会div+css的精髓需要勤学苦练,仅仅几节课时间是不会学会它的,多上机实习,多看相关教程,多查阅相关资料,和任何一门学科一样,想要真正体会到div+css的好处,就要多下功夫

长大在线2011年暑期培训讲师——毛善海 第 2页 / 共 2页

本文来源：https://www.bwwdw.com/article/bju8.html