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






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

学习内容:

点击查看基本任务操作步骤

 

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

1、打开wenxue.html文件,先在要做效果的框中点击鼠标,菜单栏点击"插入"——>"布局对象"——>"Div标签",弹出下图的对框话后直接点击"确定";


2、将下图中红框内的文字删除后,直接点击菜单栏——>插入——>图像,选择要插入的图片cnjs.jpg后,此时鼠标不要点任何内容,马上按链盘右键头


3、再次点击"插入"——>"布局对象"——>"Div标签",在图片的后面插入一个div标签,删除div标签内的默认文字,然后输入:“《城南旧事》作者:林海音 江苏人民出版社”。



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


5、设置如下规则;


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


7、设置如下规则;


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


9、设置如下规则;


10、通过属性面板上面的标签选择栏选中包含城南旧事图片和文字的div标签,在属性的类中选择:father2(如下图所示);




 

点击查看基本任务操作步骤

 

 


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


 

 

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