利用CSS制作动感导航栏

我们在浏览很多网站的时候会看到有的网站当你的鼠标移动到导航栏的文字上的时候会感觉字在动,或则字体的颜色会变,或则

有上划线,看看我的博客上导航栏的效果你的明白了,今天三少就来告诉大家这是怎么样实现的。

其实这个很简单,它实际上是用CSS来实现的,请跟着我的步骤做,Let' Go!

1.进入你的个人门户管理,选择个人门户设置,然后选择模版选择,选择自定义CSS进入。

2.你是不是看到了一些CSS代码呢,请找到下列代码:

body{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 956px;
background-color: #336666;
font-size: 12px;
color: #666666;
}#navi_bar a:link {
/*导航条文字颜色*/
}#navi_bar a:visited {}

好了下面的是关键的步骤:

在这后面加入下面的代码:

#navi_bar a:hover{color:#000000; font-weight:bold;text-decoration:blink;background:#FF0000;font-size:18px}
#navi_bar a{display:block}

代码说明:1.color 表示鼠标移动到字上的颜色,text-decoration 表示文字的修饰效果,可以选择的属性有(none 表示超连

接没有下划线,underline则有下划线,overline则给超连文字加上划线,换成line-through给超连文字加上线,blink则使文字在闪

烁。)background 表示鼠标到达时的颜色。font-size 表示字体的大小,如果要让导航栏有动感,这里字体大小要比navi_bar a:link

中的字体要大,在CSS定义中的字体大小是14px,所以我们要选择比14px大的字体。

2.navi_bar a{display:block}表示颜色填充满整个表格,否则只能填充文字。

时间: 2024-08-19 11:49:57

利用CSS制作动感导航栏的相关文章

纯CSS制作二级导航

原文:纯CSS制作二级导航 一.问题描述 做一个类似校园网首页,主要是导航栏的设置,ul默认纵向排列,如何横向排列,同时去掉圆点. 二.问题解决 2.1 先写导航条 用两个ul嵌套,一个ul是横向导航条,另一个是每个小项目下连一个竖向的ul. 1 <ul id="nav_ul"> 2 <li> 3 <a href="#">首页</a> 4 <ul class="nav_ul_ul"> 5

利用Photoshop制作动感的摇滚音乐海报教程

  利用Photoshop制作动感的摇滚音乐海报教程,效果图用到的实物素材比较少,仅有人物及背景,其它效果如波纹.线条.文字.装饰小点等都需要自己手工制作 最终效果 1.创建一个600*600像素的文档,并用黑色填充. 2.打开星空素材,粘贴到画布上,降低图层的不透明度为55%,并添加一个图层蒙版,使用一个柔角大的黑色画笔在蒙版上涂抹,不要那么多星星. 3.点击图层面板下方的"创建新的填充或调整图层"按钮,选择"色阶"并如下调整. 4.打开人物素材,给吉他手图层添加

CSS 面包屑导航栏2个例子

  方法一, 说明:本方法使用CSS3,无图片,兼容各种webkit系浏览器,同时兼容IE8+.先上图: 1.首先是HTML代码,比较简单,只需要一个简单的ul和li即可  代码如下   <div id="crumbs"> <ul>  <li><a href="#">首页</a></li>  <li><a href="#">目录</a>&l

怎样用PPT制作网站导航栏

有很多朋友问我怎么样做一个仿网站类型的PPT,为了方便大家学习,今天就做一个这样的PPT教程.而对于仿网站类型的PPT所遇到的最大难题就是导航栏的制作,今天我们就从最难的地方来开始吧.(提供PPT源文件下载) PPT教程一.首先画一个矩形框,设置其大小为:高6.2厘米,宽5.2厘米. PPT教程二.再画一个矩形框,设置其大小为:高6厘米,宽5厘米. PPT教程三.把它们的顶边.左边重合在一起,再进行组合,这样两个对象就变成一个对象. 具体步骤如下:把小一点的矩形框放在大的矩形框上面,直接拖动小的

如何用CSS制作纵向导航菜单?

应用Web标准进行网页制作以后,我们通常用ul无序列表标签来构建菜单.我们以前讨论过很多横向菜单的制作,在前面的文章中,我们讲述了<用"ul+li"及css制作韩国风格菜单>,是一种纵向的导航菜单.我们今天来看另一种纵向导航菜单,我们不断的总结经验.提高编码水平,才能在实际操作中更加的得心应手. 我们看下面的XHTML代码:  代码如下 复制代码 <ul><span>www.111cn.net</span>  <li><

Bootstrap入门Demo——制作路径导航栏

                           今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面,感觉挺好看,然后去官网看了下组件,发现都挺漂亮的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源码看了看.    一,源码文件简介                                 下载完源码之后,我们肯定是想着先把源码中的Demo先运行下看看,但是,看着这么多英文的东西还是很迷茫,所以,从整体上熟悉下都有什么东西还是很有必要的.

div+css制作水平导航条

css|导航条 创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,就像例A里的一样. 这种方法看起来很合理也很直观.但问题是,把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白.所以,为了避免所有的链接都挤在一起,你最 后通常都不得不插入管道(垂直条)和非换行的空白字符作为分隔符. 就如下面的代码所示,结果很难是我们所要的清晰.结构化的标示. 以下为引用的内容:<div id="navbar1">  <a href="l

CSS制作网页导航:两侧背景自动延伸

方法来源于土豆网的导航,在这里纪录一下实现的思路. 主要是利用 position 属性的 absolute 和 relative 配合 z-index 来实现的,通过position:absolute将需要平铺的背景层叠在另一背景上,这样即可以实现同一位置的两个背景,再使用z-index将内容提升到最高阶显示. <div id="a"><div id="b"><ul><li><a href="http:

利用photoshop制作动感非主流效果闪图

教程: 1.打开原图,复制背景2次,得到背景副本.背景副本2 2.选择背景副本,执行滤镜--模糊--镜头模糊,点击确定即可 3.选择背景副本2,执行滤镜--模糊--径向模糊,参数如下图 4.打开动画栏(窗口--动画),按鼠标所示位置复制2个帧 5.选择第一帧,在图层栏上显示背景图层(如图鼠标所示位置,注意其他2个图层前面是没有眼睛的) 同理第2帧.第3帧也一样,第3帧的操作就不贴图上来了. 6.最后保存为gif格式图片.