《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解
精品课件-HTML+CSS+JavaScript网页设计教程-7. 第五章 网页设计综合案例
第5章 网页设计综合案例
5.4.4 中间的搜索框代 码实现
1. 搜索框的圆角矩形实 现 <!-- 搜索框开始 -->
<div class="topsearch" ></div>
<!-- 搜索框结束 ->
.top-search{ width:450px; height:32px; line-height:32px; border:1px solid
#dfdfdf;/*设置层的边框样式*/ background-
color:#f3f6f8;/*设置背景颜色 样式*/
/* 匹配不同浏览器的圆角 边框*/
第5章 网页设计综合案例
5.4.4 中间的搜索框代码实现
2.搜索框的布局实现具体代码如下：
<!-- 搜索框开始 --> <div class="top-search" >
第5章 网页设计综合案例
5.3.2 标签页图标和文字显示 一般要求标签页图标格式是.ico格式，文件名一般命名为 favicon,favicon是favorites icon的缩写。对于不同的浏览 器，要求不同，对于IE浏览器，要求favicon.ico文件必须放 置在网站根目录下，浏览器会自动检索。而对于火狐浏览器或 谷歌浏览器图标格式没有IE那么严格，GIF和PNG格式的图标也 可以显示，图标名称也可以不是favcion，文件位置也可以不 是网站根目录。
《HTMLCSSJavaScript网页制作三合一案例教程》教学课件13第十三章
《HTMLCSSJavaScript网页制作三合一案例教程》教学课件13第十三章以下是根据题目《HTMLCSSJavaScript网页制作三合一案例教程》教学课件13第十三章所编写的文章：
HTMLCSSJavaScript网页制作三合一案例教程
在本章中，我们将介绍一个HTMLCSSJavaScript的网页制作三合一案例教程。通过学习这个案例，您将掌握使用HTML、CSS和JavaScript来创建一个完整的网页。
一、案例介绍
本案例是一个简单的个人博客网页制作案例。我们将使用HTML来构建网页的骨架结构，使用CSS来美化网页的样式，使用JavaScript来添加交互功能。
二、网页结构
1. HTML结构
我们首先使用HTML来创建网页的骨架结构。在HTML文件中，我们可以使用不同的标签来定义网页的各个部分，如头部、导航栏、内容和页脚等。通过合理的使用这些标签，我们可以建立一个清晰的网页结构。
2. CSS样式
接下来，我们使用CSS来美化网页的样式。通过为各个HTML元
素添加样式规则，我们可以改变它们的颜色、大小、字体等外观特性。同时，我们也可以使用CSS来创建布局，通过控制元素的位置和大小
来实现网页的整体排版。
3. JavaScript交互
最后，我们使用JavaScript来添加网页的交互功能。通过JavaScript
编写的代码，我们可以实现一些动态效果，比如点击按钮弹出提示框，显示隐藏的内容等。这些交互功能可以增强用户对网页的体验，并且
使网页更加生动有趣。
三、案例实现步骤
下面是案例实现的主要步骤：
网页设计教学大纲
网页设计教学大纲
第一部分：介绍
随着互联网的普及，网页设计已成为一门热门的技能。本教学大纲旨在帮助学生全面了解网页设计的基础知识和技能，为将来从事相关工作打下坚实基础。
第二部分：课程目标
1. 熟悉网页设计的基本概念和术语。
2. 掌握网页设计的基本流程和方法。
3. 学会运用HTML、CSS等技术进行网页设计。
4. 培养学生的审美观和设计能力。
5. 培养学生的团队合作和沟通能力。
第三部分：课程内容
1. 网页设计概述
- 什么是网页设计
- 网页设计的重要性
- 网页设计的基本原则
2. HTML基础
- HTML的概念和历史
- HTML标签的基本语法- 常用HTML标签和属性3. CSS基础
- CSS的作用和概念
- CSS样式表的引入方式- 常用CSS样式和属性4. 网页布局设计
- 盒模型的理解
- 浮动和定位的运用
- 响应式设计的概念
5. 图片和多媒体设计
- 图片格式和优化
- 视频和音频的插入
- 图片和视频的响应式处理6. 网页交互设计
- 链接和导航设计
- 表单设计和验证
- JavaScript的基本概念
第四部分：教学方法
1. 理论教学结合实践，通过案例分析和练习，帮助学生更好地理解
和掌握知识。
2. 鼓励学生独立思考和创新，培养其解决问题的能力。
3. 注重学生的实际操作能力，通过实际项目实践，提高学生的技能
水平。
4. 培养学生的团队合作和沟通能力，鼓励学生互相学习和交流经验。
第五部分：评估方式
1. 期中考试：主要考查学生对基本概念和技能的掌握程度。
2. 课堂作业：包括布置的实践项目和练习，检验学生的实际操作能力。
《HTML+CSS+JavaScript网页制作案例教程》课程教学Design
传智播客
《HTML+CSS+JavaScript网页制作案例教程》
教学设计
课程名称：HTML+CSS+JavaScript网页制作案例教程
授课年级：2015年级
授课学期：2015学年第二学期
教师姓名：某某老师
1
201 年月日
课题名称第5章列表与超链接
计划
课时
6课时
内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。
教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块；
●掌握超链接标记的使用，能够使用超链接定义网页元素；
●掌握CSS伪类，会使用CSS伪类实现超链接特效；
重点及措施
教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。
措施：通过上机操作加强学习和补充案例进行巩固。
难点及措施
教学难点：有序列表、定义列表、链接伪类。
措施：通过上机操作加强学习和补充案例进行巩固。
教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。
教学过程
第一课时
（制作“精美电商悬浮框”，讲解无序列表、有序列表）
复习上节课内容
在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。
1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px，
同时盒子有3px的边框，请问这个盒子的总宽度是多少？（）
教学课件 HTML+CSS+JavaScript网页设计
本章概述 本章的学习目标 主要内容
第1页
Baidu Nhomakorabea
本章概述
• 随着互联网的发展，越来越多的人学会了上网，通过网络，可以 聊天、购物、看新闻、查天气等等。这些功能都是通过访问不同 的网页来完成的，那么网页是怎么制作出来的，我们通过手机、 电脑上网时又如何访问不同的网页呢？本章将从最基本的概念讲 起，告诉读者网页与网站的基本原理，如何设计和开发网页。
第5页
Web
• Web(World Wide Web)即全球广域网，也称万维网，它是一种基 于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图 形信息系统。
• Web的表现形式包括超文本(HyperText)、超媒体(HyperMedia)和超 文本传输协议HTTP(HyperText Transfer Protocol)。
• JavaScript是一种直译式脚本语言，它的解释器称为JavaScript引擎，是浏览器 的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来 给HTML网页增加动态功能。
第14页
主要内容
1.1 网页的基本概念 1.2 网页设计相关技术 1.3 网页设计与开发 1.4 编写第一个HTML页面 1.5 本章小结 1.6 思考和练习
第8页
网站
• 网站(Website)是指在因特网上根据一定的规则，使用HTML等工具 制作的用于展示特定内容相关网页的集合。简单地说，网站是一 种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或 者利用网站来提供相关的网络服务。人们可以通过网页浏览器来 访问网站，获取自己需要的资讯或者享受网络服务。
HTML CSS JavaScript网页制作(第2版)
习题7
8.2在网页中调用 JavaScript
8.1 JavaScript简 介
8.3常见的网页特 效
8.4实训——制 作二级纵向列 表模式的导航 菜单
习题8
9.1网站的开发流程 9.2设计首页布局
9.3首页的制作 9.4制作产品中心页
9.6制作新闻资讯 页
9.5制作产品明细 页
习题9
10.1制作后台管理 登录页面
HTML+CSS+JavaScript网页 制作（第2版）
读书笔记模板
01 思维导图
03 目录分析 05 读书笔记
目录
02 内容摘要 04 作者介绍 06 精彩摘录
思维导图
本书关键字分析思维导图
制作
网页
开发
结构
橱柜
习题
制作
网页
网页
项目 页面
样式
第版
梦想
结构
布局
元素
第章
设置
内容摘要
《HTML+CSS+JavaScript网页制作第2版》面向网站开发与网页制作的读者，采用全新流行的Web标准，以 HTML技术为基础，由浅入深、完整详细地介绍了HTML、CSS及JavaScript网页制作内容。本书内容紧扣国家对高 职高专培养高级应用型、复合型人才的技能水平和知识结构的要求，以梦想橱柜项目案例的开发思路为主线，采 用模块分解、任务驱动、子任务实现和代码设计四层结构，通过对模块中每个任务相应知识点的讲解，引导读者 学习网页制作、设计、规划的基本知识以及项目开发、测试的完整流程。本书适合作为高等学校、职业院校计算 机及相关专业或培训班的网站开发与网页制作教材。本书配套授课电子课件，需要的教师可登录免费注册、审核 通过后下载，或联系编辑索取（QQ：，**：010-）。
《HTML CSS JavaScript网页制作三合一案例教程》教学课件 01第一章
27
HTML标签是由尖括号括起来的关键词，绝大多数HTML标签都是成对出 现的，包含标记头< >和标记尾< / >。标记头是开始标签，标记尾是结束 标签，中间是元素内容，如段落标签<p></p>。除双标签外也存在少量 的单标签，如换行标签<br/>。 HTML文档源码中一行可以写多个不同的标签，也可将一对标签写在不 同的行中，但每对标签必须嵌套使用，不能交叉使用。下面的列表中列 出了标签的正确用法和错误用法。
8 支撑知识点
三、WWW，HTTP，URL和浏览器
WWW是World Wide Web的缩写，中文称为“万维网〞，也可简称为Web， 它是互联网上的一个资料空间，在这个空间中，任何一个资源都由“统一 资源标识符〞〔URL〕标识，并利用超文本传输协议〔Hypertext Transfer Protocol，HTTP〕传送给使用者。 URL：统一资源标识符，也称为网址，这是世界通用的负责给万维网 上的资源〔如网页〕定位的系统。一个完整的URL由通信协议名称、域 名或IP地址、资源在效劳器中的路径和文件名4局部组成，如图1-5所示。
网页制作 教学大纲
网页制作教学大纲
网页制作教学大纲
一、引言
在当今数字化时代，网页设计与制作已经成为一项重要的技能。无论是个人网站、企业宣传页面还是电子商务平台，都需要精心设计的网页来吸引用户，并提供良好的用户体验。本文将探讨网页制作的教学大纲，以帮助学习者系统学习和掌握网页制作的技能。
二、基础知识
1. 网页制作的概念和发展历程
- 介绍网页制作的定义和背景
- 回顾网页制作的发展历程，从简单的HTML页面到现代的响应式设计
2. HTML与CSS基础
- 介绍HTML和CSS的作用和基本语法
- 学习如何使用HTML标签创建网页结构
- 学习如何使用CSS样式表美化网页
3. 响应式设计与移动优先
- 解释响应式设计的概念和重要性
- 学习如何使用媒体查询和流式布局创建适应不同设备的网页
- 强调移动优先设计的原则和实践
三、进阶技巧
1. 图像和多媒体的应用
- 学习如何插入图像和视频到网页中
- 探讨图像和多媒体的优化和压缩方法，以提高网页加载速度
2. 交互式元素与动画效果
- 学习如何使用JavaScript和CSS动画创建交互式元素和动画效果 - 强调用户体验的重要性，提供用户友好的交互功能
3. 网页导航与布局设计
- 探讨网页导航的设计原则和最佳实践
- 学习如何创建吸引人的网页布局，包括网格系统和平衡布局
四、实践项目
1. 个人网站设计与制作
- 学习如何规划和设计个人网站的结构和内容
- 实践使用HTML、CSS和JavaScript创建个人网站
2. 企业宣传页面设计与制作
- 学习如何根据企业品牌和目标受众设计企业宣传页面
- 实践使用响应式设计和交互式元素创建企业宣传页面
《HTML CSS JavaScript网页制作案例教程》_教学大纲解析
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲
（课程英文名称）
课程编号：201509210011
学分：5学分
学时：64学时（其中：讲课学时：45 上机学时：19 ）
先修课程：计算机基础、计算机网络、计算机应用
后续课程：UI设计、JavaScript网页特效
适用专业：信息及其计算机相关专业
开课部门：计算机系
一、课程的性质与目标
《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS 及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。
二、课程的主要内容及基本要求
第一章网页那点事（2学时）
[知识点]
➢认识网页
➢常见的互联网专业术语
➢Web标准
➢HTML简介
➢CSS简介
➢JavaScript简介
➢常用浏览器介绍
➢Dreamweaver 工具的使用
➢使用Dreamweaver创建第一个页面
[重点]
➢Web标准
➢Dreamweaver工具的使用
[难点]
➢Web标准
➢Dreamweaver工具创建第一个页面
[基本要求]
➢了解Web标准，明确HTML、CSS及JavaScript在其中的作用。
➢熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时）
HTML+CSS+Javascript网站制作案例教程第7章 CSS样式基础
7.1.2
CSS 样式的发展
随着CSS的广泛应用，CSS技术也越来越成熟。CSS现在有3个不同层 次的标准，即CSS1.0、CSS2.0和CSS3.0。CSS1.0主要定义了网页的基本属 性，如字体、颜色和空白边等。CSS2.0在此基础上添加了一些高级功能 ，如浮动和定位，以及一些高级选择器，如子选择器和相邻选择器等。 CSS3.0开始遵循模块化开发，这将有助于理清模块化规范之间的不同关 系，减少完整文件的大小。
CSS样式能够很好的控制页面的显示，以达到分离网页内容和样式代 码。在网页中应用CSS样式表有4种方式：内联样式、嵌入样式、链接外部 样式和导入样式。在实际操作中，选择方式根据设计的不同要求来进行选 择。
7.3.1
内联样式
内联CSS样式是所有CSS样式中比较简单、直观的方法，就是直接把 CSS样式代码添加到HTML的标签中，即作为HTML标签的属性存在。通 过这种方法，可以很简单地对某个元素单独定义样式。
CSS样式是纯文本格式文件，在编辑CSS时，可以使用一些简单的纯 文本编辑工具，例如记事本，同样也可以使用专业的CSS编辑工具，例如 Dreamweaver。CSS样式是由若干条样式规则组成的，这些样式规则可以 应用到不同的元素或文档中来定义他们所显示的外观。
7.2.1
CSS 样式基本语法பைடு நூலகம்
CSS样式由选择符和属性构成，CSS样式的基本语法如下。
HTML+CSS+Javascript网站制作案例教程第1章 网站建设基础
作为上网的主要依托，网页由于人们频繁地使用网络而变得越来越重要， 这使得网页设计也得到了发展。网页讲究的是排版布局，其目的就是提供一 种布局更合理、功能更强大、使用更方便的形式给每一个浏览者，使他们能 够愉快、轻松、快捷地了解网页所提供的信息。
1.2.1
网站与网页
网页是Internet的基本信息单位，英文为Web Page。一般网页上都会有 文本和图片等信息，而复杂一些的网页上还会有声音、视频、动画等多媒体 内容。进入网站首先看到的是其主页，主页集成了指向二级页面以及其他网 站的链接。浏览者进入主页后可以浏览相应的网页内容并找到感兴趣的主题 链接，通过单击该链接可以跳转到其他网页，如图1-4所示为新浪网站首页
要想制作出精美的网站页面，需要综合运用各种网页制作工具和技术才 能完成，本节将向读者简单介绍网站开发常用的软件和技术。
1.3.1
网页编辑软件Dreamweaver
Dreamweaver是网页设计与制作领域中用户最多、应用最广泛、功能 最强大的软件，无论是在国内还是在国外，它都是备受专业网站开发人员的 喜爱，目前最新的版本为Dreamweaver CC。Dreamweaver用于网页的整体 布局和设计，以及对网站的创建和管理，Dreamweaver 还提供了许多与编 码相关的工具和功能，利用它可以轻而易举地制作出充满动感的网页。本书 所涉及到的HTML、CSS和JavaScript都将在Dreamweaver中进行编写和处 理。
《网页设计与制作(HTML+CSS)》课程教学大纲
《网页设计与制作(HTML+CSS)》课程教学大纲
任课教师：***
编写时间：2018-12-14
一、课程的性质与目标
《网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课，涉及计算机基础、互联网等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业，门户，电商类网站。
二、课程的主要内容及基本要求
网页制作教学大纲
网页制作教学大纲
网页制作教学大纲
随着互联网的迅猛发展，网页制作已经成为了一种非常重要的技能。无论是个
人还是企业，都需要一个优秀的网页来展示自己的形象和产品。因此，学习网
页制作已经成为了现代人必备的一项技能。本文将为大家提供一份网页制作教
学大纲，帮助初学者快速入门。
一、HTML基础
1.1 什么是HTML
HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。学习HTML是网页制作的第一步。本节将介绍HTML的基本概念和语法规则。
1.2 HTML标签
HTML标签是用于定义网页结构和内容的元素。本节将介绍HTML常用的标签，如标题标签、段落标签、链接标签等，并讲解它们的使用方法。
1.3 HTML属性
HTML属性是用于为HTML元素提供额外的信息。本节将介绍HTML常用的属性，如颜色属性、字体属性等，并讲解如何使用这些属性来美化网页。
二、CSS样式设计
2.1 什么是CSS
CSS（Cascading Style Sheets）是一种用于描述网页样式的语言。学习CSS可以帮助我们为网页添加各种各样的样式，使其更加美观和易读。本节将介绍CSS
的基本概念和语法规则。
2.2 CSS选择器
CSS选择器用于选择要应用样式的HTML元素。本节将介绍CSS常用的选择器，如标签选择器、类选择器、ID选择器等，并讲解它们的使用方法。
2.3 CSS样式属性
CSS样式属性用于定义HTML元素的样式。本节将介绍CSS常用的样式属性，
如背景颜色、字体大小、边框样式等，并讲解如何使用这些属性来美化网页。
网页制作教学大纲
网页制作教学大纲
网页制作教学大纲
随着互联网的快速发展，网页制作已经成为一项重要的技能。无论是个人博客、企业官网还是电子商务平台，都需要一个精美、实用的网页来吸引用户。因此，学习网页制作成为了许多人的追求。本文将为大家介绍一份完整的网页制作教
学大纲，帮助读者系统地学习网页制作的各个方面。
一、HTML基础知识
1.1 HTML简介
HTML是网页制作的基础语言，学习HTML的基本概念和语法是网页制作的第
一步。本节将介绍HTML的历史背景、基本标签和常用属性。
1.2 HTML文档结构
学习HTML文档的结构对于编写整洁、有序的网页至关重要。本节将介绍
HTML文档的基本结构，包括DOCTYPE声明、html、head和body标签的作用。
1.3 HTML文本标签
网页中的文本是最基本的元素，学习如何使用HTML标签来定义文本的样式和
结构是网页制作的核心。本节将介绍常用的文本标签，如p、h1-h6、strong、em等。
二、CSS样式设计
2.1 CSS简介
CSS是网页样式设计的关键技术，学习CSS可以为网页增加丰富的样式和布局
效果。本节将介绍CSS的基本概念和语法。
2.2 CSS选择器
选择器是CSS中最重要的概念之一，通过选择器可以选择特定的HTML元素并
为其添加样式。本节将介绍常用的选择器，如标签选择器、类选择器、ID选择
器等。
2.3 CSS样式属性
掌握常用的CSS样式属性可以使网页呈现出各种各样的效果。本节将介绍常用
的样式属性，如背景、边框、字体、颜色等。
三、响应式网页设计
3.1 移动设备的普及
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲
（课程英文名称）
课程编号：201509210011
学分：5学分
学时：64学时（其中：讲课学时：45 上机学时： 19 ）
先修课程：计算机基础、计算机网络、计算机应用
后续课程：UI设计、 JavaScript网页特效
适用专业：信息及其计算机相关专业
开课部门：计算机系
一、课程的性质与目标
《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。
二、课程的主要内容及基本要求
第一章网页那点事（2学时）
[知识点]
认识网页
常见的互联网专业术语
Web标准
HTML简介
CSS简介
JavaScript简介
常用浏览器介绍
Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面
[重点]
Web标准
Dreamweaver工具的使用
[难点]
Web标准
Dreamweaver工具创建第一个页面
[基本要求]
了解Web标准，明确HTML、CSS及JavaScript在其中的作用。
熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时）
[相关案例]
【案例1】简单的网页：
【案例2】新闻页面：
【案例3】图文混排：
[知识点]
HTML文档基本格式
单标记与双标记
标题与段落标记
HTML文档头部相关标记
font标记
标记的属性
文本格式化标记
图像标记
相对路径与绝对路径
常用图像格式
特殊字符标记
[重点]
HTML文档基本格式
标记的属性
图像标记
相对路径与绝对路径
[难点]
相对路径与绝对路径
[学习目标]
掌握HTML文档基本格式，能够书写规范的HTML网页。
掌握标题、段落及文字标记，可以合理地使用它们定义网页元素。
掌握图像标记，学会制作图文混排页面。
第三章使用CSS技术美化网页（8学时）
[相关案例]
【案例4】文字Logo：
【案例5】专题栏目：
【案例6】搜索页面：
[知识点]
CSS样式规则
引入CSS样式表
CSS基础选择器
CSS字体样式属性
CSS文本外观属性
CSS复合选择器
CSS层叠性与继承性
CSS优先级
[重点]
CSS样式规则
引入CSS样式表
CSS复合选择器
CSS层叠性与继承性
CSS优先级
[难点]
CSS复合选择器
CSS优先级
[基本要求]
掌握CSS样式规则，能够书写规范的CSS样式代码。
掌握CSS字体样式及文本外观属性，能够控制页面中的文本样式。
掌握CSS复合选择器，可以快捷选择页面中的元素。
理解CSS层叠性、继承性与优先级，学会高效控制网页元素。第四章 CSS盒子模型（8学时）
[相关案例]
【案例7】音乐盒：
【案例8】用户中心：
【案例9】咖啡店banner：
【案例10】图标导航栏：
[知识点]
认识盒子模型
div标记
边框属性
内边距属性
外边距属性
背景属性
元素的类型
span标记
元素的转换
[重点]
div标记
边框属性
内边距属性
外边距属性
背景属性
元素的转换
[难点]
背景属性
元素的类型
元素的转换
[基本要求]
掌握盒子模型相关属性，能够使用它们熟练地控制网页元素。 理解块元素与行内元素的区别，能够对它们进行转换。
第五章列表与超链接（6学时）[相关案例]
【案例11】精美电商悬浮框：
【案例12】二维码名片：
【案例13】电商团购悬浮框：
【案例14】唱吧导航栏：
唱吧导航栏默认效果
鼠标移上歌曲分类时
[知识点]
无序列表
有序列表
定义列表
定义列表实现图文混排
列表嵌套
list-style复合属性
背景图像定义列表项目符号
清除超链接图像的边框
链接伪类
锚点链接
[重点]
无序列表
定义列表
背景图像定义列表项目符号
链接伪类
[难点]
背景图像定义列表项目符号
链接伪类
[基本要求]
掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块。 掌握超链接标记的使用，能够使用超链接定义网页元素。
掌握CSS伪类，会使用CSS伪类实现超链接特效。
第六章 HTML表单（6学时）
[相关案例]
【案例15】用户登录界面：
【案例16】趣味选择题：