你的位置:首页 > 软件开发 > 网页设计 > 导航点击选中效果重构

导航点击选中效果重构

发布时间:2016-03-21 14:00:07
一、场景最近做重构,有一个功能是,鼠标点击链接后显示不同样式:代码如下,样式布局我修改后如下,使用bootstrap框架来做。<!DOCTYPE html><html lang="zh-CN"><head> <met ...

一、场景

最近做重构,有一个功能是,鼠标点击链接后显示不同样式:

导航点击选中效果重构

代码如下,样式布局我修改后如下,使用bootstrap框架来做。

导航点击选中效果重构导航点击选中效果重构
<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="utf-8" />  <link href="css/bootstrap.min.css" rel="stylesheet">  <title>starof test</title>  <style type="text/css">.menu{border-radius:4px;background-color:#f8f8f8;padding:10px;margin-top:30px;}.menu p{font-size:26px;margin-bottom:25px;color:#76caea;padding-left:30px;margin-top:15px;}.menu .nav-pills > li > a:hover{background-color:#8fd4e6;}/*page1.html页面定义*/.menu01{background-color:#5dc1d1;border-radius:4px;}/*page2.html页面定义*//*.menu02{background-color:#5dc1d1;border-radius:4px;}*//*page3.html页面定义*//*.menu03{background-color:#5dc1d1;border-radius:4px;}*/  </style></head><body><div class="col-md-2 menu">  <p>    <span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;<span>starof</span>  </p>  <ul class="nav nav-pills nav-stacked">    <li class="menu01"><a href="page1.html">page1</a></li>    <li class="menu02"><a href="page2.html">page2</a></li>    <li class="menu03"><a href="page3.html">page3</a></li>  </ul></div></body></html>

 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com

原标题:导航点击选中效果重构

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录