利用CSS制作动感导航栏

爱的讨伐99

爱的讨伐99

2016-02-19 19:46

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

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

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

  其实这个很简单,它实际上是用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 {}

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

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

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

#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://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

利用CSS制作动感导航栏

Web开发
利用CSS制作动感导航栏

Photoshop制作金属质感导航栏

PS PS基础
Photoshop制作金属质感导航栏

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS+DIV设计实例:超酷的竖排导航栏

Web开发
CSS+DIV设计实例:超酷的竖排导航栏

纯CSS制作简洁的垂直导航

Web开发
纯CSS制作简洁的垂直导航

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

怎样用PPT制作网站导航栏

电脑入门
怎样用PPT制作网站导航栏

利用置换滤镜制作动感水波字

PS效果 PS PS基础
利用置换滤镜制作动感水波字

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

一个自己写的拆分字符串的oracle function

一个自己写的拆分字符串的oracle function

CSS清除浮动的三个方法

CSS清除浮动的三个方法
下拉加载更多内容 ↓