灵活应变，超有用活字格技能：一、如何快速制作系统菜单栏动态高亮效果

很多人在最开始制作菜单栏的时候肯定跟我遇到过同样的问题
一个页面对应一个母版然后建很多个母版，比如……这样


这样是非常麻烦的，那么问题来了，我们怎样做一个动态页面，既能让用户知道他当前所在的页面（也就是让菜单栏的某个按钮高亮显示），又能便于我们开发呢？

首先我们需要了解CSS，什么是CSS？
让我们有请度娘上场~~~~~
https://baike.baidu.com/item/CSS/5457?fr=aladdin
简而言之，作为跟我一样不是敲代码的人而言，你只需要知道——CSS就是用于为网页页面提供页面效果

在活字格中，CSS需要被编辑在文件>设置>CSS里面的文件中



而我们今天的主角要登场了：

1. .hyperLink-MasterPageMenu a{
   
2.     line-height: 255%;
   
3.     max-height: 100%;
   
4.     height: 100%;
   
5.     vertical-align: initial;  
   
6.     -webkit-transition: 0.3s ease-in;
   
7.     -moz-transition: 0.3s ease-in;
   
8.     transition: 0.3s ease-in;  
   
9. }
   
10. 
    
11. .active a{
    
12.     background: #232323 !important;
    
13.     color: #ffffff !important;
    
14. }
    
15. 
    
16. .hyperLink-MasterPageMenu:hover a{
    
17.     background: #232323 !important;
    
18.     color: #ffffff !important;
    
19. }

复制代码

上方的代码需要复制粘贴在CSS文件中。
上方的参数我就不讲了（有兴趣的可以查下http://www.w3school.com.cn/cssref），我主要讲最后一行
hover就是鼠标移动到该项目上时候想要出现的动态效果
下方的background 和 color 就是背景颜色和字体颜色
我给的例子默认是黑色，有需要的可以改成其他颜色，需要用16进制颜色代码（附链接http://tool.oschina.net/commons?type=3）

当然，不要以为这样就完了，因为你知道给文件写上了CSS代码，怎么让按钮知道他该执行这行命令呢，点击你想要他变色的单元格，选择CSS类名，然后写上代码中的类名



然后就可以实现啦~~~~~~

Simon.hu 发表于 2017-11-27 14:01
你真是太厉害了

你之前花那么多时间解决我问题现在得我来帮你分担下了哈哈

优秀

无效果图·无真相···

666

厉害

学到了

感谢各位同学的努力，相信我们一起努力可以让产品更好，解决我们更多的问题！

学习了

新小林 发表于 2017-11-27 14:08
你之前花那么多时间解决我问题现在得我来帮你分担下了哈哈

感谢！