Web编程基础（HTML+CSS）项目实战教程(高职)PPT完整全套教学课件

WEB模块1-网站的设计与策划-4课时模块2-制作图文并茂的新闻页面-4课时模块3-CSS美化修饰-16课时模块4-制作网站的最新动态页面-8课时模块5-制作网站的多媒体相册页面-8课时模块6-制作网站的会员注册页面-10课时模块7-网站首页的设计制作-4课时模块8-企业级项目综合应用-10课时模块1：网站的设计与策划WEB模块1：网站的设计与策划理解网页与网站的相关概念；掌握HTML、CSS、JavaScript技术在网页设计中的作用；掌握使用HBuilderX编辑工具，能够灵活创建完整项目；掌握常用的浏览工具及浏览HTML文档的方法。模块1：网站的设计与策划任务1：认识网页与网站任务2：认识网页开发技术任务3：设计策划网站任务4：选择网页开发工具任务1：认识网页与网站WEB认识网页与网站网页与网站的相关概念服务器与客户端网页与网站的相关概念网站：指在因特网上根据一定的规则，使用HTML等制作的，用于展示特定的、内容相关的网页集合。网页：构成网站的基本元素，通常由文字、图片、链接、视频等元素组成，网页类型是一个html文件，常见的文件后缀名为.html或.htm。主页：用户登录网站后看到的第一个页面，它体现了网站的形象，是最重要的一页，也称为首页。内页：通过主页中的超链接打开的网页。网页与网站的相关概念：是一个网站，用户登录网站后看到的第一个页面就是主页。迪士尼中国官网网站首页网站内页服务器与客户端服务器（Server）：是为客户端服务的，服务的内容诸如向客户端提供资源、保存客户端数据。客户端（Client）：也称用户端，是指与服务器相对应，为客户提供本地服务的程序。服务器与客户端客户端的任务：客户端的作用是将用户的要求提交给服务器，再将服务器返回的结果以特定的形式通过客户端浏览器解析后显示给用户。服务器的任务：是接收客户端提出的服务请求，进行相应的处理，再将结果返回给客户端浏览器。服务器与客户端服务器与客户端的关系：课堂实训任务描述：创建班级网站页面结构，页面效果如图所示。任务1-认识网页与网站对网页与网站的基本概念有整体的认识能够区分服务器与客户端的关系课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务2：认识网页开发技术WEB认识网页开发技术Web前端的概念Web前端开发技术Web前端的概念Web开发主要分为Web前端开发和Web后端开发两部分。Web前端，是指直接与用户接触的网页，最初Web前端开发是指浏览器端网页的设计开发。Web后端，是指服务器端的程序编写，包括程序、数据库和服务器层面的开发。Web前端的概念Internet上供外界访问的Web资源分为：静态Web资源：是指Web页面中供用户浏览的数据是始终不变的，如html页面。动态Web资源：是指Web页面中供用户浏览的数据是由程序产生的，不同时间点访问web页面看到的内容各不相同。Web前端的概念Web开发具有五大特点：图形化：可以在一页上同时显示色彩丰富的图形和文本的性能。与平台无关：可以通过Internet访问WWW，与操作系统平台无关。分布式的：信息可以放在不同的站点上，只需要在浏览器中指明这个站点就可以。动态的：是指信息内容的动态更新，以及网页的交互性。交互的：主要表现在它的超链接上。BootstrapJavaScriptCSSHTML超文本标记语言，用来描述网页内容，创建网页结构。234是网页的脚本语言，用来为网页增加动态功能和交互性。Web前端开发技术实现响应式Web设计，即一个网页设计，多个设备使用。1层叠样式表，用于美化网页内容、布局网页结构、统一网站风格。Web前端开发技术Web前端开发技术使用HTML+CSS技术，可以设计出简单的Web网页。如下图所示：迪士尼网站——“米奇和他的朋友们”的网页Web前端开发技术使用HTML、CSS和JavaScript技术，制作页面，当用户单击“查看”按钮时，弹出消息对话框显示“helloworld.”，运行效果如图所示。1：制作网页中的“查看”按钮任务2-认识网页开发技术Web前端是指直接与用户接触的网页Web后端更多指处理相应的业务逻辑和服务器层面的程序。HTML通过超文本标记创建网页基础架构CSS用来美化网页、控制页面布局JavaScript用于实现网页的动态性和交互性课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务3：设计策划网站WEB设计策划网站网页设计原则网站制作流程网页设计原则国字型结构布局：最上面是网站的标志、导航栏以及横幅广告条；接下来就是网站的主要内容，左右分列，中间是主要部分；最下面是网站的一些基本信息，如版权声明、联系方式等。1.网页的布局网页设计原则川字型结构布局：整个页面在垂直方向分为三列，网站的内容按栏目分布在这三列中，最大限度地突出主页的索引功能。例如：搜狐网站，如右图所示。1.网页的布局网页设计原则新闻网首页布局：本教材将要制作的“新闻网”首页自上而下，是简洁的上中下结构，最上面的是导航栏，中间的为内容主体区，下面的是版权区。1.网页的布局网页设计原则网页色彩搭配原则色彩的鲜明性如果一个网站的色彩鲜明，很容易引人注意，给浏览者耳目一新的感觉。(2)色彩的独特性

网页的用色必须有自己独特的风格，这样才能给浏览者留下深刻的印象。(3)色彩的艺术性在考虑网站本身特点的同时，大胆进行艺术创新，设计出既符合网站要求，又具有一定艺术特色的网站。(4)色彩搭配的合理性色彩根据主题来确定，不同的主题选用不同的色彩。2.网页的配色网页设计原则网页色彩搭配方法同种色彩搭配：是指先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。(2)邻近色彩搭配：色环上相邻的颜色，如在计算机Photoshop中的红绿蓝(RGB)色环上红色和黄色即互为邻近色，这样的页面看起来色彩丰富，但没有强烈的视觉冲击感。(3)对比色彩搭配：可以突出重点，产生强烈的视觉效果。(4)暖色色彩搭配：是指使用红色、黄色、橙色等色彩的搭配。(5)冷色色彩搭配：是指使用绿色、蓝色、紫色等色彩的搭配。(6)主色的混合色彩搭配：是指以一种颜色为主，同时辅以其他色彩混合搭配。2.网页的配色网页设计原则帝尔复读机网站网站制作流程规划与准备阶段网页设计与制作阶段网站的测试、发布和维护阶段1.规划与准备阶段决定主题，确定网站的用途：主题要小而精，题材最好是擅长或者喜爱的内容，要新颖且符合自己的实际能力。收集资料和素材：网页中常用的素材种类有文字、图片、音频、视频和动画等。网站的素材选择要跟网站的主题和风格密切相关。规划网站结构：网站由几个主要的栏目组成，这些栏目是网站的核心内容，体现了网站的核心价值。1.规划与准备阶段新闻网网站规划本教材要制作的新闻网网站规划，如下图所示：2.网页设计与制作阶段对网站风格有一个整体定位：网站Logo、网页标题、导航栏、网页文字、版面设计、网页的配色。设计首页、二级栏目页及内容页。利用超链接把各页面有机地整合到一起。2.网页设计与制作阶段新闻网目录结构本教材要制作的新闻网网站结构，如下图所示：3.网站的测试、发布和维护阶段网站测试、发布网站测试阶段一般是在本地计算机上模拟服务器进行测试。测试好后，如果有服务器，直接发布即可；如果没有服务器，可以从网上租赁空间发布。维护和更新每隔一段时间，需要定期对其内容进行维护和更新，以便提供最新信息，吸引更多的用户。任务3-设计策划网站了解各种类型网页的布局结构和色彩搭配，建立合理的网页结构布局。网站制作流程的三阶段是规划与准备、网页设计与制作、网站的测试发布和维护。课堂实训任务描述：制作班级网站中学习交流页面，初步了解HTML文档的基本结构，体会网页中添加文本内容的方法，体会使用CSS样式修饰美化页面，页面效果如图所示。课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务4：选择网页开发工具WEB选择网页开发工具编写工具浏览工具编写工具HBuilderX可以在HBuilderX官网http://www.dcloud.io/点击免费下载，下载最新版的HBuilderX。

HBuilderX

目前有两个版本，一个是Windows版，一个是macOS版。下载时根据自己计算机的操作系统，选择合适自己的版本。下载后，解压，无需安装，双击运行可执行文件HBuilderX.exe即可启动HBuilderX开发环境。

HbuilderX下载与安装编写工具打开HBuilderX，依次单击文件新建项目，会打开“新建项目”对话框，如图所示：新建Web项目编写工具在左侧项目管理器中，选择新建的项目，右击，依次选择新建html文件，打开“新建html文件”对话框，如下左图所示。键入新建html文件名，单击“浏览”按钮选择保存位置；然后单击“创建”按钮，会打开新建的html页面，代码窗口出现模板的代码，如下右图所示。新建HTML文件编写工具在左侧项目管理器中，新建的项目下右击“CSS”子目录，依次选择新建CSS文件，打开“新建css文件”对话框，如下图所示。键入新建css文件的文件名，单击“创建”按钮即可完成。新建CSS文件浏览工具对于页面设计而言，浏览器的支持情况至关重要，各大浏览器对HTML的支持正在不断完善。目前，Chrome对HTML5支持最好。常用的五类浏览器：浏览工具2.打开安装好的Web浏览器方法一：单击“运行”菜单，选择安装好的任何一个浏览器，即可打开相应的浏览器浏览网页效果。方法二：单击工具栏上的图标右侧的三角按钮，可以选择安装好的任意浏览器浏览网页文件。1.打开集成的Web浏览器方法一：单击“视图”菜单下，“显示内置浏览器”，即可打开集成的“Web浏览器”视图窗口，用户可以浏览到显示效果。方法二：单击工具栏右侧的“预览”，可以浏览页面显示效果。浏览工具已编写好一个HTML文档，如左图所示；浏览页面效果，如右图所示。简单的Web网页演示任务4-选择网页开发工具网页的本质是纯文本文件，可以用任何文本编辑器制作网页，为提高网页制作效率，可以借助专业的开发工具主要有EditPlus、Dreamweaver、HBuilderX等。在网页开发工具中，能灵活运用HBuilderX工具创建一个完整的Web项目，体验在HBuilderX环境下进行HTML的创建与浏览。课堂实训任务描述：制作班级公告栏，使用HTML创建网页结构，初步使用CSS技术简单修饰页面样式，通过<marquee>标记控制公告内容自下而上循环滚动，最后通过JavaScript程序代码响应鼠标操作。当鼠标在滚动字幕上悬浮时，字幕停止滚动；当鼠标离开滚动字幕时，字幕继续滚动，页面效果如图所示。课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务模块2：制作图文并茂的新闻页面WEB模块2：制作图文并茂的新闻页面掌握HTML文档的基本结构；掌握HTML文本标记和属性的使用方法；掌握添加普通文本、标题和特殊符号的方法；掌握水平线和换行标记的使用；掌握div和span标记的使用；掌握图像标记img的基本使用。模块2：制作图文并茂的新闻页面任务1：创建网页结构任务2：添加网页文本内容任务3：设置网页图文并茂任务1：创建网页结构WEB2.1任务1：创建网页结构【任务描述】本任务主要完成对“致敬最美逆行者”新闻页面的文档结构创建，使学习者掌握HTML网页文档的基本结构，掌握文档结构中的基本标签，了解标签、属性的含义，掌握标签的语法和代码的规范书写。创建网页结构HTML文档结构HTML基本语法Head标记HTML文档结构HTML文档的基本结构包含如下内容：课堂实训任务描述：制作我的第一张网页，熟练掌握HTML文档结构创建，修改标题、正文内容等，页面效果如图所示。小结：HTML文档结构<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>网页标题</title> </head> <body>

网页正文内容 </body></html>文档类型声明html标记对head标记对body标记对文件头文件体HTML

不是一种编程语言，而是一种描述性的标记语言。HTML标记用来描述HTML元素。HTML标记是由尖括号（“<”和“>”）包围的关键词，如标记<html>。HTML基本语法标记不区分大小写，所以<html>和<HTML>的含义相同，推荐使用小写。

语法格式为：<开始标记>内容</结束标记>HTML基本语法尖括号结束标记内容开始标记斜杠<body>这是我的第一个网页。</body>HTML基本语法HTML注释

注释标签<!--此处是注释内容-->用于在

HTML

插入注释。注意：浏览器不会显示注释的内容，但是能够帮助记录HTML

文档。可以使用注释在HTML

中放置通知和提醒信息。课堂实训任务描述：制作页面，效果如图所示，重点分析文档结构，基本语法，并且在文档中添加作者、所使用的开发工具和软件开发时间等注释信息。Head标记<html>

<head>

<metacharset="utf-8">

<title>文档的标题</title>

</head>

<body>

文档的内容......

</body></html>Head标记的定义和用法Head标记制作页面，当用户单击“查看”按钮时，弹出消息对话框显示“helloworld.”，运行效果如图所示。在head标记中定义样式和脚本。任务1-创建网页结构HTML文档，以<html>标记开始文档，以</html>标记结束文档；文档中包含<head>…</head>和<body>…</body>两部分；HTML标记分为

单标记

和

双标记；注释标签<!--与-->用于在HTML插入注释。课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务2：添加网页文本内容WEB2.2任务2：添加网页文本内容【任务描述】本任务主要是使用经过精心处理的文字材料，制作“致敬最美逆行者”新闻页面中的文章标题和段落内容部分，并通过对文字与段落属性的设置来提高文字的艺术表现力。其目的是使学习者掌握网页中最基本的标题标记、段落标记、水平线、换行、注释语句及特殊字符等。添加网页文本内容标题与段落标记水平线标记换行标记特殊字符div与span标记标题和段落标记标题是通过<h1>至<h6>标记进行定义的。<h1>定义重要等级最高的标题。<h6>定义重要等级最低的标题。例如：<h1>一级标题</h1><h2>二级标题</h2>标题标记定义和用法：标题和段落标记在页面中创建教材目录，效果如下图所示。1：标题标记的应用。标题和段落标记HTML

的<p>标记（或者说

HTML段落标记）表示文本的一个段落。使用<p></p>一对标记定义段落。<p>标记会自动在段落的前后添加一个空白行。段落标记定义和用法：标题和段落标记应用标题标记和段落标记制作唐诗欣赏页面，效果如下图所示。2：段落标记的应用。课堂实训任务描述：如果想实现每行一句唐诗的效果，如下图所示，该怎么实现呢？试一试。换行标记使用<br>标记可在网页中插入一个换行符。<br>标记是空标记（意味着它没有结束标记，因此这样用<br></br>是错误的）。换行标记与段落标记的区别是什么？换行标记定义和用法：水平线标记使用<hr>标记可在网页中插入一条横跨整个窗口的水平分隔线。<hrsize=""color=""width=""align="">水平线标记定义和用法：水平线标记3：水平线标记的应用。换行标记4：换行标记的应用。特殊字符HTML中<，>，&等有特殊含义（<

>，用于定义标记，&用于转义），不能直接使用。在网页中输入特殊字符，需在html代码中加入以&开头的字母组合或以&#开头的数字。特殊字符的定义和用法：显示说明实体名称实体编号不断行的空格

 <小于号<<>大于号>>&&符号&&"双引号""©版权©©®已注册商标®®×乘号××÷除号÷÷特殊字符常用的字符实体课堂实训任务描述：如果想实现如下图所示页面效果，该怎么实现呢？试一试。div与span标记div是一个块标记，一般用于网页布局；span是行级元素(行内标记)，一般用于局部文字的样式，没有结构的意义，纯粹是应用样式；相对与其他HTML标记div和span对于它们包含的元素是没有意义的；div与span的另一个区别就是div会造成换行，而span则不会。定义和用法：div与span标记应用div和span标记实现如下图所示页面效果，并总结两个标记的功能和特点。5：div与span标记的应用课堂实训：制作图文并茂的班级学习交流页面任务描述：构建网页页面并在网页中添加网页文本内容，插入图像，并通过标记和属性对页面中的文本进行简单样式修饰，如颜色、强调、倾斜、右对齐等，页面效果如图所示。任务2-添加网页文本内容标题和段落标记换行标记水平线标记特殊字符的使用div和span标记的使用课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务3：设置网页图文并茂WEB2.3任务3：设置网页图文并茂【任务描述】本任务主要是模拟制作项目中“新闻详页”页面，使学习者能够利用<img>标记进行图片展示，同时了解图像标记<img>的简单属性设置，如src、alt、title、align等。设置网页图文并茂插入图像网页中支持的图像文件格式插入图像插入图像的语法格式是： <imgsrc="url"alt=""width=""title=""><img>是空标记，也就是说，它只包含属性，并且没有闭合标记。要在页面上显示图像，需要在<img>标记中使用源属性src，

src指“source”，源属性的值是图像的URL地址。插入图像

在网页中插入图像，并设置图像alt属性和title属性。6：图像标记的应用我们通常在网上见到的图片有哪些文件格式类型？各自特点是什么？

网页中支持的图像文件格式图像类型优点缺点适用场合*.jpg体积小，比较清晰有损压缩、画面失真网页图片*.gif支持Internet标准,支持无损耗压缩和透明度，很流行支持有限的透明度,效果不如别的图像网页图片*.swf体积小,便于网络传输制作麻烦网页动画*.bmp支持24位颜色深度，兼容性好不支持压缩容量大桌面墙纸网页中支持的图像文件格式课堂实训：任务描述：制作班级公告栏页面，熟练掌握HTML文档的基本结构，掌握网页中添加文本内容的方法，并对页面进行样式修饰，页面效果如图所示。知识进阶：文本格式化文本格式标记，在一个HTML文件中，就是对文本进行格式化的。7：文本格式标记的应用知识进阶：预格式文本<pre>标记：预格式文本标记，通常会保留空格和换行符，很适合显示计算机代码。8：预格式文本标记应用知识进阶：HTML引用用于表达显示的文本是引用的一句诗、一句名人名言、一段话、特殊的缩略语等。标签说明特点<q>定义短的行内引用quote浏览器通常用双引号将<q>元素的内容括起来<blockquote>定义长的引用，一般是从其他来源引用的节浏览器通常会对<blockquote>元素进行缩进处理<abbr>定义缩写或首字母缩略语abbreviation通过对缩写进行标记，能够为浏览器、翻译系统以及搜索引擎提供有用的信息<dfn>定义项目或缩略词的定义一般用于概念、缩写、定义等<address>定义地址或者联系信息此元素通常以斜体显示<cite>定义著作的标题浏览器通常以斜体显示<cite>元素<bdo>定义文本方向，dir属性的值为ltr或者rtl使文本的显示方向从左到右，或者从右到左知识进阶：HTML引用9：HTML引用标记应用任务3-设置网页图文并茂在网页中插入图像，及对图像的属性设置网页中经常使用的图片格式课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务1：修饰文字排版WEB3.1任务1：修饰文字排版【任务描述】通过学习本任务，主要是让学习者了解CSS层叠样式表的概念，掌握CSS各种样式的定义和使用，如内部样式表、外部样式表、行内样式定义。在本任务中，重点学习使用CSS修饰文本、字体、段落排版等最基本的样式修饰。修饰文字排版CSS概述引入CSS的方法CSS选择器CSS特性字体修饰文本修饰CSS通常称为CSS样式或样式表，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS概述CSS的发展历史CSS的发展历史CSS1CSS2CSS2.1CSS31.CSS11996年12月W3C发布了第一个有关样式的标准CSS1.包含了font的相关属性、颜色与背景的相关属性、文字的相关属性、box的相关属性等。4.CSS3早在2001年，W3C就着手开始准备开发CSS第三版规范。虽然完整的、规范权威的CSS3标准还没有尘埃落定。但是各主流浏览器已经开始其中的绝大部分特性。3.CSS2.12004年2月，CSS2.1正式推出。它在CSS2的基础上略微做了改动，删除了许多不被浏览器支持的属性。2.CSS21985年5月，CSS2正式推出，开始使用样式表结构，是目前正在使用的版本。CSS浏览器支持情况定位属性布局属性元素宽高属性CSS3模块Chrome4Safari4Firefox3.6Opera10.5IE10RGBA√√√√√HSLA√√√√√MultipleBackground√√√√√BorderImage√√√√×BorderRadius√√√√√BoxShadow√√√√√Opacity√√√√√CSSAnimations√√××√CSSColumns√√√×√CSSGradients√√√×√CSSReflections√√×××CSSTransforms√√√√√CSSTransforms3D√√××√CSSTransitions√√√√√CSSFontface√√√√√由于各浏览器厂商对CSS3各属性的支持程度不一样，因此在标准尚未明确的情况下，会用厂商的前缀加以区分，通常把这些加上私有前缀的属性称之为“私有属性”。CSS浏览器支持情况内核类型相关浏览器私有前缀TridentIE8/IE9/IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o引入CSS的方法请问：引入CSS样式常用的三种方法？语法格式：任务1.行内式引入CSS修饰页面任务要求：模仿练习：给段落设置样式;强化练习：把标题设置成蓝色<标记名style="属性1:属性值1;属性2:属性值2">内容</标记名>语法格式：任务要求：模仿练习：使用内部嵌入式给段落设置样式;强化练习：把标题设置成蓝色任务2.内嵌式引入CSS修饰页面<head><styletype="text/css">

选择器{属性1:属性值1;属性2:属性值2;}</style></head>语法格式：任务要求：模仿练习：使用外部样式表设置段落样式;强化练习：把标题设置成蓝色任务3.外部样式表引入CSS修饰页面<head><link

href="CSS文件的路径"type="text/css“rel="stylesheet"/></head>CSS选择器标记选择器是指用HTML标记名作为选择器，按标记名分类，为页面中某一类标记指定统一的CSS样式，也称为标签选择器或元素选择器。其基本语法格式为：标记名{

属性1：属性值1;

属性2：属性值2;

属性3：属性值3;

…..}1：标记选择器CSS选择器标记选择器按标记名分类，优点是能快速为页面中同类型的标记统一设置样式。缺点是不能设计差异化样式，只能选择全部的所有当前标记。类选择器，对想要设置成一类型样式的一个标记或者多个标记，命名为同一个类名，即指定class属性的属性值相同，然后在CSS样式定义中，通过类选择器选择出来，统一修饰。在CSS中类选择器的定义，使用英文“.”为前缀，后面紧跟类名。2：类选择器CSS选择器3：多类名的应用。一个HTML标记可以同时指定多个类名，从而达到更多的选择目的。在标记class属性中写多个类名时，多个类名之间必须用空格分开。CSS选择器4：id选择器的应用。id选择器是通过对HTML标记的id属性的值进行选择。网页中任何HTML标记都可以有id属性，但是其id属性的值必须是唯一的。在CSS中id选择器以“#”来定义。CSS选择器5：通配符选择器的应用。在CSS中，通配符选择器使用“*”定义，表示选取页面中所有标记。CSS选择器6：交集选择器的应用。交集选择器，也称为标记指定式选择器，由两个选择器构成，其中第一个为标记选择器，第二个为class选择器或id选择器，两个选择器之间不能有空格。CSS选择器7：并集选择器的应用。并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器（如标记选择器、类选择器、id选择器等）都可以作为并集选择器的一部分。CSS选择器8：后代选择器的应用。后代选择器也称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标记写在前面，内层标记写在后面，中间用空格分隔。空格代表后代关系。CSS选择器9：伪类选择器的应用。伪类选择器，它描述了某一类，这一类并不是我们通常定义的某个类选择器，但是通过伪类选择器可以选定网页元素的某一类状态，例如hover鼠标悬浮在元素上的状态，focus当元素获得焦点时的状态等等。对伪类选择器的定义，使用“:”冒号和伪类名。CSS选择器10：伪元素选择器的应用。CSS伪元素选择器，可以选取元素的一部分或者创建HTML标记无法生成的虚拟元素，或者在特定元素之前、之后添加HTML内容、装饰HTML内容，而不需要更改HTML的结构，这个伪元素在文档中并不真实存在，所以称之为“伪元素”。CSS选择器11：属性选择器的应用。CSS属性选择器，通过带有某个相同属性或设置特定属性值来选取HTML元素的方式。1.层叠性所谓层叠性是指多种CSS样式的叠加。例如，当使用内嵌式CSS样式表定义<p>标记字号大小为12像素，链入式定义<p>标记颜色为红色，那么段落文本将显示为12像素红色，即这两种样式产生了叠加。CSS特性任务要求：模仿练习：多类名的应用，定义red类，font类和green类，第1，3段应用red和font类；第2，4段应用green和font类；其中font中定义文本蓝色强化练习：变换类的定义顺序，和在一个标记中引用多个类的顺序；观察，总结。任务要求：模仿练习：对外层盒子设置文本颜色，倾斜效果；强化练习：设置字号，粗体，观察，总结。CSS特性2.继承性所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：边框属性外边距属性内边距属性背景属性CSS特性定位属性布局属性元素宽高属性任务要求：模仿练习：灵活使用各种选择器，设置如图页面效果。强化练习：总结归纳优先级。CSS特性3.优先级定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。标记选择器具有权重1，类选择器具有权重10，id选择器具有权重100。font-size:字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位，具体如下表所示。相对长度单位说明em相对于当前对象内文本的字体尺寸px像素，最常用，推荐使用绝对长度单位说明in英寸cm厘米mm毫米pt点字体修饰font-family:字体font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。例如：p{font-family:"微软雅黑";}body{font-family:"华文彩云","宋体","黑体";}字体修饰各种字体之间必须使用英文状态下的逗号隔开。中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family:"TimesNewRoman";。尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。使用font-family设置字体时，需要注意以下几点：字体修饰font-weight:字体粗细font-weight属性用于定义字体的粗细，其可用属性值如下表所示。值描述normal默认值。定义标准的字符。bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100~900（100的整数倍）定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗。字体修饰font-style:字体风格font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：normal：默认值，浏览器会显示标准的字体样式。italic：浏览器会显示斜体的字体样式。oblique：浏览器会显示倾斜的字体样式。其中italic和oblique都用于定义斜体，两者在显示效果上并没有本质区别，但实际工作中常使用italic。字体修饰font:综合设置字体样式font属性用于对字体样式进行综合设置，其基本语法格式如下：使用font属性时，必须按上面语法格式中的顺序书写，各个属性以空格隔开。其中line-height指的是行高，在后面将具体介绍。例如：等价于选择器{font:font-stylefont-variantfont-weight/line-heightfont-family;}p{font-family:Arial,"宋体";font-size:30px;font-style:italic;font-weight:bold;font-variant:small-caps;line-height:40px;}p{font:italicsmall-capsbold30px/40pxArial,"宋体";}字体修饰color:文本颜色color属性用于定义文本的颜色，其取值方式有如下3种：预定义的颜色值，如red，green，blue等。十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。文体修饰text-align:水平对齐方式text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：left：左对齐（默认值）right：右对齐。center：居中对齐。例如：h2{text-align:center;}文体修饰text-decoration:文本装饰text-decoration属性用于设置文本的下划线，上划线，删除线等装饰效果，其可用属性值如下：none：没有装饰（正常文本默认值）。underline：下划线。overline：上划线。line-through：删除线。文体修饰text-indent:首行缩进text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值，建议使用em作为设置单位。文体修饰line-height:行间距line-height属性用于设置行间距，所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。文体修饰12：line-height的应用。项目实训任务描述：使用CSS样式，对新闻详页“最美逆行者”中标题、段落、图像等修饰样式，效果如图所示。任务要求：团队讨论，分析出解决方案；独立应用技术，完成项目；提交到平台讨论区，展示、讨论任务1-修饰文字排版了解CSS的发展史及语法规范；理解引入CSS样式的方法；掌握CSS基本选择器的使用；掌握文字的字体修饰和文本修饰；课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务2：控制元素属性WEB3.2任务2：控制元素属性【任务描述】通过学习本任务，主要是让学习者重点掌握“万物皆盒子”的思想。用这个假设的盒子模型设置各元素与网页之间的空白距离，如元素的边框宽度、颜色、样式，以及元素内容与边框之间的空白距离。通过盒子模型来控制网页中元素的位置、布局属性等。控制元素属性盒子模型边框属性边距属性浮动定位盒子模型margin-leftborder-leftpadding-leftmargin-topborder-toppadding-toppadding-bottomborder-bottommargin-bottommargin-rightborder-rightpadding-rightcontent盒子模型网页是由多个盒子排列而成的，每个盒子都有固定的大小，在CSS中使用宽度属性width和高度属性height可以对盒子的大小进行控制。width和height的属性值可以为不同单位的数值或相对于父元素的百分比，实际工作中最常用的是像素值。注意：宽度属性width和高度属性height仅适用于块级元素，对行内元素无效（<img/>标记和<input/>除外）。边框属性边框样式（border-style）在CSS属性中，border-style属性用于设置边框样式。其基本语法格式如下：solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线border-style:上边[右边下边左边];边框属性边框宽度（border-width）border-width属性用于设置边框的宽度，其基本语法格式如下：在上面的语法格式中，border-width属性常用取值单位为像素px。并且同样遵循值复制的原则，其属性值可以设置1~4个，即一个值为四边，两个值为上下/左右，三个值为上/左右/下，四个值为上/右/下/左。border-width:上边[右边下边左边];边框属性边框颜色（border-color）border-color属性用于设置边框的颜色，其基本语法格式如下：CSS3在原边框颜色属性（border-color）的基础上派生了4个边框颜色属性。border-top-colorsborder-right-colorsborder-bottom-colorsborder-left-colorsborder-color:上边[右边下边左边];边框属性综合设置边框使用border-style、border-width、border-color虽然可以实现丰富的边框效果，但是这种方式书写的代码繁琐，且不便于阅读，为此CSS提供了更简单的边框设置方式，其基本格式如下：border:宽度样式颜色;边框属性13：边框属性的设置。边距属性内边距在CSS属性中，padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置方法如下：padding-top:上内边距;padding-right:右内边距;padding-bottom:下内边距;padding-left:左内边距;padding:上内边距[右内边距下内边距左内边距];边距属性14：padding的应用。边距属性外边距在CSS中margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法类似，设置外边距的方法如下。margin-top:上外边距;margin-right:右外边距;margin-bottom:下外边距;margin-left:左外边距;margin:上外边距[右外边距下外边距左外边距];边距属性15：margin的应用。浮动HTML中文档流和文本流文本流，就是页面中某元素内部文字的排列规则，从左到右、从上到下。文档流（normalflow），又称标准流、正常流、普通流、常规流等。文档流指的是HTML元素在布局排版的过程中，所有处于文档流中的元素会自动的从上到下（块级元素）、从左到右（非块级元素）的排列。文档流中每个块级元素，按照HTML元素的创建顺序、自上而下，一行一行的排列，每个块级元素独占一行；相邻行内元素在每行中从左到右依次排列。浮动16：文档流中元素排列效果。浮动块级元素与行内元素的相互转换块级元素和行内元素之间可以通过display属性实现相互转换。常用属性值如表所示。属性值说明block元素呈现为块级元素inline元素呈现为行内元素（内联元素）inline-block元素呈现为行内盒子里的块盒子，使元素既具备行内元素与其他元素同行的特征，又具备块级元素的宽高属性none元素不会被显示，且不占有在页面中的位置浮动17：display属性的应用。浮动3.浮动的特点和带来的影响浮动最典型的应用是可以让多个块级元素在一行内水平排列显示。在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;}float常用的属性值有none（默认值，不浮动）、left（左浮动）、right（右浮动）。利用float属性将设置了浮动的元素移动到一边，直到左边缘（左浮动）或右边缘（右浮动）触及包含块或另一个浮动元素的边缘。浮动18：float的特点及影响。浮动19：多个元素的浮动效果。浮动20：float的应用。浮动4.清除浮动浮动元素脱离文档流，会对其他元素造成影响。清除浮动常用的方式有以下三种：(1)设置父元素overflow属性值为hidden(2)通过添加额外标记并设置clear属性(3)通过伪元素设置clear属性定位1.定位模式在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：选择器{position:属性值;}值描述static自动定位（默认定位方式）relative相对定位，相对于其原文档流的位置进行定位absolute绝对定位，相对于其上一个已经定位的父元素进行定位fixed固定定位，相对于浏览器窗口进行定位定位2.偏移偏移属性描述top顶端偏移量，定义元素相对于其父元素上边线的距离bottom底部偏移量，定义元素相对于其父元素下边线的距离left左侧偏移量，定义元素相对于其父元素左边线的距离right右侧偏移量，定义元素相对于其父元素右边线的距离定位1.静态定位静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。定位2.相对定位相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。定位21：相对定位的应用。定位3.绝对定位绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。定位22：“子绝父相”定位的应用。定位4.固定定位固定定位是元素固定于浏览器可视区的某个位置，以浏览器的可视窗口为参照点移动元素，与父元素没有任何关系。position属性的取值为fixed。定位23：固定定位的应用。项目实训任务描述：通过盒子模型来控制网页中元素的位置、布局属性等，效果如图所示。任务要求：团队讨论，分析出解决方案；独立应用技术，完成项目；提交到平台讨论区，展示、讨论任务2-控制元素属性掌握盒子模型的相关属性；掌握页面布局中浮动与定位的应用；实现网页中元素布局和位置的精确控制。课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务3：设置页面背景WEB3.3任务3：设置页面背景【任务描述】CSS背景属性功能强大，在实际开发中，更推荐将元素的装饰性图像作为背景嵌入。通过学习本任务，让学习者掌握网页背景的处理，如插入背景图片、设置背景图片的重复属性，设置背景图片的位置等，完成“致敬最美逆行者”新闻详细页面的美化修饰。设置页面背景背景的设置背景的运用技术背景的设置设置背景颜色在CSS中，使用background-color属性来设置网页元素的背景颜色。背景的设置设置背景图片背景不仅可以设置为某种颜色，还可以将图像作为元素的背景。在CSS中通过background-image属性设置背景图像。背景的设置设置背景平铺如果将背景图像的平铺属性background-repeat定义为no-repeat，图像将默认以元素的左上角为基准点显示。背景的设置24：背景设置。背景的运用技术1.简写属性为了简化背景属性的代码，可以简写在同一个属性background中。当使用简写时，属性顺序自由且可以省略，省略时采用的是默认值，一般习惯按照这个顺序书写：background:background-colorbackground-imagebackground-repeatbackground-position;例如，背景属性代码简写为：background:pinkurl(img/background.jpg)no-repeatcenter;背景的设置2.背景尺寸在CSS3中，background-size属性用于控制背景图像的大小，其基本语法格式如下：background-size:属性值1属性值2;属性值说明像素值设置背景图像的高度和宽度。百分比以父元素的百分比来设置背景图像的宽度和高度。cover把背景图像扩展至足够大，使背景图像完全覆盖背景区域。contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域；背景的设置25：背景尺寸设置。项目实训任务描述：CSS背景属性功能强大，在实际开发中，更推荐将元素的装饰性图像作为背景嵌入，此处为整张页面设置背景颜色，效果如图所示。任务要求：团队讨论，分析出解决方案；独立应用技术，完成项目；提交到平台讨论区，展示、讨论；使用背景图技术设置文章图片展示。任务3-设置页面背景设置网页背景颜色；设置背景图片；设置背景图片的属性。课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务1：制作最新动态列表条目WEB4.1任务1：制作最新动态列表条目【任务描述】本任务主要是完成最新动态页面中新闻条目的列表陈列，使学习者掌握有序列表、无序列表、嵌套列表的创建，使用CSS样式修饰列表，以及利用强大背景图的属性修饰列表的项目符号等。制作列表条目有序列表无序列表嵌套列表定义列表CSS超链接修饰有序列表

有序列表用<ol>和</ol>标记表示，从<ol>开始，到</ol>结束。

列表项用<li>和</li>标记表示。有序列表中可以包含多个列表项。有序列表的列表项有先后顺序，一般采用数字或字母作为顺序，默认是采用数字。有序列表的格式为：

<ol>

<li>第一个列表项</li>

<li>第二个列表项</li>

……</ol>有序列表有序列表1：有序列表的应用。有序列表1：有序列表的应用。有序列表中的type属性、start属性和value属性的作用。无序列表

无序列表是一个没有特定顺序的列表项的集合，也称为项目列表。

在无序列表中，各个列表之间属于并列关系，没有先后顺序之分，它们之间以一个项目符号来标记。

无序列表123456<ul>

<li>列表项1</li>

<li>列表项2</li>

……

<li>列表项n</li></ul>

在html文件中，用成对的<ul>和</ul>标记来表示无序列表中间的列表项由标记<li>和</li>表示。无序列表2：无序列表的应用。课堂实训任务描述：制作班级新闻栏目版块，新闻条目以无序列表罗列展开，列表条目设置橘色小方块square项目符号，标题和列表条目均为#333333深灰色，页面效果如图所示。嵌套列表是指将一个列表嵌入另一个列表，作为另一个列表的一部分。HTML可以用层层嵌套的方式来实现多层列表。有序列表和无序列表不仅能自身嵌套，而且也能互相嵌套。注意：一般不采用无序列表嵌套有序列表。嵌套列表嵌套列表3：嵌套列表的应用。课堂实训任务描述：制作班级网站中“软件大赛通知”内容，一级列表以阿拉伯数字编号，二级列表修饰外边框及各条目项目符号，最后一个段落修饰颜色、倾斜等样式。定义列表常用于对术语或名词进行解释和描述。定义列表的列表项前没有任何项目符号。其基本语法如下：定义列表<dl><dt>名词1</dt><dd>名词1描述1</dd><dd>名词1描述2</dd>…

<dt>名词2</dt><dd>名词2描述1</dd><dd>名词2描述2</dd>…</dl><dl>即“definitionlist（定义列表）”<dt>即“definitionterm（定义名词）”<dd>即“definitiondescription（定义描述）”定义列表4：定义列表的应用。课堂实训任务描述：小米官网首页的最底端的部分，“帮助中心”、“服务支持”、“线下门店”都是标题，下方对应的内容都是围绕上层这个标题进行描述的。这种页面布局就可以采用自定义列表实现。试一试。课堂实训任务描述：制作班级网站中“班级学习园地”版块，页面中左侧为实验图片，右侧罗列实验相关条目，页面下方是对背景知识的详细介绍。列表最主要用的有两种类型，无序列表<ul>和有序列表<ol>，我们除了使用列表自带的属性修饰列表，最主要的途径是应用CSS样式修饰列表。CSS列表修饰属性示例说明list-style-typeul{list-style-type:afar;}用于定义列表项目符号的类型list-style-imageul{list-style-image:url(img/icon.jpg);}使用图像作为列表项目符号list-style-positionul{list-style-type:disc;list-style-position:outside;}定义列表项目符号的位置，属性值inside,outsidelist-styleul{list-style:cjk-earthly-branchinside;}列表样式定义的简写方法，即同时定义多个参数CSS列表修饰5：CSS列表修饰的应用。课堂实训任务描述：本任务主要是完成最新动态页面中新闻条目的列表陈列，并用CSS样式修饰列表，以及利用强大背景图的属性，修饰列表的项目符号等，页面效果如图所示。任务1-制作最新动态列表条目掌握无序列表和有序列表的使用；掌握列表嵌套的使用；掌握定义列表的定义及灵活应用；掌握使用CSS设置列表样式的方法；课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务2：创建最新动态条目链接WEB4.2任务2：创建最新动态条目链接【任务描述】本任务主要是完成“新闻网”中最新动态页面中超链接的制作。通过本任务的制作，使学习者掌握各种超链接创建，以及使用CSS样式对超链接的各个状态进行修饰。创建条目链接创建超链接链接对象CSS超链接修饰创建超链接超链接是网页中的重要组成部分，通过超链接将网站中的各个网页链接成一个整体，构成一个完整的网站，而不再是一张张单独的网页。通过超链接，可以在网站中的各个网页之间来回跳转访问。创建超链接的标记<ahref="#"target=""title=""></a>，是双标记，单击标记之间的文本，或图像，页面将跳转到href属性值指定的页面位置。创建超链接1：创建超文本链接。链接对象内部链接：链接目标为本网站内的其他页面。外部链接：链接目标为本网站之外的网站页面。下载链接：链接的目标是浏览器不能直接打开的文件类型，如压缩文件、.doc文件等。图像链接：是指图像被设置了超链接，单击图像时，可根据href属性打开相应的链接目标。锚点链接：一般应用于网页内容很长，需要垂直滚动屏幕，如果想在当前网页中快速找到要浏览的目标位置，则在此处设置锚点。空链接：空链接即链接目标为空，一般用于调试程序。CSS超链接修饰2：对超链接进行样式修饰。可以使用CSS的任何属性修饰超链接标记<a>。值得注意的是，<a>标记不继承color属性。CSS超链接修饰3：使用超链接制作导航条。可以使用CSS的任何属性修饰超链接标记<a>。值得注意的是，<a>标记不继承color属性。CSS超链接修饰超链接自带的四种超链接状态，也称为锚伪类：a:link未访问的链接，即页面中设置了超链接，该链接还没有被用户访问过；a:visited访问过的链接，即该链接被用户单击访问过；a:hover链接的悬浮状态，即用户将鼠标指针悬浮在超链接上的时候；a:active链接被访问时，当用户在超链接上按下鼠标左键，将超链接激活时。CSS超链接修饰4：使用CSS修饰超链接的各状态。制作班级网站中水平导航条的效果，当鼠标悬浮在导航条目上，该条目背景颜色改变，文字颜色改变；当鼠标离开该条目，该条目样式恢复初始样式。课堂实训任务描述：在两张页面中创建以下超链接并修饰新闻条目；Logo新闻网；返回顶部；网站链接课堂实训任务描述：完成“新闻网”中最新动态页面中超链接的制作，并使用CSS样式对超链接的各个状态进行修饰。任务2-创建最新动态条目链接掌握网页中添加超级链接的方法；掌握使用CSS修饰超链接的方法。课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务1：创建多媒体相册WEB5.1任务1：创建多媒体相册【任务描述】本任务主要是应用表格技术展现“绿水青山”相册内容，使学习者掌握表格的创建，熟练设置表格的各种属性，以及使用CSS样式修饰表格等。创建多媒体相册表格组成表格属性行列单元格在HTML文档中，广泛使用表格来存放网页上的文本和图像表格组成表格组成：表格行、单元格、标题<caption></caption>和表格头<th></th>

<table>

<caption>表格标题</caption><tr><th>表头内容</th>

…</tr>

<tr><td>…</td>…</tr>……</table>表格组成表格组成1：创建学生信息表。属

性

名说

明border定义表格外边框线的宽度，默认值为1pxwidth,height定义表格的宽度和高度，默认情况根据内容自动调整cellspacing定义表格单元格之间的距离，默认值为1pxcellpadding定义表格单元格内部的填充距离，默认值为0pxalign定义表格的对齐方式，取值left、center、rightbgcolor定义表格的背景颜色background定义表格的背景图像表5-1表格的常用属性表格属性表格属性2：定义学生信息表的属性。CSS修饰表格3：使用CSS美化学生信息表。课堂实训任务描述：应用表格制作班级网站的新闻栏目，新闻栏目区域固定宽度，新闻条目初始状态为浅灰色衬底白色14px文字，当鼠标悬浮在某条新闻条目上时，该条目背景颜色变为酒红色，文字为白色16px粗体效果。任务1-创建多媒体相册掌握创建表格的步骤和方法；掌握设置表格边框、高度、宽度、背景等属性的方法；课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务2：调整相册行列结构WEB5.2任务2：调整相册行列结构【任务描述】本任务主要是实现对表格中单元格的跨行合并和跨列合并，从而能够自如地调整表格的行列结构，以及能够使用CSS熟练灵活地对表格、行、单元格、表头、表格标题等元素进行修饰。调整相册行列结构单元格属性单元格合并单元格属性用于设定表格中某一单元格的属性，常见属性如下：单元格属性属性名作用width设置单元格宽度height设置单元格高度align设置单元格水平方向对齐方式：left，center，right；默认left居左对齐valign设置单元格垂直方向对齐方式：top，middle，bottom；默认为middle，居中对齐bgcolor设置单元格背景色background设置单元格背景图单元格合并4：制作周工作计划表。课堂实训任务描述：制作班级网站中“班级课程表”，设置表格标题，定义星期一到星期三3个列等宽，为表格设置精美背景图，并设置表格中各元素的样式。课堂实训任务描述：制作班级网站中学生信息登记表格，灵活设置表格单元格跨行合并、跨列合并等特殊布局效果。课堂实训任务描述：完成对表格中单元格的跨行合并和跨列合并，从而自如的调整表格的行列结构，并使用CSS对表格、行、单元格、表头、表格标题等元素进行修饰。任务2-调整相册行列结构掌握单元格属性的设置；掌握对单元格跨行合并、跨列合并；课后作业超星学习平台上完成本模块作业学习平台完成线上预习任务学习平台中参与话题讨论学习平台中按要求完成过程性考核任务任务3：设置相册布局WEB5.3任务3：设置相册布局【