收藏本站
 
设为主页
     您的位置:首页在线课堂高二级2017-2018学年度第二学期 》第八课
==※ 高二级 ※==
2017-2018学年第二学期






==※ 相关资源 ※==
 
太平洋电脑网
天极网
eNet网络学院
 
==※ 自由论坛  ※==
   
用户名:
密码:
 
忘记密码
游客请进
 
第九课 CSS进阶
 
学习目的:掌握在网页中使用CSS制作下拉菜单的方法。
学习重难点CSS样式的含义和类型,定义CSS规则和应用规则。
教学方式:老师讲解、演示;学生自主探究、动手实践。

学习内容:

一、基本概念的学习
  CSS 指层叠样式表 (Cascading Style Sheets):可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
  DIV标签:块状标签,可以把网页分成一块一块的,让网页内容包裹在DIV内,实现各式各样的布局和美化。
二、基础任务:使用CSS制作下拉菜单效果

1、建立站点:点击上面的“素材下载”,下载本节课所需要的素材,以解压缩后的“book”文件夹作为站点;
2、打开站点中的index.html,在下图红框位置点击鼠标,进行定位;

3、菜单栏点击"插入"——>"布局对象"——>"Div标签",弹出下图的对框话后直接点击"确定";

4、将div标签内的默认提示文字改为“文学”,如下图所示:(注意:黄色虚线表示div标签范围

5、在文学的后面插入一个div标签,然后输入文学栏目的菜单项:中国古诗词、外国诗歌、纪实文学、名家作品,如下图所示:(注意:包含子菜单项的div标签是位于第3步插入的div标签内部的!

6、分别选中各个菜单项做好链接,例如,选中“中国古诗词”,然后在属性面板中的HTML中设置超链接,链接文件为“zggsc.html”,如下图所示:


7、在右边的CSS样式面板中点击新建CSS规则按钮,如下图所示:

8、新建CSS规则的选择器类型为"类(可应用于任何HTML元素)",选择器名称为.father,如下图所示:

9、设置规则如下图所示,字体大小:16px,字体颜色:#FFF,背景颜色:#333等

10、新建CSS规则的选择器类型为"类(复合内容(基于选择的内容))",选择器名称为.father div(建议直接将名字复制粘贴),如下图所示:

11、设置规则如下图所示,字体大小:16px,字体颜色:#FFF,背景颜色:#333等;

12、新建CSS规则的选择器类型为"类(复合内容(基于选择的内容))",选择器名称为.father:hover div(建议直接将名字复制粘贴),如下图所示:

13、设置规则的Display属性为block,如下图所示;

19、通过属性面板上方的标签选择栏选择包含文学及子菜单的div标签,在属性的类中选择:father(如下图所示):



三:拓展任务:使用 CSS 创建文字提示的效果

点击查看扩展任务操作步骤

 


* 友情提示:本文档只供本校师生上课时辅助使用,不是正规的教学设计或教案。


 

 

Copyright © 东莞中学信息技术科 All Rights Reserved
IE4.0 or later / 800*600  For The Best View