利用CSS制作动感导航栏

2016-02-19 19:46 7 1 收藏

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

【 tulaoshi.com - Web开发 】

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

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

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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}表示颜色填充满整个表格,否则只能填充文字。

来源:https://www.tulaoshi.com/n/20160219/1621743.html

延伸阅读
标签: Web开发
自己写的个导航,感觉还不错...惟一的不足就是hack比较多,如果有简洁的方式实现,请留言告诉我...呵呵... 样式部分: #headerMenu {     width:560px;     margin:30px auto; } .menu {     font-size:14px;     line-height:18px;    &n...
标签: Web开发
在上面一节我们讲到的是垂直的导航.但是大多网站用的还是横向的导航,那么就来跟我学下横向导航是如何实现的. 要怎么实现下面的效果.只要在列表项之间避免换行就行了,所以要把li转换为内联. HTML和CSS代码如下: ============================= !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    ...
【PS文字特效】利用PS置换滤镜制作动感水波字 水波文字包含两个部分:水波及文字,制作之前需要先把水波素材进行一些www.tulaoshi.com简单的处理,把水纹处理干净后保存,然后输入文字或图形,用置换滤镜置换后简单调色即可。 最终效果 1、创建大小为1880×1800像素的新文件,填充黑色背景。 2、现在我们...
标签: PS
利用PS滤镜制作烟雾动感曲线教程 教程的效果都是由一条直线变形得到的。其中用到了波浪滤镜,使用的时候可以设置其中的波长及波幅等来控制曲线的弧度,连续使用后会得到类似烟雾的效果。后期再多复制几层并加上发光样式就会更明显。 图老师推荐:photoshop7.0迷你版免费下载    |  Photoshop CS5 中文免费下载  |&nb...
标签: Web开发
除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站. 在以前做网站导航时,往往依赖于图像,表格,和javascript.而这些都严重的影响了网站的可访问性和可使用性.如果在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的显示.比如说一个用户...

经验教程

154

收藏

56
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部