HTML5+CSS3网站设计基础配-课程标准、习题及答案 朱翠苗

课程标准课程代码：02014021课程类型：职业技能课课程性质：必修课课程学时：80学时适用对象：2023级软件技术专业:课程学分：5学分修读学期：第1学期考核方式：制定人：批准人：一、课程定位课程是软件技术专业的专业核心课，是培养Web前端开发程序员的主要支撑课程。本课程主要培养学生熟练使用HTML标签制作页面的能力、使用CSS美化页面的能力、使用CSS+DIV技术进行布局页面的能力。培养学生良好的编码风格，提升学生专业技能，为使学生成为Web前端开发程序员奠定良好的基础。二、课程学习目标1.知识目标（1）学习HTML、掌握文本、图像、超链接、表格、表单相关标签；（2）了解框架页面的制作；（3）掌握CSS的基本语法和使用场合；（4）掌握CSS美化页面的技术；（5）掌握CSS+DIV布局网页技术；（6）掌握HTML5新增标签的用法；（7）掌握CSS3相关样式设置；（8）掌握网站的开发流程。2.能力目标（1）会使用HTML的标签制作网页的内容；（2）会使用表格的相关标签制作各种表格；（3）会使用表单的相关标签，制作各种提交页面；（4）能灵活运用CSS技术美化网页；（5）能灵活运用CSS+DIV技术布局网页；（6）能灵活运用CSS3制作特效、动画；（6）会运用网站的开发流程和CSS+DIV技术制作小型商业网站；3.素质目标（1）培养学生自我学习能力、自我展示能力和总结的能力；（2）具备规范化，标准化的代码编写习惯，一定速度的编写能力；（3）具备良好的沟通能力和良好的团队合作精神；（4）规范化的文档撰写能力。三、课程设计思路1.设计思想本课程的主要内容包括HTML、CSS、CSS+DIV布局网页技术，为了能较好地训练学生掌握各项技能，本课程设计一到两个使用CSS+DIV技术制作的网站、CSS美化网站，教师在教学过程中以网站的具体实现过程贯穿整个教学过程，根据用户需求来设计、布局和制作整个网站，使学生在制作主页和各个分支页的过程中，逐步掌握布局网页和美化网页的技术。2.课程重、难点重点：块级标签和行级标签的基本用法；CSS美化网页；CSS3制作特效；盒子属性的含义及用法；CSS+DIV布局网页的技术。难点：盒子模型及盒子属性的含义及用法；CSS+DIV布局网页的技术。3．教学方法设计教学采用讲练结合，使学生在边讲边练的过程中，对每一个技能点做到深刻理解，并能灵活运用。综合运用多种教学法完成课程教学，如对比教学法、问题教学法、现场编程教学法、视频演示教学法、案例教学法等。鼓励教师探索更先进有效的教学方法，提高教学效果及教学质量；鼓励学生课外参与实际工程项目来提高技能。四、教学内容与学时分配序号学习内容拟实现的能力目标知识目标重点及难点学时学习模块学习单元理论实践1模块1HTML的基本标签任务1行级和块级标签组织页面内容会使用HTML的基本结构创建网页；会使用行级和块级标签组织页面内容。了解HTML；掌握段落、标题、水平线、图像、列表、分区、图片、范围、换行等基本标签的用法。重点：块级标签和行级标签的基本用法。33任务2表单元素实现注册页面会使用各种表单元素实现注册页面。掌握表单、文本框、密码框、隐藏域、按钮、单选按钮、复选框、下拉列表、多行文本域等基本标签用法。222模块2表格的应用和布局任务1用表格显示数据任务2用表格实现页面布局会使用表格显示数据；会使用表格实现页面布局。掌握表格的基本使用方法；制作跨行跨列的表格；了解表格的高级用法：添加表格标题、数据分组等；掌握使用表格进行布局。重点：表格标签的基本用法443模块3CSS样式表任务1利用CSS制作网上商城“商品分类”版块会CSS的基本语法；会使用文本和字体样式美化网页；会使用背景样式美化网页。掌握CSS样式表规则；掌握理解样式表的用途。重点：CSS样式；盒子属性的含义及用法；浮动的理解。难点：盒子模型的应用；典型布局的应用22任务2利用CSS完成网上商城“登录页”的布局会使用盒模型相关属性实现页面布局；能通晓普通文档流、浮动与清除属性的含义。掌握盒子模型的概念；盒子具有的单个属性：边框、内边距、外边距；掌握浮动属性；清除属性。55任务3利用CSS制作典型的局部布局会使用div-ul-li实现局部布局；会使用div-dl-dt-dd实现图文混编；会使用伪类样式控制超链接样式。掌握超链接伪类；掌握样式的三种应用方式；样式的优先级。334模块4CSS+DIV制作网上商城网站任务1CSS+DIV制作网上商城首页会使用CSS+DIV制作简单的页面布局；会根据网站开发流程制作网站。掌握网站开发的流程；掌握内容和样式分离的思想。重点：CSS+DIV布局网页的技术。难点：CSS+DIV布局网页。66任务2CSS+DIV制作商品具体介绍页会使用div-ul-li实现局部布局。掌握实现布局的普通思路；掌握实现布局的简洁思路。22任务3CSS+DIV制作注册页会使用form-table-tr实现表单布局；会使用CSS+DIV替换框架布局。掌握创建页面间链接导航的方法；掌握综合使用各种标签及CSS方法。225模块5HTML5设置网页内容任务1HTML5常用元素和属性会使用HTML5新增的元素设置页面内容。掌握HTML5新增的元素的使用方法。重点：HTML5新增的使用频率较高的元素22任务2HTML5表单元素和属性会使用HTML5新input类型进行页面设置。会使用HTML5新增的表单元素设置页面内容。理解HTML5新input类型的含义。掌握HTML5新增的表单元素的使用方法。116模块6CSS3设置网页特效任务1CSS3基础知识会使用字体、文本特效、选择器、框大小美化网页。掌握字体、文本特效、框大小中属性和方法。重点：CSS3圆角边框、渐变、2D/3D转换、动画的设置22任务2CSS3背景边框会使用CSS3创建圆角边框、添加阴影框、圆角、渐变。掌握CSS3背景、边框、渐变的使用方法。11任务42D/3D转换会使用HTML5制作2D/3D转换效果。掌握2D/3D转换中属性和方法。44任务4动画会使用HTML5制作动画。掌握HTML5过渡和动画制作的属性、方法。11合计80五、考核方案与考核标准本课程采用形成性考核方式。考核包括职业素质考核、职业能力考核、阶段测试的考核。职业素质：课堂出勤、学习态度、团队协作等，占考核分数的10%。职业能力：教学单元任务的准备、实施、汇报或总结以及课堂编码练习及课后编码作业，占60%。阶段性测试：侧重阶段知识掌握程度考核，占30%。职业素质Q10%----课堂出勤、学习态度、团队协作阶段测试T30%----阶段性课堂测试职业能力C60%----课堂编码练习及课后编码作业课程成绩=Q*10%+T*30%+C*60%。学生学习成绩评价与考核表评价项目评价内容评价形式权重（%）分值课堂出勤堂出勤、学习态度、团队协作参与课堂学习时间、效率1010基本标签制作页面基本标签的应用提交的工作成果1515用表格实现页面布局表格的基本标签的应用；表格做布局工具的使用的熟练度；表格布局的应用场合选择。提交的工作成果1515利用CSS制作典型的局部布局典型布局所用结构的选择；样式设置的思考方向与书写。提交的工作成果1515CSS+DIV制作网上商城首页各分区的结构选择；各分区的样式描述。首页每一部分完成的效果。提交的工作成果1515阶段测试1理论知识的理解；上机操作的实践效果。测试的提交成果3030合计100100六、教学资源开发与利用（含教材选用、实验实训场室、耗材规划等）教学场地要求：机房电脑通畅不卡机，能上网。装有Dreamweaver最新版本的编辑工具（或者HBuilder等其他编辑工具）、Chrome最新版本的浏览器。教材选用建议：朱翠苗.HTML5+CSS3网站设计基础（第二版），大连理工大学出版社，2023.1，书号：978-7-5685-3970-8。七、教师能力要求任课教师应熟悉网页制作、CSS技术、JavaScript、WEB前端页面设计，有较好的语言表达能力、沟通能力、高度的责任感等。八、其他说明教授此课程的教师要严格要求自己，上课认真负责，为后续课程的学习奠定基础。课程标准课程代码：02014013课程类型：职业技能课课程性质：必修课课程学时：64学时适用对象：课程学分：4学分修读学期：考核方式：形成性考试制定人：批准人：一、课程定位课程是软件技术专业的专业核心课，是培养Web前端开发程序员的主要支撑课程。本课程主要培养学生熟练使用HTML标签制作页面的能力、使用CSS美化页面的能力、使用CSS+DIV技术进行布局页面的能力。培养学生良好的编码风格，提升学生专业技能，为使学生成为Web前端开发程序员奠定良好的基础。二、课程学习目标1.知识目标（1）学习HTML、掌握文本、图像、超链接、表格、表单相关标签；（2）了解框架页面的制作；（3）掌握CSS的基本语法和使用场合；（4）掌握CSS美化页面的技术；（5）掌握CSS+DIV布局网页技术；（6）掌握HTML5新增标签的用法；（7）掌握网站的开发流程。2.能力目标（1）会使用HTML的标签制作网页的内容；（2）会使用表格的相关标签制作各种表格；（3）会使用表单的相关标签，制作各种提交页面；（4）能灵活运用CSS技术美化网页；（5）能灵活运用CSS+DIV技术布局网页；（6）会运用网站的开发流程和CSS+DIV技术制作小型商业网站；3.素质目标（1）培养学生自我学习能力、自我展示能力和总结的能力；（2）具备规范化，标准化的代码编写习惯，一定速度的编写能力；（3）具备良好的沟通能力和良好的团队合作精神；（4）规范化的文档撰写能力。三、课程设计思路1.设计思想本课程的主要内容包括HTML、CSS、CSS+DIV布局网页技术，为了能较好地训练学生掌握各项技能，本课程设计一到两个使用CSS+DIV技术制作的网站、CSS美化网站，教师在教学过程中以网站的具体实现过程贯穿整个教学过程，根据用户需求来设计、布局和制作整个网站，使学生在制作主页和各个分支页的过程中，逐步掌握布局网页和美化网页的技术。2.课程重、难点重点：块级标签和行级标签的基本用法；CSS美化网页；盒子属性的含义及用法；CSS+DIV布局网页的技术。难点：盒子模型及盒子属性的含义及用法；CSS+DIV布局网页的技术。3．教学方法设计教学采用讲练结合，使学生在边讲边练的过程中，对每一个技能点做到深刻理解，并能灵活运用。综合运用多种教学法完成课程教学，如对比教学法、问题教学法、现场编程教学法、视频演示教学法、案例教学法等。鼓励教师探索更先进有效的教学方法，提高教学效果及教学质量；鼓励学生课外参与实际工程项目来提高技能。四、教学内容与学时分配序号学习内容拟实现的能力目标知识目标重点及难点学时学习模块学习单元理论实践1模块1HTML的基本标签任务1行级和块级标签组织页面内容会使用HTML的基本结构创建网页；会使用行级和块级标签组织页面内容。了解HTML；掌握段落、标题、水平线、图像、列表、分区、图片、范围、换行等基本标签的用法。重点：块级标签和行级标签的基本用法。24任务2表单元素实现注册页面会使用各种表单元素实现注册页面。掌握表单、文本框、密码框、隐藏域、按钮、单选按钮、复选框、下拉列表、多行文本域等基本标签用法。132模块2表格的应用和布局任务1用表格显示数据任务2用表格实现页面布局会使用表格显示数据；会使用表格实现页面布局。掌握表格的基本使用方法；制作跨行跨列的表格；了解表格的高级用法：添加表格标题、数据分组等；掌握使用表格进行布局。重点：表格标签的基本用法263模块3CSS样式表任务1利用CSS制作网上商城“商品分类”版块会CSS的基本语法；会使用文本和字体样式美化网页；会使用背景样式美化网页。掌握CSS样式表规则；掌握理解样式表的用途。重点：CSS样式；盒子属性的含义及用法；浮动的理解。难点：盒子模型的应用；典型布局的应用13任务2利用CSS完成网上商城“登录页”的布局会使用盒模型相关属性实现页面布局；能通晓普通文档流、浮动与清除属性的含义。掌握盒子模型的概念；盒子具有的单个属性：边框、内边距、外边距；掌握浮动属性；清除属性。46任务3利用CSS制作典型的局部布局会使用div-ul-li实现局部布局；会使用div-dl-dt-dd实现图文混编；会使用伪类样式控制超链接样式。掌握超链接伪类；掌握样式的三种应用方式；样式的优先级。244模块4CSS+DIV制作网上商城网站任务1CSS+DIV制作网上商城首页会使用CSS+DIV制作简单的页面布局；会根据网站开发流程制作网站。掌握网站开发的流程；掌握内容和样式分离的思想。重点：CSS+DIV布局网页的技术。难点：CSS+DIV布局网页。210任务2CSS+DIV制作商品具体介绍页会使用div-ul-li实现局部布局。掌握实现布局的普通思路；掌握实现布局的简洁思路。2任务3CSS+DIV制作注册页会使用form-table-tr实现表单布局；会使用CSS+DIV替换框架布局。掌握创建页面间链接导航的方法；掌握综合使用各种标签及CSS方法。225模块5HTML5设置网页内容任务1HTML5常用元素和属性会使用HTML5新增的元素设置页面内容。掌握HTML5新增的元素的使用方法。重点：HTML5新增的使用频率较高的元素22任务2HTML5表单元素和属性会使用HTML5新input类型进行页面设置。会使用HTML5新增的表单元素设置页面内容。理解HTML5新input类型的含义。掌握HTML5新增的表单元素的使用方法。22合计64五、考核方案与考核标准本课程采用形成性考核方式。考核包括职业素质考核、职业能力考核、阶段测试的考核。职业素质：课堂出勤、学习态度、团队协作等，占考核分数的10%。职业能力：教学单元任务的准备、实施、汇报或总结以及课堂编码练习及课后编码作业，占60%。阶段性测试：侧重阶段知识掌握程度考核，占30%。职业素质Q10%----课堂出勤、学习态度、团队协作阶段测试T30%----阶段性课堂测试职业能力C60%----课堂编码练习及课后编码作业课程成绩=Q*10%+T*30%+C*60%。学生学习成绩评价与考核表评价项目评价内容评价形式权重（%）分值课堂出勤堂出勤、学习态度、团队协作参与课堂学习时间、效率1010基本标签制作页面基本标签的应用提交的工作成果1515用表格实现页面布局表格的基本标签的应用；表格做布局工具的使用的熟练度；表格布局的应用场合选择。提交的工作成果1515利用CSS制作典型的局部布局典型布局所用结构的选择；样式设置的思考方向与书写。提交的工作成果1515CSS+DIV制作网上商城首页各分区的结构选择；各分区的样式描述。首页每一部分完成的效果。提交的工作成果1515阶段测试1理论知识的理解；上机操作的实践效果。测试的提交成果3030合计100100六、教学资源开发与利用（含教材选用、实验实训场室、耗材规划等）教学场地要求：机房电脑通畅不卡机，能上网。装有Dreamweaver最新版本的编辑工具（或者HBuilder等其他编辑工具）、Chrome最新版本的浏览器。教材选用建议：朱翠苗.HTML5+CSS3网站设计基础（第二版），大连理工大学出版社，2023.1，书号：978-7-5685-3970-8七、教师能力要求任课教师应熟悉网页制作、CSS技术、JavaScript、WEB前端页面设计，有较好的语言表达能力、沟通能力、高度的责任感等。八、其他说明 教授此课程的教师要严格要求自己，上课认真负责，为后续课程的学习以及学生考取web前端开发职业技能等级证书奠定基础。项目一习题答案一、简答题简单介绍HTML5新增的标签和属性。答案要点HTML5一些新标签如header,footer,dialog,aside,figure等，并且增加了一些全新的表单输入对象，包括日期，URL，Email、地址，其它的对象则增加了对非拉丁字符的支持。简单介绍HTML5废弃的标签和属性。答案要点1）、能用CSS代替的元素这些元素包含basefont、big、center、font、s、strike、tt、u。2）、frame框架这些元素包含frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，删除以上这三个标签。3）、只有部分浏览器支持的元素这些元素包含applet、bgsound、blink、marquee等标签。4）、其他被废除的元素废除rb，使用ruby替代，废除acronym使用abbr替代，废除dir使用ul替代，废除isindex使用form与input相结合的方式替代，废除listing使用pre替代，废除xmp使用code替代，废除nextid使用guids，废除plaintex使用“text/plian”（无格式正文）MIME类型替代。二、编码写出HTML5的文档声明和语法规范<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head><body></body></html>项目二习题答案一、判断正误HTML标记符的属性一般不区分大小写。（对）网站就是一个链接的页面集合。（对）所有的HTML标记符都包括开始标记符和结束标记符。（错）用H1标记符修饰的文字通常比用H6标记符修饰的要小（错）。GIF格式的图象最多可以显示256种颜色。（对）二、选择题html的基本结构是（B）html中，图片显示和其悬停提示文字先是分别是（B）以下（ABCD）是html常用的块状结构4.在HTML中有效、规范的注释申明是（D）三、简答题1.HTML内容的组织顺序是什么？答案要点从头到尾的加载。<html>标签<head>代码和引用区域</head><body>html内容区域</body></html>2.请写出HTML常用的四种块结构。答案要点A.div-dl-dt-ddB.div-ul-liC.div-ol-liD.table-tr-td3.以下这几种文件路径分别用在什么地方，代表什么意思?• css/a.css相对路径，表示当前目录下css文件夹内的a.css文件。• ./css/a.css同上，“./”即代表当前目录。• b.css相对路径，表示当前目录下的b.css文件。• ../imgs/a.png相对路径，表示当前目录的上级目录下的imgs文件夹中的a.png文件。• /Users/hunger/project/css/a.css绝对路径，表示本地a.css文件在硬盘上的绝对地址。• /static/css/a.css绝对路径，表示a.css文件在服务器上的绝对地址。• /kejian1/8-1.png绝对路径，表示8-1.png在网络上的绝对地址。分别用div-dl-dt-dd块状结构、div-ul-li结构（黑点不用管）、使用<img/>和<br/>标签实现如图1.36所示的图文混排效果。div-dl-dt-dd块状结构<!doctypehtml><head><metacharset=“utf-8”><title>作业图文混排</title></head><body><div><dl><dt><imgsrc="file:///E|/DIV+CSS/打字/单元图片/jiemian3.jpg"alt="相宜本草"title="相宜本草"/></dt><dd>滋润型的洁面产品，适合中至干性，混合性肌肤，秋冬等干燥季节</dd><dt><imgsrc="file:///E|/DIV+CSS/打字/单元图片/jiemian2.jpg"alt="玉兰油"title="玉兰油"/></dt><dd>有效抑制黑色素，自然条理，让肌肤水嫩</dd><dd>超值价：8元开抢！</dd></dl></div></body></html>div-ul-li结构<!doctypehtml><head><metacharset=“utf-8”><title>作业图文混排</title></head><body><div><ul><li><imgsrc="file:///E|/DIV+CSS/打字/单元图片/jiemian3.jpg"alt="相宜本草"title="相宜本草"/></li><li>滋润型的洁面产品，适合中至干性，混合性肌肤，秋冬等干燥季节</li><li><imgsrc="file:///E|/DIV+CSS/打字/单元图片/jiemian2.jpg"alt="玉兰油"title="玉兰油"/></li><li>有效抑制黑色素，自然条理，让肌肤水嫩</li><li>超值价：8元开抢！</li></ul></div></body></html>使用<img/>和<br/>标签实现<!doctypehtml><head><metacharset=“utf-8”><title>作业图文混排</title></head><body><p><imgsrc="file:///E|/DIV+CSS/打字/单元图片/jiemian3.jpg"alt="相宜本草"title="相宜本草"/><br/>滋润型的洁面产品，适合中至干性，混合性肌肤，秋冬等干燥季节<br/><imgsrc="file:///E|/DIV+CSS/打字/单元图片/jiemian2.jpg"alt="玉兰油"title="玉兰油"/><br/>有效抑制黑色素，自然条理，让肌肤水嫩<br/>超值价：8元开抢！<br/></p></body></html>项目三习题答案一、选择题1、A 2、C 3、B 4、A 5、B 6、D 7、A 8、B 9、B二、填空题1、<inputtype=checkboxchecked>2、image3、select，option，select4、name method post action5、浏览器服务器6、Web页 表单处理程序。项目四习题答案一、选择题1、D 2、A 3、B 4、B 二、填空题1、<table></table><td></td>2、表格的一行表格的一列表格的标题3、rowspancolspan4、行列单元格三1、2、</html><head><metacharset=“utf-8”><title>caption\thead\tbody\tfoot等用法</title></head><body><tablewidth="500px"><caption>年终数据报表</caption><theadstyle="background:#0FF"><tr><th>季度</th><th>收入（RMB）</th></tr></thead><tbodystyle="background:#9CC"><tr><td>1季度</td><td>3000</td></tr><tr><td>2季度</td><td>2400</td></tr><tr><td>3季度</td><td>4900</td></tr><tr><td>4季度</td><td>4200</td></tr></tbody><tfootstyle="background:#FF0"><tr><td>平均收入</td><td>3825</td></tr><tr><td>总计</td><td>14500</td></tr></tfoot></table></body></html>项目五习题答案一、简答题1. 简单介绍HTML5中video视频元素属性。答案要点：video属性主要autoplay、controls、height、width、loop、preload、src等。2. 简单介绍HTML5中audio音频元素属性。答案要点：audio音属性主要有src、autoplay、preload、controls项目六习题答案一、选择题1、C 2、B3、C4、A5、C 6、A7、C8、B9、B二、简答题1、什么是标记（标签）选择器、类别选择器、ID选择器，并举例说明。CSS标记选择器就是声明哪些标记采用哪种CSS样式。例如：h1{color:red;font-size:25px;}类别选择器的名字可以由用户自定义，用做html页面某标签的class属性值。例如：.red{color:red;font-size:18px}ID选择器是针对html页面中某个具有此ID属性的标签设置的CSS样式。例如：#bold{font-weight:bold;}2、举例说明什么是行内式CSS样式、什么是内嵌式CSS样式、什么是链接式CSS样式。行内式是直接对html的标记使用style属性，然后将CSS代码直接写在其中。例如：<pstyle=”color:#ff0000;font-size:20px>正文内容</p>内嵌样式表就是将CSS写在<head>与</head>之间，并且用<style>和</style>标记进行声明。例如：<head><styletype=”text/css”>p{color:#0000ff}</style></head>链接式CSS样式表是通过使用html链接文件标签link将外部CSS应用到本页面的样式使用方法。例如：<linkhref=”myCSS.css”type=”text/css”rel=”stylesheet”>3、举例说明什么是导入式CSS样式。采用import方式导入的样式表，在html文件初始化时，会被导入到html文件内，作为文件的一部分，类似内嵌式的效果。例如：@importurl(sheet.css);4、什么是交集选择器、什么是并集选择器、什么是后代选择器，并举例说明。交集选择器是由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集。其中第1个必须是标记选择器，第2个必须是类别选择器或者ID选择器。例如：p.special{color:red}。并集选择器或者称为“集体声明”，它的结果是同时选中各个基本选择器所选择的范围。例如：h1,h2,p{color:purple;font-size:15px;}后代选择器的写法就是把外层的选择器名字写在前面，内层的选择器名字写在后面，之间用空格分隔。例如：pspan{;color:red;}5、CSS有几种引入方式?link和@import有什么区别?（1）外部样式<linkrel="stylesheet"type="text/css"href="css文件地址"media="all"/>，通过<link>标签链接外部css文件，此标签一般写在<head>标签中。可使用多个此语句添加多个样式表，浏览器会合并显示。<styletype="text/css">@importurl(css文件地址);</style>在<style>标签中添加@import语句，链接外部css文件。此语句须写在其他css语句之前，否则不起作用。（2）内部样式<styletype="text/css">css语句</style>将css语句写在<style>标签内，此标签一般放在<head>内。（3）行内样式<pstyle="color:red;">将css语句作为style属性的值，直接写在需要添加样式的HTML标签内。此形式不推荐使用。link与@import的区别• <link>本质上是HTML标签，@import本质上是css语句。• 除了链接css文件之外还有许多其他的功能，@import只能链接css文件。• 加载顺序不同。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后闪烁一下才显示样式，在网速慢的时候比较明显。6、实现效果图，注意多选择器的组合应用以及语法。<!DOCTYPE><html><head><metacharset=utf-8" /><title>样式叠加规则</title> <style>p,h1{color:red;}h3{color:green;}#myDiv{font-size:20px;background:#ff00ff;}#green{color:green;}</style></head><body><p><h2id="green">ID选择器</h2> <h2>其他h2</h2><h2>其他h2</h2></p><p><divid="myDiv">myDiv</div> </p><p><h3>h3</h3> <h3>h3</h3><h3>h3</h3><h3>h3</h3></p><h1class="yellow">h1</h1><h1class="yellow">h1</h1></body></html>项目七习题答案一、选择题1、BD 2、AC3、B4、C二、解释以下CSS样式的含义。a:link{ color:#3333cc;text-decoration:none}a:visited{ color:#990099;text-decoration:none}a:active{ color:#ff0000;text-decoration:underline}a:hover{ color:#3333cc;text-decoration:underline}设置超链接样式：未操作时：颜色为#3333cc，无下划线；单击过后：颜色为#990099，无下划线；单击时：颜色为#ff0000，有下划线；悬停时：颜色为#3333cc，有下划线；项目八习题答案一、案例分析题1、解释以下CSS样式的含义。table{ border:1px#333solid; font:12pxarial; width:500px}td,th{ padding:5px; border:2pxsolid#EEE; border-bottom-color:#666; border-right-color:#666;}将表格边框宽度设为1px，颜色设为#333，边框为实线；表格中的字体大小设为12px,字体类型为arial；表格宽度为500px。设置单元格和表头部分的样式：内边距为5px，边框宽度2px，实线，颜色为#EEE，底部和右侧边框颜色特别设为#6662、解释以下CSS样式的含义。form{border:1pxdotted#AAAAAA;padding:3px6px3px6px;margin:0px;font:14pxArial;}select{width:80px;background-color:#ADD8E6;}设置表单边框宽度为1px，点划线，颜色为#AAAAAA，内上、右、下、左边距分别为：3px6px3px6px，外边距为0px，字体为14px大小的Arial字体。设置选择框宽度为80px，背景颜色为#ADD8E63、解释以下CSS样式的含义。input{color:#00008B;}input.btn{background-color:#ADD8E6;padding:1px2px1px2px;}设置input标签中字体颜色为#00008B；input标签中id属性为btn的按钮背景颜色设为#ADD8E6，内上、右、下、左边距分别设为1px、2px、1px、2px二、简单题1、在CSS中一个独立的盒子模型有哪几部分组成？content（内容）、border（边框）、padding（内边距）和margin（外边距）2、举例说明什么是块级元素和行内元素？块级元素总是占据一个矩型区域，并且同级兄弟块依次竖直排列，左右撑满。例如：<ul>行内元素不占有独立的区域，并且同级元素之间横向排列，到最右端自动这行。例如：<a>3、解释一下div标签的作用<div>是一个区块容器标记，即<div>与</div>之间相当于一个容器，可以容纳段落、标题、表格、图片等各种html元素。项目九习题答案一、简答题1、解释盒子模型的float属性。float属性默认为none，也就是标准流通常的情况。如果将float属性的值设置为left或right，元素会向其父元素的左侧或右侧靠近，同时默认情况下，盒子的宽度不再伸展，而是收缩，根据盒子里面的内容的宽度来确定。2、解释盒子模型的display属性。display属性用于确定盒子的类型。display属性设为inline，即为“行内”；设为block，即为“块级”；设为none，即为“无”，也就是隐藏盒子。二、按要求写CSS样式表1、写出下列要求的CSS样式表（1）设置页面背景图像为login_back.gif，并且背景图像垂直平铺。（2）使用类选择器，设置按钮的样式，按钮背景图像：login_submit.gif；字体颜色：#FFFFFFF；字体大小：14px；字体粗细：bold；按钮的边界、边框和填充均为0px。body{background-image:url(img/login_back.gif);background-repeat:repeat-y;}.picButton{background-image:url(img/login_submit.gif);color:#FFFFFF;font-size:14px; font-weight:bold;margin:0px;border:0px;padding:0px;}2、写出下列要求的CSS样式表（1）使用<td>标签样式，设置字体颜色：#2A1FFF；字体大小：14px。内容与边框之间的距离：5px。（2）使用超链接伪类：不带下划线；颜色：#333333；鼠标悬停在超链接上方时，显示下划线；颜色：#FF5500。td{ color:#2A1FFF; font-size:14px; padding:5px;}A{ color:#333333; text-decoration:none; }A:hover { color:#FF5500; text-decoration:underline; }项目十习题答案一、简答题1、简述典型页面的布局结构。答案要点：div-ul-li、div-dl-dt-dd、div-table-tr-td2、div-ul-li经常用于哪种页面的布局结构？答案要点：div-ul（ol）-li常用于分类导航或菜单项目十一习题答案一、简答题1、简述利用Dreamweaver搭建站点的过程。答案要点：使用Dreamweaver创建站点，其实站点就是我们硬盘上的一个文件夹。选择“站点→新建站点”命令，进行相应设置，然后单击“保存”按钮即可。2、简述建立大型网站时建立目录结构的注意事项。答案要点：（1）不要将所有文件都存放在根目录下。（2）按栏目内容建立子目录。（3）在每个主目录下建立独立的images目录。（4）目录的层次不要太深，建议不要超过3层。原因很简单，维护管理方便。（4）不要使用中文目录；网络无国界，使用中文目录可能对网址的正确显示造成困难；不要使用过长的目录；尽管服务器支持长文件名，但是太长的目录名不便于记忆；尽量使用意义明确的目录。比如中小型网站，一般会创建如下的结构，可将图片放到images文件夹，css文件归放到css目录，js存放javaScript目录等。项目十二习题答案一、简答题答案略项目十三习题答案一、简答题答案要点：<body><divclass="content_list"><dl> <dt><imgsrc="images/promote-1.jpg"alt="alt"/></dt> <dd><ahref="commoditys_detailInfo.htm">惠普商务移动应用英寸笔记本</a></dd></dl><dl> <dt><imgsrc="images/promote-2.jpg"alt="alt"/></dt> <dd><ahref="commoditys_detailInfo.htm