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. QEMU简单知识 以及磁盘格式转换的简单命令

    From 百度百科 QEMU,是由 Fabrice Bellard开发的通用.开源机器模拟与虚拟化软件,Fabrice Bellard是另一个著名的C编译器的作者.QEMU可以在不同的机器上运行独自开 ...

  2. 2013长春网赛 1006 hdu 4764 Stone(巴什博弈)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4764 题意:Tang 和 Jiang 玩一个游戏,轮流写下一个数,Tang先手,第一次Tang只能写[ ...

  3. iOS记录一常用的方法和语句

    1.当前控制器是否还显示,比较常用于网络请求回来页面已退出 //当前视图控制器是否在显示 +(BOOL)isCurrentViewControllerVisible:(UIViewController ...

  4. docker--从仓库下载镜像到推送自己的项目到仓库步骤详解

    怎样从仓库下载的镜像,变成容器,并在容器中制作项目,再将容器变成镜像,然后将镜像推送到仓库? 一:从官网下载镜像 官方的https://hub.docker.com/提供了数十万个镜像提供大家下载 以 ...

  5. Jamie's Contact Groups POJ - 2289(多重匹配 最大值最小化 最大流)

    Jamie's Contact Groups Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 8567   Accepted: ...

  6. python_面向对象小试题

    打印啥? class Animal(object): hobby = "eat" def run(self): print(self.hobby) return self.hobb ...

  7. 【转】Keil ARM开发 error L6236E错误解决

    顺利创建了第一个Keil工程却发现不能完成链接,出现了一个下面这样的报错: .\Objects\demo_simple.sct(7): error: L6236E: No section matche ...

  8. 洛谷 P2224 [HNOI2001]产品加工 解题报告

    P2224 [HNOI2001]产品加工 题目描述 某加工厂有A.B两台机器,来加工的产品可以由其中任何一台机器完成,或者两台机器共同完成.由于受到机器性能和产品特性的限制,不同的机器加工同一产品所需 ...

  9. luogu1082 [NOIp2012]同余方程 (扩展欧几里得)

    由于保证有解,所以1%gcd(x,y)=0,所以gcd(x,y)=1,直接做就行了 #include<bits/stdc++.h> #define pa pair<int,int&g ...

  10. Mysql(三)约束

    一.视图 视图是虚拟的数据表,本身不存储数据,而是提供数据的逻辑 展示.       1.创建视图 create view stu_view as select s1.id, s1.name, s2. ...