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

收藏

本帖最后由新小林于 2017-11-27 13:37 编辑

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

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

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

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

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

.hyperLink-MasterPageMenu a{
line-height: 255%;
max-height: 100%;
height: 100%;
vertical-align: initial;
-webkit-transition: 0.3s ease-in;
-moz-transition: 0.3s ease-in;
transition: 0.3s ease-in;
}
.active a{
background: #232323 !important;
color: #ffffff !important;
}
.hyperLink-MasterPageMenu:hover a{
background: #232323 !important;
color: #ffffff !important;
}

复制代码

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

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