a { text-decoration:none; } .bottomNav { /*border:1px solid red; */ width:100%; height:52px; position:fixed; bottom:1px; background-color:#f7f7fa; } .bottomNav_item { /*border:1px solid red; */ width:25%; height:50px; float:left; text-align:center; } .bottomNav_icon { margin:auto; width:30px; height:30px; } .bottomNav_icon img { width:100%; height:100%; } .bottomNav_item p { margin-top:3px; color:gray; } .gray { -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); filter:gray; } .inital_color { background-color:blue; }
<p align="center">实现微信固定底部导航,
导航栏图标背景颜色随点击发生变化