CSS制作导航栏.docx
《CSS制作导航栏.docx》由会员分享,可在线阅读,更多相关《CSS制作导航栏.docx(14页珍藏版)》请在冰豆网上搜索。
CSS制作导航栏
实验六CSS制作导航栏
1实验目的
1)掌握CSS的类选择器和派生选择器;
2)掌握导航栏的制作方法;
3)掌握CSS中伪类(Pseudo-Classes)的使用。
2实验内容
1)使用CSS制作导航菜单栏;
2)使用伪类的属性使菜单动起来;
3)丰富实验三中的网站栏目,为你的网站设计栏目结构,使其更加完善;
4)制作一个绚丽的导航栏,应用到实验三中网站上。
3实验仪器、设备
1)PC机最低配置:
2GHz以上CPU;1G以上内存;1G自由硬盘空间;
2)InternetExplorer、Firefox、Chrome、Opera、Safari任意浏览器;
3)MacromediaDreamweaver8或MacromediaDreamweaverCS3。
4实验要求
1)掌握CSS的类选择器和派生选择器;
2)掌握导航栏的制作方法;
3)掌握CSS中伪类(Pseudo-Classes)的使用。
5实验步骤
5.1CSS导航入门
在前几次实验中,我们的网站已经已经越来越完善了,但我们的还没有一个漂亮的导航菜单栏,看到网络上的那些漂亮的菜单,是不是也想制作一个绚丽的菜单栏。
这里我们要使用到CCS中伪类的特性,简单来说就是根据鼠标的状态来改变相关样式。
我们知道了什么是“内容块状元素和内联元素”,以及XHTML+CSS布局的核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮动”,这次我们就利用这三个概念,来制作一款,经典的导航条,别看它其貌不扬,可是网上所有的导航条都可以再它的基础上修改而来,其实理论都是一样的,只要你能理解并学会这节课的内容,以后再困难的导航条你都可以很应对,EASY!
!
!
OK!
我们要做的导航条的效果如下,鼠标移动上去背景变黑,并且字体颜色变成白色
5.2制作导航菜单
新建一个html文档,我们要先做一个容器(要求:
ID为“nav”,宽度为960px,高度为:
35px,位于页面水平正中,与浏览器顶部的距离是30px;),这个容器就是放我们的导航的,html代码如下:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
经典导航