css实现导航切换

效果图：

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

<!DOCTYPE html>

<html>

<head>

    <title>css实现导航切换</title>

    <style type="text/css">

        .clothes{width:1170px;margin:0 auto;border-bottom:1px solid red;margin:30px; }

        *{padding:0;margin:0;}

        li{list-style:none;height:35px;line-height:35px;width:64px;text-align:center;}

        a{text-decoration:none;color:#000;text-align:center;font-size:12px;font-family:"微软雅黑";margin-bottom:-1px;}

        .clearfix:after{content:"/200b";height:0;display:block;visibility: hidden;clear: both;}

        ul li{float:left;border-top:1px solid #ededed;}

        a{border-left:1px solid #fff;width:64px;text-align:center;display:inline-block;height:33px;line-height:33px;margin-bottom:1px;}

        a:hover{background:#fff;border-top:2px solid red;border-left:1px solid red !important;border-right:1px solid red;

            height:34px;line-height:34px;

        }

    </style>

</head>

<body>

    <div class="clothes">

        <ul class="clearfix">

            <li style="border-left:1px solid #ededed;"><a style="border-left:1px solid #fff;" href="">大牌</a></li>

            <li><a href="">男装</a></li>

            <li><a href="">女装</a></li>

            <li><a href="">鞋靴</a></li>

            <li><a href="">箱包</a></li>

            <li><a href="">内衣配饰</a></li>

            <li><a href="">珠宝首饰</a></li>

            <li><a href="">奢侈礼品</a></li>

            <li style="border-right:1px solid #ededed;"><a href="">奢华腕表</a></li>

        </ul>

    </div>

</body>

</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. [置顶网]POWER 9为云与智能打造强大引擎

    POWER 9为云与智能打造强大引擎 关键字: 浪潮商用机器 POWER9 至顶网服务器频道 (文/董培欣): 从全球角度看,政治经济波动持续.逆全球化趋势抬头.技术加速变革商业等因素促使企业需要数字 ...

  2. App 添加权限

    配置好了

  3. EntityFramework中Json序列化的循环引用问题解决--Newtonsoft.Json

    1.在使用EF时,由于数据库主外键关联,将对象进行Json序列化时会遇到循环引用的问题 //EF 中由于数据库主外键关联,对象的序列化经常出现循环引用问题 //使用.Net 自带的序列化工具,序列化出 ...

  4. c# 移除文本文件里的某一行

    参考自:http://zhidao.baidu.com/question/87467507.html //定义一个变量用来存读到的东西 string text = ""; //用一 ...

  5. 【刷题】LOJ 6005 「网络流 24 题」最长递增子序列

    题目描述 给定正整数序列 \(x_1 \sim x_n\) ,以下递增子序列均为非严格递增. 计算其最长递增子序列的长度 \(s\) . 计算从给定的序列中最多可取出多少个长度为 \(s\) 的递增子 ...

  6. 洛谷P1450 [HAOI2008]硬币购物（背包问题，容斥原理）

    洛谷题目传送门 我实在是太弱了,第一次正儿八经写背包DP,第一次领会如此巧妙的容斥原理的应用...... 对每次询问都做一遍多重背包,显然T飞,就不考虑了 关键就在于每次询问如何利用重复的信息 我这么 ...

  7. 【BZOJ1303】[CQOI2009]中位数图（模拟）

    [BZOJ1303][CQOI2009]中位数图(模拟) 题面 BZOJ 洛谷 题解 把大于\(b\)的数设为\(1\),小于\(b\)的数设为\(-1\).显然询问就是有多少个横跨了\(b\)这个数 ...

  8. Fib的奇怪定理 ： gcd(F[n],F[m])=F[gcd(n,m)]

    引理1:gcd(F[n],f[n-1])=1 因为 F[n]=f[n-1]+F[n-2] 所以 gcd(F[n],f[n-1]) = gcd(F[n-1]+F[n-2],F[n-1]) gcd的更损相 ...

  9. luogu1081 [NOIp2012]开车旅行 (STL::multiset+倍增)

    先用不管什么方法求出来从每个点出发,A走到哪.B走到哪(我写了一个很沙雕的STL) 然后把每个点拆成两个点,分别表示A从这里出发和B从这里出发,然后连边是要A连到B.B连到A.边长就是这次走的路径长度 ...

  10. 遭遇：“传入的表格格式数据流(TDS)远程过程调用(RPC)协议流不正确” 错误

    http://www.cnblogs.com/delphinet/archive/2010/03/09/1681777.html 正在写一个类似文章的发表系统.其中记录文章内容的字段Contents设 ...