HTML5&CSS3 教案及教学设计合并.docx

《HTML5&CSS3 教案及教学设计合并.docx》由会员分享，可在线阅读，更多相关《HTML5&CSS3 教案及教学设计合并.docx（163页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课题名称第1章网站开发入门第1-3节 网站开发相关知识、HTML与CSS基础语法、网页基本结构授课班级授课学时2授课地点授课形式讲授、演示参考教材前端HTML+CSS修炼之道教学资源电子课件、教案、文字材料教学目标知识目标：了解网站开发的基本流程和相关知识；了解HBuilder工作环境及使用 方法，能够建立站点及新建网页；了解HTML&CSS在网页制作中的作用，了解Web 标准的概念，能够使用HTML标签创建简单的网页；技能目标：网站开发的基本流程和相关知识；HBuilder工作环境；Web标准的概 念素质目标：培养学生认真、一丝不苟的学习态度教学重点与难点.教学 重点HTML与CSS基础语法

2、、网页的基本结构教学难点网页的基本结构学情分析本次所讲内容选自教材第1章第3节。因为本次课程是学习网站制作的基础， 学生必须掌握软件的使用，掌握站点的建立及网页的创建。教学过程.课前：预习课中：网站基础知识创建HBuilder站点制作简单的HTML+CSS页面课后：启动HBuilder,熟悉其工作界面；创建“阳光旅游”网站，并创建一个网 页文件“index.html”和图像子文件夹“img”教学反思采用启发式教学，通过多媒体课件现场演示更加生动，与学生互动效果更好；在 上机课上学生学会了如何创建站点和简单的网页页面；课后布置了有关站点的作 业，并且利用上机时间完成和指导工作课程网站开发软件及基

3、础语法教学设计课题名称第2章HTML标签与CSS样式基础第1-2节HTML标签、CSS样式基础授课班级授课学时2授课地点授课形式讲授、演示参考教材前端HTML+CSS修炼之道教学资源电子课件、教案、文字材料教学目标知识目标：掌握HTML的语法规则；掌握网页各元素的HTML标签的写法，能够编 写网页结构层的HTML代码；掌握CSS的语法规则；掌握CSS的3选择器(标签选 择器、类选择器和id选择器)的使用；掌握在页面中引入CSS的4种方式技能目标：HTML的语法规则；HTML标签的写法；CSS的语法规则；掌握CSS的 3选择器；页面中引入CSS的4种方式素质目标：培养学生自主学习意识；培养学生良

4、好的编程规范教学重点与难点.教学 重点HTML标签(标题、水平线、段落、列表、图像、超链接)教学 难点CSS样式基础、选择器类型学情分析本次所讲内容选自教材第2章第2节。学生须掌握各元素的HTML标签写法；理解CSS语法规则、掌握CSS的3种选择器，并且掌握引入CSS的4种方式。教学过程课前：预习课中：制作鲜花导购网页的结构一一HTML标签 修饰鲜花导购网页一一CSS样式基础(1) CSS引入的4种方式(2)选择器的类型(3)选择器的集体声明、嵌套和优先级课后：制作个人主页教学反思.采用启发式教学，通过多媒体课件现场演示更加生动，与学生互动效果更好；在 上机课上学生学会HTML标签及其使用方法

5、；掌握了 CSS引入的方法，以及选择器 的格式书写课后布置了简单网页的制作，并且利用上机时间完成和指导工作课程HTML标签、CSS样式基础教学设计完成企业介绍页面的内 容和样式美化课程内容总结思考题或预习题或 作业题参考资料布置任务：完成企业介绍页面的内容和样 式美化，如下图：Qp i我们立志成为环保行业的水处理专家行*5充*示 JSXM人力奥索谓加 在皿X省页为 刃正云fRZxHtiiQwiiie 依子束储但:一访fltwm-vwa-已极不含3色n ,气Re*nt. 1 4(. xiitl*. Irft . 田仪工自今03彳却吟仆“修卡工霓Bib尢 1Elbf户内t0水,喻！ t-、化工修、

6、国米代由 mBrvawxiifi twiicMT&aHaiawnnne3 tHBK-AM偏方“.皿IWlA.U展一闺“?、/询车S3 QG多/“与北学Et9h nit，良麻im壬屏公司，人而的立，旬帛1B-UMS. 7a.g.住咏即t，*碇及MMIWtA, PHWflRi.找习s入，在irWKL力.住处曲出及牝，9巳2. m个员训。工制，刎了上会文we mmutitcnrtTSWiMiri amauq.讲解实现思路：-使用img, a, h, p标签实现网页的内容的 添加。一设置最大的容器div固定宽度，居中 一设置网页主题文字区域蓝色色边框，并 设置其内边距一设置网页正文文字中的图片左浮动

7、一设置banner部分的高度，并给其添加 背景图片或img图片引用一设置菜单部分固定高度，并给背景颜 色，并且通过行高设置实现菜单内容垂直 居中一设置菜单里面的a标签相关字体，字号, 颜色，行高，加粗，外边距，去除下划线 等样式。一设置网页底部背景颜色(3)观察学生完成情况，并给予辅导(4)共性问题集中讲解总结上机课内容进行提问:一在html中如何实现文字在右侧环绕图 片的效果一鼠标经过进行链接的高亮显示，需要用 到的伪类选择器的语法布置任务：预习第十章课程内容浮动布局前端HTML+CSS修炼之道主编：聂常红HTML5网页设计主编：李强网页设计与制作案例教程锻炼学生灵活使用布局手段，HTML标

8、签及CSS样式进行网页实现的能力贯穿上机课知识 点，进行复习预习下次课知识 点30分钥10分钟10分钟主编：马涛、王然、彭芳课后小结此次上机课的任务并没有太多新的知识 点，重点在于网页布局上，通过本地上机 课让学生对简单网页布局能够更熟练掌 握，并且能够灵活运用，教学效果良好。课程教案课题名称第10章CSS浮动布局第1节 浮动布局原理、清除浮动、浮动布局应用技巧授课班级授课学时2授课地点授课形式讲授、演示参考教材前端IITML+CSS修炼之道教学资源电子课件、教案、文字材料教学目标知识目标：掌握浮动布局的基本原理和float属性的用法；掌握浮动元素的盒子模型计算；掌握clear属性的含义和用法

9、；掌握浮动元素的display属性；技能目标：浮动布局的基本原理和float属性的用法；浮动元素的盒子模型计算； clear属性的含义和用法;浮动元素的display属性；素质目标：培养自主学习意识和严谨的学习态度教学重点与难点.教学 重点float和clear属性；浮动布局的原理教学 难点常用的浮动布局方法；清除浮动学情分析本次所讲内容选自教材第10章第1节。学生须熟练掌握浮动布局的基本原理、 float和clear属性的含义和用法；掌握浮动元素的display属性。教学过程.课前：预习课中：float 和 clear 属性 浮动布局的原理 常用的浮动布局方法 清除浮动对布局的不良影响 浮动

10、布局应用技巧课后：利用浮动对企业网站新闻列表页面进行布局教学反思在上机课上学生学会使用浮动进行布局，同时理解清除浮动的概念；掌握常用的 几种布局技巧等；课后布置了利用浮动对页面进行布局，并且利用上机时间完成 和指导工作课程浮动布局及其应用技巧教学设计课程名称HTML5&CSS3授课对象2021级计算机应 用技术专业1-4 班授课章节第10章CSS浮动布局第1节 浮动布局原理、清除浮动、浮动布局应用技巧本次课学 时数2学时教学目的1 .掌握浮动布局的基本原理和float属性的用法；2 .掌握浮动元素的盒子模型计算；3 .掌握clear属性的含义和用法；4 .掌握浮动元素的display属性；教学

11、分析本次所讲内容选自教材第10章第1节。学生须熟练掌握浮动布局的基本原 理、float和clear属性的含义和用法；掌握浮动元素的display属性。教学重点与 难点重点float和clear属性；浮动布局的原理难点常用的浮动布局方法；清除浮动教学方法 与手段课堂讲授 。讲解例题 电子课件 。案例分析。小组讨论文字材料 提问 。音像材料 其他：教学过程设计教学内容教学过程设计意图时间分配课程导入利用浮动方式进行图文#F版 是网页中常见的一种方式。在 标准流布局中，块级元素在网 页中会独占一行。那么如何让 块级元素在同一行显示呢？ 答案是使用css的浮动属性。引入本章学习 的知识2分钟float

12、 和 clear 属性1. float 属性float属性用于定义元素浮动 的方向。以往这个属性总应用 于图像，使文本围绕在图像周 围，不过在CSS中，任何元素 都可以浮动。浮动元素会生成 一个块级框，而不论它本身是 行内元素还是块元素。float讲解float和 clear属性知 识10分钟属性的值可取属ft、right、 none、 inherito2. clear 属性clear是一个与float相反的 属性，它定义了在元素的哪边 不允许出现浮动元素。如果声 明为左边或右边清除，会使元 素的上外边框边界刚好在该 边上浮动元素的下外边距边 界之下。clear属性的值可取 lefts rig

13、ht、both、inherito.当把框1向右浮动时，它 脱离标准流并向右移动，直到 它的右边缘碰到包含框的右 边缘不浮动的梃IE 1向右寻动1一1111量1一111111111|_2疮3 浮动布局的原理.当框1向左浮动时，它脱 离标准流并且向左移动，直到 它的左边缘碰到包含框的左 边缘。因为它不再处于标准流 中，所以它不占据空间，实际 上覆盖住了框2,使框2从视 图中消失。如果把所有三个框 都向左浮动，那么框1向左浮 动直到碰到包含框，另外两个 框向左浮动直到碰到前一个 浮动框让学生理解浮20分钟动布局的原理所有三个假向左若动1 .如果包含框太窄，无法容 纳水平排列的3个浮动元素, 那么其他

14、浮动块向下移动，直 到有足够的空间。如果浮动元 素的高度不同，那么当它们向 下移动时可能被其他浮动元 素“卡住”常用的浮动布局方法在网页中插入两个id名分别 为left和right的div标签 div id=left第 1 个 div元素H 2 个 div 元素方法一:两个元素都左浮动或 都右浮动ttrightfloat:left;让学生掌握浮动布局的几种方法20分钟ttrightfloat:right;方法二：第一个左浮动，第二个右浮动#leftfloat:left;brightfloat:right;方法三：第一个左浮动，第二 个设置左边距（这时左边的 需要设置宽度）.#leftwidth

15、:lOOpx;float:left;ttright margin-left:lOOpx;）方法四：第一个右浮动，第二 个设置右边距#leftwidth:lOOpx;float:right;ttright margin-right:lOOpx;清除浮动对布局的不良影 响设置浮动后必须清除浮动效 果对后面元素的影响。例如， 在前面并列显示的两个 元素后加入一个段落。了解清楚浮动 的意义15分钟第 1 个 div 元素/divdiv id二right第 2 个 div 元素这是一个段落将网页css样式设置如下：brightfloat:left;这时为使段落p不受浮动元 素的影响，需要给标签加 上cl

16、ear属性，css代码如下 brightfloat:left; pclear:left; /*这里也可以设置为both,消 除左右浮动的影响*/浮动布局应用技巧浮动框旁边的行框会被缩短， 从而给浮动框留出空间，行框 围绕浮动框。因此，创建浮动 框可以使文本围绕图像不浮动的椎明像向左浮动图像图像行椎被缩短，给浮动图像答出空间要想阻止行框围绕浮动框，需 要对该行框应用clear属性。 止匕外，还可在被清理的元素的 上外边距上添加足够的空间， 使元素的顶边缘垂直下降到 浮动框下面让学生掌握浮 动布局的应用 技巧15分钟生DOT祉睡、X立的图用目g盘百二（目，理9二课程内容总结本次课程主要讲解了浮动布

17、 局的原理、float和clear属 性的使用方法、常用的布局方 法及浮动布局的应用技巧等贯穿本节所讲 知识，对必须 掌握的内容进 行总结复习5分钟思考题或预习题或作业题利用浮动对企业网站新闻列 表页面进行布局巩固课堂知识3分钟参考资料前端HTML+CSS修炼之道主编：聂常红HTML5网页设计主编：李强网页设计与制作案例教程 主编：马涛、王然、彭芳课后小结采用启发式教学，通过多媒体 课件现场演示更加生动，与学 生互动效果更好；在上机课上学生学会使用浮 动进行布局，同时理解清除浮 动的概念；掌握常用的几种布 局技巧等；课后布置了利用浮动对页面 进行布局，并且利用上机时间 完成和指导工作课题名称第

18、10章CSS浮动布局第1节 浮动布局原理、清除浮动、浮动布局应用技巧授课班级授课学时2授课地点授课形式上机参考教材前端HTML+CSS修炼之道教学资源电子课件、教案、文字材料教学目标知识目标：掌握浮动布局的基本原理和float属性的用法；掌握浮动元素的盒子模型计算；掌握clear属性的含义和用法；掌握浮动元素的display属性；技能目标：浮动布局的基本原理和float属性的用法；浮动元素的盒子模型计算；clear属性的含义和用法；浮动元素的display属性；素质目标：让学生通过上机实践掌握浮动布局以及清除浮动教学重点与难点.教学 重点float进行左右结构的浮动布局教学 难点解决网页兀素浮

19、动后造成其他兀素也跟着一起浮动的问题 解决网页元素浮动后的塌陷问题学情分析本次所讲内容选自教材第10章第1节。学生需要分析网页布局，并且在适合的场 景下运用浮动布局，在浮动布局后可能会造成网页元素塌陷的问题，有些塌陷问 题会对网页造成严重影响，有些塌陷问题暂时对网页没有影响，需要让学生知道 塌陷现象，无论是否对整体有影响都应解决元素塌陷问题。教学过程.课前：阅读教材课件，准备上机任务。课中：制作个人文集主页面的banner和菜单导航部分 制作个人文集主页面的主题内容部分课后：预习第十章另外一个案例（博客网站主页），分析网页布局。教学反思此次上机课的任务需要学生掌握网页元素的浮动，在浮动过程中可

20、能会造成不希 望浮动的元素也有浮动效果，所以需要让学生理解清除浮动的操作，并且浮动之 后也可能造成网页元素的塌陷，需要让学生了解如何观察网页元素是否塌陷，并 解决塌陷问题，本次课程有一定难度，需要鼓励学生积极思考，并且在下次上机 课进行类似的实践练习，让学生熟练掌握方法课程浮动布局及其应用技巧教学设计课程名称HTML5&CSS3授课对象2021级计算机应 用技术专业1-4 班授课章节第2章HTML标签与CSS样式基础第1-2节HTML标签、CSS样式基础本次课学 时数2学时教学目的1 .掌握HTML的语法规则；2 .掌握网页各元素的HTML标签的写法,能够编写网页结构层的HTML代码；3 .掌

21、握CSS的语法规则；4 .掌握CSS的3选择器（标签选择器、类选择器和id选择器）的使用；5 .掌握在页面中引入CSS的4种方式教学分析本次所讲内容选自教材第2章第1-2节。学生须掌握各元素的HTML标签写 法；理解CSS语法规则、掌握CSS的3种选择器，并且掌握引入CSS的4 种方式。教学重点与 难点重占八、HTML标签（标题、水平线、段落、列表、图像、超链接）难点CSS样式基础、选择器类型教学方法 与手段课堂讲授 讲解例题 电子课件 。案例分析。小组讨论文字材料 。提问 。音像材料 其他：代码演示教学过程设计教学内容教学过程设计意图时间分配课程导入网页已从以前大范围应用的 表格布局过渡到现

22、在的 Div+CSS布局。这个转变顺应 了技术的需求，现在网页主要 由3部分组成：结构、表现和 行为，我们本章来学习网页结 构层和表现层。引入本章学习 的知识5分钟制作鲜花导购网页的结构HTML标签以实例来讲解HTML标签通过具体实际 案例来依次讲 解HTML标签 等，使学生更 加容易理解， 并且学会代码30分钟课程名称HTML5&CSS3授课对象2021级计算机应 用技术专业1-4 班授课章节第10章CSS浮动布局第1节 浮动布局原理、清除浮动、浮动布局应用技巧本次课学 时数2学时教学目的让学生通过上机实践掌握浮动布局以及清除浮动教学分析本次所讲内容选自教材第10章第1节。学生需要分析网页布

23、局，并且在适合的场景 下运用浮动布局，在浮动布局后可能会造成网页元素塌陷的问题，有些塌陷问题会对 网页造成严重影响，有些塌陷问题暂时对网页没有影响，需要让学生知道塌陷现象， 无论是否对整体有影响都应解决元素塌陷问题。教学重点与 难点重点float进行左右结构的浮动布局难点解决网页兀素浮动后造成其他兀素也跟着一起浮动的问题 解决网页元素浮动后的塌陷问题教学方法 与手段课堂讲授 。讲解例题 电子课件 案例分析小组讨论文字材料 提问 。音像材料 其他：代码演示教学过程设计教学内容教学过程设计意图时间分配课程导入复习理论课知识点：float浮动网页元素-clear清除网页元素的浮动浮动造成网页塌陷的解

24、决方案复习理论课知识 点10分钟制作个人文集主页面的 banner和菜单导航部 分布置任务：制作个人文集主页面的banner 和菜单导航部分，如下图：首页 心慵日记 Ftee 一起走到 从明天起 级飞机下一拈讲解实现思路：一编写一个div存放网页所有内容一在居中div中分别插入两个div分别用 于存放banner和菜单一在存放菜单的div中插入无序列表实现 菜单导航的内容一编写*, body等选择器的全局样式一使用样式表设置最大的容器div固定宽 度，居中一给banner模块的div设置背景图片让学生掌握使用 浮动让列表元素 能够横向排版， 制作常见的菜单 导航效果。30分钟一给菜单导航模块的

25、div设置高度，背景 颜色一给菜单模块下的列表进行浮动处理，并 且设置高度，行高，内外边距等。制作个人文集主页面的 主题内容部分布置任务：制作个人文集主页面的主题内容部分，如下图：0品跄漏耀滤娥舞舞舞罐菜膘喋歌祸、八碗长长的夕庄一起，正在着天黑员石的署公奥中飞行。g转盘设备靡器喜器”程翦髅密器黑鬻据蹄瞌黑琅在师福已经把精车开过东了秋天过的时傅，龙栋 上了一袱车，我不知 疵海裳去住的方向,当如+38上去无体无止 ail- 帆仰苔3H夕阳染015天一初美的-天 f /炫美的世界/%(赛盘酷幻 7 ,/ 以前过赃/5港初菊B胜紫腮疝_ 一一薯辫翩霭群何诲二7例篇*瀛 ,巾 市在瞬过的街口从客甩手 整

26、.让学生通过实践掌 握在网页中如何使30分钟讲解实现思路：一编写两个div,分别存放左侧和右侧内 容。将图片，文字，超链接等内容分别插入 到两个div中。-css设置两个div的宽度并且设置浮动 让两个div为左右结构。css设置左侧div中图片边框，文字颜 色等样式-CSS设置右侧div中连接颜色，div背 景图片等样式。(3)观察学生完成情况，并给予辅导(4)共性问题集中讲解用样式表进行左右 结构网页进行布局 实现。课程内容总结总结上机课内容：float浮动网页元素-clear清除网页元素的浮动 一浮动造成网页塌陷的解决方案贯穿上机课知识 点，进行复习10分钟思考题或预习题或 作业题布置任

27、务：预习第十章另外一个案例(博 客网站主页)，分析网页布局。预习下次课知识 点10分钟参考资料前端HTML+CSS修炼之道主编：聂常红HTML5网页设计主编：李强网页设计与制作案例教程 主编：马涛、王然、彭芳课后小结此次上机课的任务需要学生掌握网页元 素的浮动，在浮动过程中可能会造成不希 望浮动的元素也有浮动效果，所以需要让 学生理解清除浮动的操作，并且浮动之后 也可能造成网页元素的塌陷，需要让学生 了解如何观察网页元素是否塌陷，并解决 塌陷问题，本次课程有一定难度，需要鼓 励学生积极思考，并且在下次上机课进行 类似的实践练习，止学生熟练掌握方法课程教案课题名称第10章CSS浮动布局 第2-4

28、节案例讲解授课班级授课学时2授课地点授课形式讲授、演示参考教材前端HTML+CSS修炼之道教学资源电子课件、教案、文字材料教学目标知识目标：能够利用浮动方式对页面进行布局；能够解决IE6中浮动元素边界加 倍的问题；技能目标：利用浮动方式对页面进行布局；解决IE6中浮动元素边界加倍的问题； 素质目标：培养自主学习意识和严谨的学习态度教学重点与难点.教学重点制作企业网站新闻列表页面教学 难点制作搜索栏目；制作新闻菜单；制作新闻列表学情分析本次所讲内容选自教材第10章第2-4节。学生可以通过具体的案例来运用上节课 所学的知识。教学过程课前： 预习课中：对页面进行整体布局一一浮动布局概念制作搜索栏目制

29、作新闻菜单制作新闻列表课后：制作个人文集页面 制作博客网站主页教学反思.采用启发式教学，通过多媒体课件现场演示更加生动，与学生互动效果更好；在 上机课上学生学会运用浮动完成整个页面的制作；课后布置了制作2个页面的制 作，并且利用上机时间完成和指导工作课程制作企业网站新闻列表页面教学设计课程名称HTML5&CSS3授课对象2021级计算机应 用技术专业1-4班授课章节第10章CSS浮动布局 第2-4节案例讲解本次课学 时数2学时教学目的1 .能够利用浮动方式对页面进行布局；2 .能够解决IE6中浮动元素边界加倍的问题；教学分析本次所讲内容选自教材第10章第2-4节。学生可以通过具体的案例来运用

30、上节课所学的知识。教学重点与 难点重点制作企业网站新闻列表页面难点制作搜索栏目；制作新闻菜单；制作新闻列表教学方法 与手段课堂讲授 讲解例题 电子课件 。案例分析 。小组讨论文字材料 。提问 。音像材料 其他：代码演示教学过程设计教学内容教学过程设计意图时间分配课程导入本节课通过制作企业网站新 闻列表页面，来学习CSS浮动 布局方法。浮动之后的元素对 页面的影响将是本节课学习 的重点。引入本章学习 的知识5分钟对页面进行整体布局一一 浮动布局概念下面开始构建新闻列表页面 的整体布局。整个页面可以分 为3部分：头部header、主 体 content 和尾部 footero 其中主体conten

31、t又可分为2 大部分：新闻菜单（左） leftlist和新闻列表（右） rightlist,如图所小。案例步骤：通过案例让学 生对浮动的基 本原理有初步 的认识20分钟(1) 构建HTML结构(2)设置CSS样式#content#leftlist( width: 208pxj fLoat: Left;background-coLor: #09f;#content#leftlist( width: 208pxj fLoat: Left;background-coLor: #09f;#content #rightlistfLoat: left;width: 652px;margin-Left: 2

32、0px;.clear(dear: both;本案例主要完成新闻列表页 面中搜索栏目的HTML结构构 建和CSS样式设置，并进一步 认识浮动的基本原理制作搜索栏目下面开始制作站内搜索栏目， 整个栏目主要分成3大部分: 文字、文本框和搜索按钮。为 便于理解，我们将该案例分成 2部分来制作，先构建HTML 结构，然后利用CSS设置样 式，CSS代码单独放在文件名 为 NewsStyle. css 的外部 CSS 文件中。设置样式时要注意应 用浮动布局的元素在使用 margin属性时在IE 6中加倍 的问题进一步认识浮动的基本原理15分钟案例步骤:(1) 构建HTML结构(2)设置CSS样式二港目闻明

33、砰SP 同篁?8Gg8G到理出q 七。皿Tubnc u96-Tui98etT6Tq_ Rb6=二f86“ TqMTuig8stT6jqM 2uc5I“ ugs6=/WL gpoq=“boaj 9”昨人”“鸵出稀室：四=“丁。1”8“margin: 0;padding: 0; List-styLe: none;)#searchfLoat: right;font-sizez 14px; coLor: #c31103; font-height: bold; Line-height1 30ox; padding-right: 20px; 制作新闻菜单制作新闻菜单本案例中，我们将通过制作企 业新闻列表页

34、面中的新闻中 心栏目，来继续学习使用浮动 方式和其他方式进行网页布 局的方法下面我们开始制作新闻中心 栏目，整个栏目主要分成2 大部分：标题和文字列表。我 们采用标准流和浮动方式对 该栏目进行布局新闻中心继续学习使用 浮动方式和其 他方式进行网 页布局的方法20分钟0集团要闻0轻营动态0企业专题0项目新由案例步骤:(1)构建HTML结构(2)设置CSS样式集团要闻经营动态(/ 企业专题项目新闻#listTitlebackground-image: url(listhead.gif);Line-height: 40jx;padding-Left: 20px;coLor:font-size: 14

35、px;font-weight: normal;height: 48px;#content #leftlist ulbackground-image: url(listmiddle.gif) background-repeat: repeat-y;padding: 10px 0px;#leftlist ul liList-styLe-type: circle;List-styLe-position: inside;Line-height: 30px;border - bottom: Ipx dashed #999999;margin: 0 15px;padding-Left: 10px;tele

36、ftlist ul li a text-decoration: none; coLor: #000000;content #leftlist width: 208p; fLoat: Left;padding-bottom1 22ox;background-image: url(listfoot.gif); background-repeat: no-repeat;background-position: bottom;本案例中，我们将通过制作企 业新闻列表页面中的集团要制作新闻列表闻栏目，继续学习使用浮动和 其他方式进行网页布局的方 法。效果图中的蓝色字体为鼠 标移上去的效果继续学习使用浮动和

37、其他方式进行网页布局的方式20分钟下面我们开始制作集团要闻tni VHICM科6勃公年DMI-IXU*孙州市委力百一行或利百金中目(n-n-rj*9比鱼 EA行晟4口公通POIblMQ8M利拿6*1一行“广东公(20114144CMMBiaREimVM 公.D0II4I44)CM不谶-行考利李江POXblM!)AW0OI-HIN 文加 iiaiSH娶签合理时能不一行足K6公巧&T即31)CdMrmM 可R*命中OR,事PMMMp生性4号一蠹&，陵央企与地方m合作现令*合屏iwni QMUM)120asi一行，龙0公初pong 刈*1de 公 uar(食物缰产efigtw一行期riw公巧眇1皿5

38、育之m松家广一5金加 11642)广不鲁鲁宾jwawir俗利食WX：E员工AM调奴pone 切*=密益合主灯给予一行R保牝或公*第pons 刈*广第板黄iurm*i-v加 11609:演-W 12345T-B栏目，整个栏目主要分成3 大部分：栏目标题h2、新闻 标题、新闻时间。制作过程中 要注意，采用浮动方式进行布 局时如何对HTML元素进行合 理的设置 案例步骤：(1)构建HTML结构(2)设置CSS样式徒团费同(2011-12-12中国保利集团副，2811-ll-17/彳州市委书汜，保利集团总经J2Bll-ll-16/中国伊利篌司j2eil-ll-14)/中国保利集习12eil ll-14

39、)/中国保利实团12eil-10-31j/ 中国保利2011-10.31J/ 中国保刊 hr2011-10-31/国资委事笆:( 2M1-18-17/ 海心沙相2eil.l0-08j/陈内生董事长;2eil-e9-30/中国保利偌02eil-09-14j/ 保利娘产201ie9-e8/像利地产总(2011-09-02/保利地产里，一201ie8-2e/广东省委要臭】2011-e8-18/保利地产2011(2011-a8-15/合肥保利香？212eil-e8ie/国重费达事含2011-B8-09/广东省台长黄1h2border-bottom: 1。 solid #666666;Line-height1 30px;font-size: 14px;width: 150px;).fntlfont - fami Ly: Arial,Helvetica,sans-serif;font-size: llpx;coLor: #999