请选择 进入手机版 | 继续访问电脑版
贠老师培训群:150322713    贠老师QQ:767708506

贠老师office培训-excel学习网

 找回密码
 立即注册
点击咨询贠老师
查看: 186|回复: 4

利用CSS制作动感导航栏

[复制链接]

607

主题

604

帖子

1909

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
1909
发表于 2016-1-24 21:45:07 | 显示全部楼层 |阅读模式

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

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

其实这个很简单,它实际上是用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}表示颜色填充满整个表格,否则只能填充文字。


回复

使用道具 举报

1

主题

886

帖子

5

积分

注册会员

Rank: 2

积分
5
发表于 2016-3-12 11:13:21 | 显示全部楼层
希望楼主能够收集更多的资料,谢谢了!
回复 支持 反对

使用道具 举报

0

主题

775

帖子

783

积分

高级会员

Rank: 4

积分
783
发表于 2016-9-17 10:51:25 | 显示全部楼层
楼主不错
回复 支持 反对

使用道具 举报

1

主题

849

帖子

7

积分

注册会员

Rank: 2

积分
7
发表于 2018-1-20 17:16:12 | 显示全部楼层
好啊楼主,没想到啊,太好了
回复 支持 反对

使用道具 举报

0

主题

902

帖子

45

积分

注册会员

Rank: 2

积分
45
发表于 2018-10-28 10:55:45 | 显示全部楼层
顶楼主,帮你顶个贴,我挣个积分
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



陕ICP备15003731号  

贠老师培训 GMT+8, 2018-11-18 18:02 , Processed in 0.220642 second(s), 31 queries .

快速回复 返回顶部 返回列表