《CSS制作导航栏》由会员分享，可在线阅读，更多相关《CSS制作导航栏（12页珍藏版）》请在金锄头文库上搜索。
1、实验六CSS制作导航栏1实验目的1）棠握CSS的类选择器和派生选择器；2）堂握导航栏的制作方法；3）掌握CSS中伪类（Pseudo-Classes）的使用。实验内容1）使用CSS制作导航菜单栏；2）使用伪类的属性使菜单动起來；3）丰富实验三中的网站栏目，为你的网站设计栏目结构，使其更加完善;4）制作一个绚丽的导航栏，应用到实验三中网站上。实验仪器、设备1）PC机最低配置：2GHz以上CPU； 1G以上内存；1G自由硬盘空间;2）hiternet Explorer Fnrefox、Chrome、Operas Safhii 任意j刘览醫菩；3）Macromedia Dieamweaver 8 或
2、Maciomedia Dieamweavei CS3。4实验要求1）掌握css的类选择器和派生选择器；2）掌握导航栏的制作方法；3）掌握CSS中伪类（Pseudo-Classes）的使用。5实验步骤5.1 CSS导航入门在前儿次实验中，我们的网站己经已经越來越完善了，但我们的还没有一个 漂亮的导航菜单栏，看到网络上的那些漂亮的菜单，是不是也想制作一个绚丽的 菜单栏。这里我们要使用到CCS中伪类的特性，简单來说就是根据鼠标的状态 来改变相关样式。我们知道了什么是“内容块状元素和内联元素”，以及XHTML+CSS布局的 核心概念“盒子模型”，同时乂学习了一下页面布局中两种方法中的一种方法“浮 动”
3、，这次我们就利用这三个概念，來制作一款，经典的导航条，别看它其貌不 扬，可是网上所有的导航条都可以再它的基础上修改而來，其实理论都是一样的, 只要你能理解并学会这节课的内容，以后再困难的导航条你都可以很应对， EASY ! OK!我们要做的导航条的效果如下，鼠标移动上去背景变黑，并且 字体颜色变成白色CSS学习学前准备入门教程下载提高教程布局基方出教程精彩应用_5.2制作导航菜单新建一个html文档，我们要先做一个容器（要求:ID为“nav”,宽度为960px, 高度为：35px,位于页面水平正中，与浏览器顶部的距离是30px；）,这个容器 就是放我们的导航的，html代码如下：!DOCTYP
4、E htnil PUBLIC n-/W3C/.DTD XHTML 1.0 TransitionaV/ENM” http:/www.w3 .oigTR/xhtml l/DTD/xhtml 1-tiansitKrnaLdtcTtitleA经典导 iJ在html文档同一目录下建立css.css文件，CSS代码如下：#navwidth:960px;height:35px;background:#CCC;/*为了便于查看区域范制人小，故而加个背景色*/margm:O auto;/*水平居中 */margm-top:3Opx;/*顶部 30px*/为了页面在浏览器的兼容性，在CSS文件顶部加入标签重置代码
5、，代码如 下：body.div,ulJipadding:0; margin:。;怎么样，作出来了没有，效果是不是一个灰色条，位于页面的正中间。盒子 做好了，我们就要往里面放导航条中的内容了“CSS学习学前准备入门教程提 高教程布局教程精彩应用”，如果我们把这内容（目前有6个），当成酒杯的话, 如果直接放到盒子里面的话，肯定会乱，并且还会东倒西歪，一点顺序都没有， 但是我们平时会用一个隔板将每个酒杯隔开，这样就是酒杯很有序的放入盒子， 并且牢稳而且防震，方便使用！现在我们把这个隔板叫做“有序列表”起个英文 名字叫：U1,里面的每个单元格我们也给起个英文名字叫“11”。HTML代码如下:CSS 学
6、习 14学前准备 14入门教程 14提高教程 布局教程 精彩应用 CSS代码: #nav ul width:960px; height: 3 5px;效果如下:CSS学习 学前准备 入门教程 提高毅程 布局教程 精彩应用我们不希望我们的条目纵向排列，而是横向排列，怎么办呢？因为11标签 也是块状元素，所以他也有块状元素的“霸道”，不允许其他元素和自己处于同 一行，总共六个11,所以他们六个就像台阶似的纵向排列起來了。为了横向排 列我们使11的浮动Float属性:#nav ul li floatleft;css学习学前准备入门教程提高教程布局教程精彩应用现在的效果还不是我们想要的，所有的“菜单项
7、”都没有保持“间距”，后面的文字全部贴着前面的文字。好！我们现在就将他们分开！设置11标签的 宽度为100像素，修改CSS如下：#nav ul liwidth: 100px;float:left;list-style :none;为了便于观察我们暂且将1】 标签的背景设置成红色（设置背景色，是页面布 局中一个很重要的方法，便于查看块状元素区域范围）#nav ul liwidth: 100px;float:left;list-style :none;backgiound：rF900;我们的11标签的高度并没有和我们的盒子的高度一样，这就是为什么在布局页面的时候，经常会设置一下背景色，就是这个道理
8、，不然的话，你是发下不 了隐藏的问题，但是往往这些隐藏的问题就会导致页面浏览器的兼容性大大降 低。现在暂不把11标签的背景色去掉，当我们把它调成我们需要的效果的时候 再去掉！继续，我们把11的高度设置成盒子的高度35像素：忸e-heigM35px;|设 置文本属性设置水平居中：|text-aligii:ceiHei;做到这里，大家有没有想过一个问题，因为我们的11标签是设置了宽度为 100像素，己经限定了它的宽度，如果文字多了它不会自动伸缩的自适应的，那 这时候我们就需要去掉其宽度，这时候11的宽度就会缩小至文字的宽度，也就 是说，如果我们再添加一些文字，这个11也会跟着变大，大家去掉宽度后试
9、试, 是不是这个样子，这样我们的导航条就比较灵活了，不会对“菜单条目”的大小 有所顾忌了！虽然这个宽度自适应解决了，但是给文字的空间太少，视觉上感觉不舒服， 那么我们就帮它扩大一下空间，但是乂要保证宽度自适应，解决方法很容易，加 上左右内边距就ok 了，IpaddingiO 10px;|这里设置边距为10px,在Ii标签加上下 面代码，顺便把背景颜色去掉，此时css全部代码如下：body.div,uljipadding:0; inargm:0;#navwidth:960px;height:35px;background :#CCC;niaigiii:0 auto;/*水平居中 */niaigi
10、ii-top:3Opx;/*顶部 30px*/#nav ulwidth:960px;height:35px;#nav ul liheight:35px;float: left;list-style:none;line-height: 3 5px;text-align: center;padding:0 lOpx;效果是不是这样：CSS学习学前准备入门教程提高教程布局教程精彩应用无论你的“菜单条目”是增大还是缩小，不但宽度会随之增大缩小，但 是杯子和杯子之间的距离永远不变！怎么样有点意思吧！CSS学习 学前准备 入门教程下载 提高教程 布局基础載程 精彩应用5.3增加导航链接但是此时的导航条还没
11、有链接，我们需要将上面的导航条做以下儿个修改。1）给上面的导航加上链接；CSS 学习 学前准备 入门教程下载 v/li 提高教程 布局基础教程 精彩应用 2）链接文字大小修改为12px;a font-size :12px;3）并且规定链接样式，鼠标移上去和拿开的效果，使菜单具有动感。#nav ul li a color:#333; text-decoration:none;#nav ul li a:hovercolor:#fif; text-decoration:underline;效果是不是和下面一样，鼠标移上去变成白色的有下划线的链接，效果如下:CSS学习入门教程下载提高教程布局基础教程拮
12、彩应用到这里，基本上一个导航条就出来了。但可能还是没有动感，我们希望鼠标移上去后，链接的背景变成黑色的，首先把链接a加上一个背景，以方便看出來链接3的区域。#nav ul li a color:#333; textd亡coiationmone; background:#0FF:css学习学前准备入门教程下我提髙教程布局基础教程結彩应用现在我们要将a的高度设定为35px和盒子一样高度，这样我们在把刚才的 亮蓝色背景就可以完全覆盖下面盒子的灰色了，于是我们插入下面红色的代码： #nav ul li aheight:35px; colo匚存333; text-decoration:none; bac
13、kgiound:#OFF;可是不管我们怎么刷新浏览器，高度都没有任何变化，这是为什么呢？ ！原因就在于a属于内联元素，内联元素是无法设置宽度和高度的，width和 height只是针对块状元素，说道这里，解决办法就出來了，只要我们把内联元素 a转化成块状元素就可以了，我们用“display:block;”将内联元素转化成块状元 素。大家先不要加这段代码，闭上眼想想界面会变成什么样子？#nav ul li a display： block; height: 3 5px; color: #333; text-decoration:none; backgiound:#OFF;IE内核浏览器下的效果：入r佛程下莖布血礙視Firefox下的效果：CSS学习学前堆备入门教程下载提高教程布局基础教程精彩应用IE和FF显示效果居然大相径庭，圧中为什么所有链接纵向排列了呢？其实 这个也很简单，IE认为a既然转化成块状元素，就拥有块状元素的特性 霸道, 它是不允许其他元素和它同一行，再加上也没有对a的宽度进行设定，所以才导 致IE中这么显示，不过FF中为什么不这样呢，和我们想象的一样，那是因为 FneFox认为a即使为块状元素，也应该受到外面li
