css实现导航切换

效果图：

代码如下，复制即可使用：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>css实现导航切换</title>
  5.     <style type="text/css">
  6.         .clothes{width:1170px;margin:0 auto;border-bottom:1px solid red;margin:30px; }
  7.         *{padding:0;margin:0;}
  8.         li{list-style:none;height:35px;line-height:35px;width:64px;text-align:center;}
  9.         a{text-decoration:none;color:#000;text-align:center;font-size:12px;font-family:"微软雅黑";margin-bottom:-1px;}
  10.         .clearfix:after{content:"/200b";height:0;display:block;visibility: hidden;clear: both;}
  11.         ul li{float:left;border-top:1px solid #ededed;}
  12.         a{border-left:1px solid #fff;width:64px;text-align:center;display:inline-block;height:33px;line-height:33px;margin-bottom:1px;}
  13.         a:hover{background:#fff;border-top:2px solid red;border-left:1px solid red !important;border-right:1px solid red;
  14.             height:34px;line-height:34px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div class="clothes">
  20.         <ul class="clearfix">
  21.             <li style="border-left:1px solid #ededed;"><a style="border-left:1px solid #fff;" href="">大牌</a></li>
  22.             <li><a href="">男装</a></li>
  23.             <li><a href="">女装</a></li>
  24.             <li><a href="">鞋靴</a></li>
  25.             <li><a href="">箱包</a></li>
  26.             <li><a href="">内衣配饰</a></li>
  27.             <li><a href="">珠宝首饰</a></li>
  28.             <li><a href="">奢侈礼品</a></li>
  29.             <li style="border-right:1px solid #ededed;"><a href="">奢华腕表</a></li>
  30.         </ul>
  31.     </div>
  32. </body>
  33. </html>

如有错误，欢迎联系我改正，非常感谢！！！

css实现导航切换的更多相关文章

  1. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  2. CSS实现导航条Tab切换的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  3. CSS实现导航条Tab的三种方法

    前面的话   导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局   根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...

  4. vue2.0实现底部导航切换效果

    使用vue2.0写移动端的时候,经常会写底部导航效果,点击切换路由效果,实现图片和文字颜色切换.vue2.0也提供了很多ul框架供我们实现效果,今天就用原生的实现一个底部导航切换,直接上代码: 效果图 ...

  5. Web前端开发实战6：CSS实现导航菜单结合二级下拉式菜单的简单变换

    前面几篇博文都在讲导航菜单和二级下拉式菜单,事实上有非常多方法都能够实现的.详细的情况还要视情况而定. 在后面学习到jQuery框架之后,会有更丰富的动画效果.因为在学习Ajax和jQuery的初步阶 ...

  6. 微信小程序小技巧系列《一》幻灯片，tab导航切换

    作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}&quo ...

  7. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

  8. CSS之导航菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. CSS凹型导航按钮

    一般需求,圆角看起来更加舒服,但是下面直角略显生硬 于是设计师有了下面的需求,下面加上小凹型: 凹型?凹型?凹型?有点变态,这怎么实现........... 图片肯定是最先考虑到的,CSS实现有貌似有 ...

随机推荐

  1. Docker run centos 内部使用systemctl 启动服务的方法

    1. 执行docker 镜像 使用命令为 docker run --privileged=true -ti -e "container=docker" centos /usr/sb ...

  2. SVN for Mac

    SVN for Mac https://www.wikihow.com/Install-Subversion-on-Mac-OS-X https://subversion.apache.org/pac ...

  3. Java之utf8中文编码转换

    import org.apache.commons.codec.binary.Hex; import org.junit.Test; /** * HBASE中文转换 */ public class C ...

  4. python_面向对象魔法方法指南

    原文: http://www.rafekettler.com/magicmethods.html 原作者: Rafe Kettler 翻译: hit9 原版(英文版) Repo: https://gi ...

  5. MT【81】含参数三次函数因式分解

    解答: 评:这题实质上是对关于$x$的三次函数进行了一个因式分解.这种把$a$看成主元的技巧是初中处理高次的因式分解的常用技巧.如果用三次求导去做计算量比较大,要计算极值.

  6. 导致 KEIL error #20 的一种情况

    > 描述 <+> 环境为 KEIL5.20 & STM32F429工程,平台为 win10 <+> 结构体原形如下 @File <A.h> #incl ...

  7. 菜单栏--Dom选择器

    制作一个左侧菜单栏,包含菜单目录和内容 点击菜单栏才会展示内容,否则隐藏内容 二.事例 2.1 菜单栏基本样式 <body> <div style="height: 48p ...

  8. jquery的json对象与字符串之间转换

    json对象----- >>字符串 JSON.stringify(obj) json字符串------>>json对象 JSON.parse(string) 公众号 欢迎关注我 ...

  9. OpenResty 扩展库(二)lua-resty-template

    Lua和OpenResty的模板引擎(HTML) 模板语法 您可以在模板中使用以下标签: {{expression}},写入表达式的结果 - html转义 {*expression*},写入表达结果 ...

  10. Ubuntu 16.04开机自启Nginx简单脚本

    本文要记述的是最简单的Ubuntu下开机自启 nginx的脚本 这里将nginx装在了/usr/local/nginx目录下,nginx本身没有注册成服务,所以直接使用服务开机自启是不行的,除非自己写 ...