web前端开发大纲_第1页
web前端开发大纲_第2页
web前端开发大纲_第3页
web前端开发大纲_第4页
web前端开发大纲_第5页
已阅读5页，还剩92页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、 web前端开发教学大纲编写人： 石亚平 课 时： 80课时 一、 课程教学内容及目标4（一） 知识目标41. 掌握html、 html5、css、css3的基本语法；42. 掌握html5的canvas绘图；43. 熟练应用div+css 实现页面布局；44. 掌握JavaScript基本语法；45. 掌握DOM的基本用法；46. 掌握jQuery的基本用法；47. 熟悉w3c规范，了解各大主流浏览器的兼容性；48. 熟悉bootstrap框架4（二） 能力目标51. 通过本课程的学习要求学生掌握div+css实现页面的布局，实现静态页面；52. 通过JavaScript实现简单的交互功能；

2、53. 通过jQuery简化js的原生代码，减少代码量；54. 通过bootstrap框架，实现页面快速布局55. 能解决各大浏览器的兼容性问题；5（三） 参考教材5JavaScript高级程序设计、W3School离线手册、jQuery1.9.3帮助文档5二、 课程教学内容及考核要求5第一单元：HTML基础51.1 Web基础知识51.2 HTML快速入门51.3 文本和图像61.4 表格和列表6第二单元：css基础172.1 CSS语法172.2 CSS基础选择器172.3 框模型和背景182.4 浮动和定位18第三单元：CSS3基础293.1 复杂选择器293.2 多列属性303.3 C

3、SS Hack30第四单元 CSS3高级364.1 转换364.2 过渡364.3 动画36第五单元 JavaScript455.1 JavaScript概述455.2 JavaScript基础语法465.3 变量和常量46第六单元 JavaScript数据类型转换和运算符496.1数据类型496.2基本类型496.3 数据类型转换496.4 运算符49第七单元 JavaScript函数547.1 函数的定义547.2 函数的调用547.3 变量的作用域547.4 全局函数54第八单元  JavaScript分支结构588.1 什么是分支结构588.2 If语句588.3 If-el

4、se语句588.4 else if语句588.5 switch-case语句58第九单元 循环结构619.1 什么是循环结构619.2 While语句619.3 do-while语句619.4 For语句61第十单元 创建和访问数组6410.1 什么是数组6410.2 数组的定义和初始化6410.3 访问数组6410.4 数组的常用方法6410.5 二维数组64第十一单元 DOM6911.1 DHTML概述6911.2 DOM概述6911.3 节点信息6911.4通过HTML选取元素6911.5通过CSS选取元素69第十二单元 HTML5基础7212.1HTML5表单元素7212.2HTML5

5、表单属性及验证72第十三单元 音视频处理和Canvas绘图7513.1视频处理7513.2音频处理7613.3Canvas概述7613.4Canvas绘图76第十四单元 jQuery7914.1jQuery介绍7914.2 jQuery的编程步骤7914.3jQuery对象7914.4jQuery选择器79第十五单元 jQuery操作DOM和jQuery事件8215.1查询8215.2样式操作8215.3遍历节点8215.4创建、插入、删除8215.5替换DOM节点8215.6复制DOM节点8215.7jQuery事件82第十六单元 jQuery动画效果和bootstrap起步8516.1隐藏

6、和显示8516.2自定义动画8516.3并发与排队效果8516.4响应式网页概述8516.5编写响应式网页8616.6bootstrap概念86第十七单元全局CSS样式9417.1概述9417.2布局容器9417.3按钮9417.4图片9417.5表格9417.6排版9417.7栅格9417.8表单94一、 课程教学内容及目标（一） 知识目标1. 掌握html5、css3的基本语法；2. 掌握html5的canvas绘图；3. 掌握css3动画；4. 掌握JavaScript基本语法；5. 掌握DOM的基本用法；6. 掌握jQuery的基本用法和jQuery的动画效果；7. 熟悉w3c规范，了

7、解各大主流浏览器的兼容性；8. 熟悉bootstrap框架（二） 能力目标1. 通过本课程的学习要求学生掌握css3新增的选择器和html5新增的表单元素；2. 会使用canvas绘图3. 通过JavaScript实现简单的交互功能；4. 通过jQuery简化js的原生代码，减少代码量；5. 通过bootstrap框架，实现页面快速布局6. 能解决各大浏览器的兼容性问题；（三） 参考教材JavaScript高级程序设计、W3School离线手册、jQuery1.9.3帮助文档二、 课程教学内容及考核要求第一单元：HTML基础 1.1 Web基础知识 1.1.1web简介 1.1.2web工作原

8、理 1.1.3web浏览器1.2 HTML快速入门 1.2.1HTML概述1.2.1.1超文本1.2.1.2什么是HTML1.2.2HTML基础语法1.2.2.1标记语法1.2.2.2元素1.2.2.3元素嵌套1.2.2.4属性和值1.2.2.5标准属性1.2.2.6注释1.2.2.7HTML和XHTML1.2.3文档结构1.2.3.1HTML文档的结构1.2.3.2文档类型声明1.2.3.3<html>元素1.2.3.4<head>元素1.2.3.5文档头部内容-<title>1.2.3.6文档头部内容-<meta>1.2.3.7<bod

9、y>元素1.3 文本和图像1.3.1 文本标记概述1.3.1.1文本标记的作用1.3.1.2文本与特殊字符1.3.2 使用文本标记1.3.2.1文本样式1.3.2.2标题元素<hn>1.3.2.3段落元素<p>1.3.2.4换行元素<br>1.3.2.5分区元素<span>和<div>1.3.2.6行内元素与块级元素1.3.2.7分隔线元素<hr>1.3.3 图像和连接1.3.3.1URL1.3.3.1.1URL1.3.3.1.2绝对路径1.3.3.1.3相对路径1.3.3.2图像1.3.3.2.1图像格式1.3.3

10、.2.2图像元素<img>1.3.3.3链接1.3.3.3.1链接元素<a>1.3.3.3.2链接的表现形式1.4 表格和列表 1.4.1表格的作用 1.4.2使用表格 1.4.2.1创建表格 1.4.2.2表格的常用属性 1.4.2.3表格标题<caption> 1.4.3使用列表 1.4.3.1列表的作用 1.4.3.2有序列表<ol> 1.4.3.3无序列表<ul> 1.4.3.4列表嵌套【考核要求】1. 掌握组成web前端的三大语言Html，Css，JavaScript 2.了解web的工作原理1） 基于浏览器/服务器模式 （

11、B/S）2） 由web服务器、浏览器和通信协议三部分组成 3.了解主要web浏览器产品 1）IE2） Firefox3） Chrome4） Opera5） Safari4. 掌握什么是HTML1） 超文本标记语言2） 用该语言编写的文件，以.html或者.htm为后缀3） 由浏览器解释执行4） Html不区分大小写，习惯上全小写5. 掌握标记语法1） 封闭类型标记（也叫双标记）：必须成对出现 例如：<p></p>,<h1></h1>等2） 非封闭类型标记（也叫空标记或者单标记） 例如：<br/>,<hr/>等6. 掌握元素

12、属性和值的写法 1）属性的声明必须位于开始标记里面 2）一个元素的属性可能不止一个，多个属性之间用空格隔开 3）多个属性之间不区分先后顺序 4）属性和值之间用等号连接 5）属性的值包含在引号中 例如：<p align=”center”>段落</p>7.了解四个通用属性id,title,class,style8. 了解html和XHTML的区别XHTML是更严格的html版本，XHTML元素必须被关闭，单标记也要关闭9. 掌握html文档的基本结构<!DOCTYPE html> - DOCTYPE一般大写<html><head><

13、title></title> -标题元素<meta charset="utf-8"/> - 定义字符集，防止乱码</head><body></body></html>10. 了解标题元素的规则1） 标题元素的内容出现在浏览器顶部2） 没有属性3） 必须出现在<head>元素中4） 一个文档只能有一个标题例如：<!DOCTYPE html><html><head><title>我的第一个网页</title> </head&

14、gt;<body></body></html>11. 了解几个特殊字符&lt; - <&gt; - >&copy; - © -版权&nbsp; - 空格12. 了解几个常见的文本样式<b></b> - 加粗<i></i> - 倾斜<u></u> - 下划线<s></s> - 删除线<sup></sup> - 上标<sub></sub> - 下标13. 了解6个标题

15、样式<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>14. 掌握块级元素和行内元素的区别1） 块级元素：默认情况下，块级元素独占一行，即元素前后会自动换行例如：<p>,<div>,<h1>-<h6>2） 行内元素：不会换行，和其他行内元素位于同一行例如：<span>,<b>,<i>,<u>

16、15. 了解web页面主要二种路径形式1） 绝对路径 如：2） 相对路径 如：src=”images/logo.png”16. 掌握图像元素<img/>1) 作用：将图像添加到页面2) 单标记3) 必须属性：src4) 行内元素5) 常用属性：width,height例如：<img width=”100” src=”images/rose.jpg”/>17. 掌握链接元素<a>1） 作用：创建一个超链接2） <a href=” target=“”>文本</a>3） href属性：链接的地址 空链接设为#4） target属性：目标，可

17、取值为 _blank、_self等18. 掌握表格的创建方法1） 定义表格：<table></table>2） 创建表行：<tr></tr>3） 创建表列：<td></td>例如：创建一个两行三列的表格<table border=”1”><tr><td>第一行，第一列</td><td>第一行，第二列</td><td>第一行，第三列</td></tr><tr><td>第二行，第一列</td

18、><td>第二行，第二列</td><td>第二行，第三列</td></tr> </table>19. 掌握列表的创建方法（有序列表和无序列表）1） 有序列表<ol><li>科比</li><li>詹姆斯</li><li>库里</li></ol>2） 无序列表<ul><li>科比</li><li>詹姆斯</li><li>库里</li></

19、ul>3） 列表嵌套<ul><li>勇士<ul><li>库里</li></ul></li><li>湖人<ul><li>科比</li></ul></li><ul>1. 项目1及步骤项目1执行步骤:1) 在<body></body>中输入一对无序列表标签<ul></ul>2) 在<ul></ul>中插入9对列表项标签<li></li>

20、;3) 在每对<li></li>中输入对应的学院名称Html代码如下：<!DOCTYPE html><html> <head> <title>demo</title> <meta charset="utf-8"/> </head> <body><ul><li>软工学院</li><li>建筑学院</li><li>传媒学院</li><li>移动通信学院</li

21、><li>动画学院</li><li>网工学院</li><li>高翻学院</li><li>俄语学院</li> <li>基础学院</li></ul> </body></html>2. 项目2执行步骤:：1) 在<body></body>中输入一对无序列表标签<ol></ol>2) 在<ol></ol>中插入5对列表项标签<li></li>3)

22、在每对<li></li>中输入对应的歌曲及歌手的名字Html代码如下：<!DOCTYPE html><html> <head> <title>demo</title> <meta charset="utf-8"/> </head> <body><ol><li>bad girl-吴亦凡</li> <li>逆战-张杰</li> <li>李白-李荣浩 </li> <li&g

23、t;sugar-Maroon 5</li> <li>放纵-权志龙</li> </ol> </body></html>3. 项目3执行步骤:1) 在<body></body>中输入两对有序列表<ol></ol>2) 在每对<ol></ol>中输入对应的国家名称3) 在每对<ol</ol>的下面各添加3对<li></li>4) 在每对<li></li>中输入对应的城市名称Html代码如下：&

24、lt;!DOCTYPE html><html> <head> <title>demo</title> <meta charset="utf-8"/> </head> <body><ol><li>中国城市<ol><li>北京</li><li>上海</li> <li>广州</li> </ol></li><li>美国城市<ol><l

25、i>华盛顿</li> <li>芝加哥</li> <li>纽约</li></ol></li></ol> </body></html>4. 项目4执行步骤:1) 在<body></body>中输入无序列表标签<ul></ul>2) 在<ul></ul>中输入7对<li></li>标签3) 在<li></li>写入对应的新闻信息4) 为每一条新闻加上超链接&

26、lt;a></a>，注意：超链接标签必须嵌套到li标签里，直接包含文字。5) 设置超链接的href的属性值为“#”实现空链接。Html代码如下：<!DOCTYPE html><html> <head> <title>demo</title> <meta charset="utf-8"/> </head> <body><ul><li><a href="#">呱呱首届网络诗歌朗诵</a></l

27、i><li><a href="#">首届网络朗诵大赛再添辉煌</a></li><li><a href="#">年轻选手我的心声势宏大</a></li><li><a href="#">再起风云10进5谁与争锋</a></li><li><a href="#">新人诞生的摇篮</a></li><li><a h

28、ref="#">耿耿老师妙语连珠</a></li><li><a href="#">殷瑜老师第四日点评</a></li></ul> </body></html>5. 项目5执行步骤:创建一个宽200，高80的三行三列的表格1) 查看该表格的结构为三行三列的表格;2) 向网页中插入表格的标签<table></table>3) 在table中插入3对行标记<tr></tr>4) 在每个tr中插入3对单

29、元个格标记<td></td>5) 在每个td中插入相应的文字6) 设置表格属性：宽(width)、高(height)、边框(border)7) 设置每个tr属性：水平居中（align）Html代码如下：<!DOCTYPE html><html> <head> <title>demo</title> <meta charset="utf-8"/> </head> <body><table width="200" height=&qu

30、ot;80" border="1" > <tr align="center"><td>文字</td><td>文字</td><td>单元格</td> </tr> <tr align="center"><td>文字</td><td>文字</td><td>单元格</td> </tr> <tr align="center&

31、quot;><td>文字</td><td>文字</td><td>单元格</td> </tr></table> </body></html>第二单元：css基础2.1 CSS语法 2.1.1 css概述 2.1.1.1css的作用 2.1.1.2什么是css 2.1.1.3css与html之间的关系 2.1.2 使用css样式表 2.1.2.1使用css样式表的方式 2.1.2.2内联方式使用css 2.1.2.3内部样式表 2.1.2.4外部样式表 2.1.3 css语

32、法规范2.1.3.1css语法规范总结2.1.3.2css样式表特征2.1.3.3样式优先级2.1.3.4！Important规则2.2 CSS基础选择器2.2.1通用选择器2.2.2元素选择器2.2.3类选择器2.2.4id选择器2.2.5群组选择器2.2.6后代选择器2.2.7子代选择器2.2.8伪类选择器2.2.9选择器优先级2.3 框模型和背景 2.3.1框模型 2.3.2 外边距2.3.2.1什么是外边距2.3.2.2外边距margin2.3.2.3外边距的简洁写法2.3.2.4外边距合并 2.3.3 内边距2.3.3.1什么是内边距2.3.3.2内边距padding2.3.3.3内

33、边距的简洁写法 2.3.4 背景属性2.3.4.1背景色background-color2.3.4.2背景图片background-image2.3.4.3背景重复background-repeat2.3.4.4背景图片尺寸background-size2.3.4.5背景图片的固定background-attachment2.3.4.6背景定位background-position2.4 浮动和定位2.4.1 定位概述2.4.1.1什么是定位2.3.1.2定位属性2.4.2 浮动定位2.4.2.1浮动概述2.4.2.2浮动定位2.4.2.3float属性2.4.2.4clear属性2.4.3

34、定位方式2.4.3.1相对定位2.4.3.2绝对定位2.4.3.3堆叠顺序2.4.3.4固定定位【考核要求】1. 掌握什么是css1） 层叠样式表，又叫级联样式表，简称样式表2） 定义html中的样式3） 实现了内容与表现分离4） 提高了代码的可重用性和可维护性2. 了解css与html之间的关系1） html用于构建网页的结构2） Css用于构建html元素的样式3） Html是页面的内容组成，css是页面的表现3. 掌握css样式表的三种方式1） 内联样式-定义在单个html元素中2） 内部样式表-样式定义在html页的头元素中3） 外部样式表-将样式表定义在一个外部的css文件中(.cs

35、s文件)-由html页面引用样式表文件4. 了解内联样式表1） 样式定义在html元素的标准属性style里2） 属性和属性值之间用：连接3） 多对属性之间用；隔开4） 如：<h1 style="background-color:yellow;color:red;">我是一号标题 </h1> 5. 掌握内部样式表1） 样式表定义在文档头元素中的<style>元素内2） 在<style>元素中添加样式规则3） 如：<head><style type="text/css">h1color

36、:red </style></head><body><h1>html</h1><h1>css</h1></body>6. 掌握外部样式表1） 创建一个单独的样式表文件用来保存样式规则2） 文件后缀为.css3） 使用<link/>元素链接需要的外部样式表4） <link rel="stylesheet" type="text/css" href="文件路径"/>5） 该文件只能包含样式规则6） 样式规则由选择器和样式

37、声明组成7） 如： 7. 掌握css选择器分类1） 通用选择器 - *2） 元素选择器 - html文档中的元素，如：<p>,<h1>3） 类选择器 - .className4） id选择器 - #idName5） 群组选择器6） 后代选择器7） 子代选择器8） 伪类选择器8. 了解通用选择器 - *1） 可以与任何元素匹配2） 常用于设置一些默认样式3） 如：*font-size:10px;font-family:”Times New Roman”; 9. 了解元素选择器1） html文档中的元素2） 如：htmlcolor:black;h1color:blue;h2

38、color:red;10. 掌握类选择器1） 语法：.classname2） 类名称不能以数字开头3） 所有有class属性的元素都可以使用此样式声明4） 如： 5） 可以将多个类选择器应用在同一个元素上，用空格分隔，如：11. 掌握id选择器1） 仅作用于id属性值2） 选择器前面有一个#号3） 选择器本身则为文档中的某个元素的id属性的值12. 掌握群组选择器1） 以逗号隔开的选择器列表2） 将一些相同的规则作用于多个元素3） 如：html代码<body><p class="important">这是一个段落</p><h2>

39、;这是一个二号标题</h2> </body>Css代码：h2,.importantcolor:green;font-size:30px;border:1px solid red;13. 掌握后代选择器1） 用空格分隔2） 如：html代码：<body><h1>后代 <span> 选择 </span> 器</h1><span>后代选择器</span></body>Css代码：h1 spancolor:red;14. 掌握子代选择器1） 子代选择器要求选择器之间只能存在父子关系2

40、） 使用大于号(>)连接3）15. 掌握伪类选择器1） 使用冒号(:)连接，冒号左边是其他选择器，右边是伪类2） 选择器:伪类选择器 3）分类： 动态伪类:hover - 适用于鼠标悬停时 14.掌握框模型总尺寸=外边距+边框+内边距+内容17. 掌握外边距 - margin1） 围绕在元素边框周围的空白区域是外边距2） 外边距是透明的3） 会在元素外创建额外的空白4） 单边设置margin-top/margin-bottom/margin-left/margin-right如：margin-top:10px;margin-left:20px;5) 外边距简写方式margin:value

41、; - 四个方向相同margin:value value; - 上下 左右margin:value value value; - 上 左右 下margin:value value value value; - 上 右 下 左如：margin:10px 20px 30px 40px;6) 使用外边距实现元素左右居中margin:0 auto;18. 掌握内边距 - padding1） 内容区域和边框之间的空间就是内边距2） 内边距会扩大元素边框所占用的区域3） 单边设置padding-top/padding-bottom/padding-left/padding-right如：padding-t

42、op:10px;padding-left:20px;4）内边距简写方式padding:value; - 四个方向相同padding:value value; - 上下 左右padding:value value value; - 上 左右 下padding:value value value value; - 上 右 下 左如：padding:10px 20px 30px 40px;19. 掌握背景属性1） 背景色 - background-color2） 背景图片 - background-image3） 背景重复 - background-repeat4） 背景图片尺寸 - backgro

43、und-size20. 了解几种定位方式1） 普通流定位2） 浮动定位3） 相对定位4） 绝对定位21. 掌握浮动定位 - float1） 将元素排除在普通流之外，元素将不在页面占用空间2） 将浮动元素放置在包含框左边或者右边3） 浮动元素依旧位于包含框之内4） 浮动元素不会互相重叠5） 浮动元素不会上下浮动6） 左浮: float:left; 右浮： float:right;22. 掌握相对定位 - relative1） 元素原本所占的空间仍保留2） 元素仍保持其未定位前的形状3） 语法：position:relative;4） 使用left和right设置水平方向的偏移量；使用top和bo

44、ttom设置垂直方向的偏移量5） 如：position:relative;top:10px;left:20px;23. 掌握绝对定位 - absolute1） 将元素的内容从普通流中完全移除，不占据空间2） 相对于最近的已定位的祖先元素，如果元素没有已定位的祖先元素，那么他的位置相对于body元素定位3） 语法：position:absolute;4） 使用left和right设置水平方向的偏移量；使用top和bottom设置垂直方向的偏移量24.掌握堆叠顺序 - z-index1）值为数值2）数值越大表示堆叠顺序更高，即离用户更近3）可以设置为负值，表示离用户更远4）如： z-index:9

45、99;25.掌握固定定位1）元素从普通流中完全移除，不占用页面空间2）当用户向下滚动页面时元素框并不随着移动3）语法： position:fixed;4）使用left和right设置水平方向的偏移量；使用top和bottom设置垂直方向的偏移量1.项目1及步骤1) 在网页中输入段落标签<p></p>，在其中输入6对<span></span>标签2) 在span标签内部分别输入字母：G、o、o、l、e3) 设置p标签样式：字号130px、字体"Times New Roman"、文字颜色属性4) 给网页相应需要变色的字母添加相应的

46、类别选择器.red .yellow .green5) 给相应的span标签应用相应的类选择器6) 代码为：Html代码：<p><span>G</span><span class="red">o</span><span class="yellow">o</span><span>g</span><span class="green">l</span><span class="red"

47、>e</span></p>css代码： pfont-size:130px; font-family:"Times New Roman" color:#1269eb; .red color:#da4530; .yellow color:#ffb800; .green color:#009756;2.项目2执行步骤: 1) 向网页中插入标签<div></div>2) 在头部插入<style></style>标签3) 设置div的尺寸属性：宽200像素，高100像素4) 利用border复合属性设置di

48、v的四周的5px、红色的实线边框5) 将下边框border-bottom改写为：3px、绿色的虚线(dashed)边框6) 代码为：Html代码：<div></div> Css代码：divwidth:200px;height:100px;border:5px #FF0000 solid;border-bottom:3px #00FF00 dashed;第三单元：CSS3基础3.1 复杂选择器3.1.1兄弟选择器3.1.1.1相邻兄弟选择器3.1.1.2通用兄弟3.1.2属性选择器3.1.3伪类选择器3.1.3.1目标伪类3.1.3.2结构伪类3.1.3.3否定伪类3.1

49、.4伪元素选择器3.1.4.1伪元素：first-letter3.1.4.2伪元素：firs-line3.1.4.3伪元素：selection3.2 多列属性3.3.1分隔列3.3.2列间隔3.3.3列规则3.3 CSS Hack 3.3.1标准模式和混杂模式3.3.2什么是css hack3.3.3css hack的原理3.3.4css类内部hack【考核要求】 1.掌握复杂选择器分类1） 兄弟选择器2） 属性选择器3） 伪类选择器4） 伪元素选择器2. 掌握兄弟选择器 - 选择当前元素，平级元素的唯一方式1） 相邻兄弟选择器 - + 选择器1 + 选择器2 选择紧接在另一个元素后的一个元素

50、(平级、一个、相邻之后)2） 通用兄弟选择器 - 选择器1 选择器2 选择之后所有符合条件的平级元素(平级、之后所有)3. 掌握属性选择器 - 自定义选择器条件1） 属性名 - 选择包含指定属性名的所有元素如：title - 选择网页中所有包含title属性的元素缺点：范围比较泛2） 其他属性值属性名 - 选择网页中所有包含指定属性名的指定属性值如：imgtitle - 选择网页中所有包含title的img元素3） 自定义条件(4)语法：其他选择器条件精确条件：属性名=”属性值” - 选择包含指定属性，且属性值等于指定属性值得元素如：pid=”logo” - 选择包含id属性的<p>

51、;元素，其中id属性的值为logo模糊条件：属性名=”关键字” - 选择包含指定属性，且属性值必须以关键字开头如：pclass=”b” - 选择class属性值以b开头的所有<p>元素模糊条件：属性名$=”关键字” - 选择包含指定属性，且属性值必须以关键字结尾如：pclass$=”b” - 选择class属性值以b结尾的所有<p>元素模糊条件：属性名*=”关键字” - 选择包含关键字的指定属性值如：pclass*=”b” - 选择class属性值中包含字串b的所有<p>元素4.掌握伪类选择器1） 目标伪类 - ：target 选取当前正在被跳转到的锚点元素

52、一次只可能选中一个元素唯一一个可以触发其他元素样式变化的伪类2） 结构伪类 - 选择处在特殊位置上的子元素:first-child - 匹配其父元素的首个子元素 - 写在子元素上:last-child - 匹配其父元素的最后一个子元素 - 写在子元素上:only-child - 匹配其父元素唯一子元素 - 写在子元素上:empty - 匹配没有子元素的每个元素，必须为空，空格也不行 -写在父元素上3）否定伪类 ：not( ) - 匹配非指定元素的每个元素5.掌握伪元素选择器1） :first-letter - 用于选取指定选择器的首字母2） :first-line - 用于选取指定选择器的首行

53、3） :selection - 选择器匹配被用户选取的部分 - 了解6.了解多列属性 - 仅IE和opera支持 -不考核1） 分隔列 - column-count:;如：column-count:3;2） 列间隔 - column-gap:;如：column-gap:45px;3） 列规则 - column-rule:;如：column-rule:2px solid red;4） 例如：Html代码：<div>大量文本.(大量文本略)</div>Css代码：divwidth:400px;height:130px;border:1px solid black;colum

54、n-count:3;column-gap:45px;column-rule:2px solid red;7.了解css hack1）为解决浏览器兼容性问题，为特定浏览器专门定义的css代码2）重点解决旧版本浏览器兼容性问题3）css hack的原理css类内部hack - 在css样式属性名前加上一些只有特定浏览器才能识别的hack前缀如：* + - _ # 等选择器hackhtml头部引用hack8.了解浏览器运行模式1）标准模式：严格按照XHTML或html4.0标准解析网页，只要符合标准的网页，在不同浏览器显示效果应该是一致的2）混杂模式：按照浏览器自带的规则解析网页，没有标准可循，同一

55、网页在不同浏览器显示效果可能不一致解决办法：声明DOCTYPE1.项目1及执行步骤运用属性选择器，实现以上效果1） 在页面插入一个<h1>元素和两个<p>元素2） 给<h1>元素添加title属性和id属性3） 给两个<p>元素添加id属性4） 在样式表中给h1添加黄色背景5） 在样式表中给两个<p>元素添加边框6） 在样式表中修改段落2的文字为红色7） 代码如下：Html代码： <body><h1 title="h1元素" id="h1">h1 text</h1&

56、gt;<p id="p1">段落一</p><p id="p2">段落2</p> </body>Css代码：titlebackground-color:yellow;pidborder:1px solid red;pid="p2"color:red;2.项目2及执行步骤运用结构伪类选择器，实现以上效果1） 向页面插入<div>元素2） 向<div>元素中插入四个<p>元素3） 在样式表中选择第一个元素，字体颜色设置为蓝色4） 在样式表中选择最

57、后一个元素，字体颜色设置为红色5） 在样式表中选择空元素，设置高为20px，并添加绿色边框6） 在样式表中选择<div>唯一子元素，添加黑色边框7） 代码如下：Html代码：<body><div><p>段落1</p><p></p><p>段落2</p><p>段落3</p></div> </body>Css代码：P:first-childcolor:blue;P:last-childcolor:red;P:emptyborder:1px sol

58、id green;height:20px;div:only-childborder:1px solid black;第四单元 CSS3高级4.1 转换4.1.1转换简介4.1.1.1什么是转换4.1.1.2转换属性4.1.1.3转换的原点4.1.22D转换4.1.2.12D位移4.1.2.22D缩放4.1.2.32D旋转4.1.2.42D倾斜4.2 过渡4.2.1过渡概述4.2.1.1什么是过渡4.2.1.2过渡示例4.2.1.3触发过渡4.2.2过渡子属性4.2.2.1过渡属性transition-property4.2.2.2过渡时间transition-duration4.2.2.3过渡函数transiti

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论