<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title></title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

    *{padding: 0px;margin: 0px;}

    ul{ overflow: hidden; margin: 0 auto;margin-left:80px;}

    ul li { margin-left:-35px; float:left; list-style-type: none; height:40px; font:16px/40px microsoft yahei; color:#fff; }

    ul li span{ border:20px solid transparent; border-left:15px solid #fff; float: right; position: relative; }

    ul li em{ border:20px solid transparent; border-left:15px solid #2b2937; float: right; position: absolute; top:-20px; left:-15px; z-index: 1;}

    ul li a{color:#fff; text-decoration: none; padding:0 15px 0 40px; background: #2b2937; height:40px; display: block; float: left}

    ul li:hover a{background:#394165;float: left; color:#fff;}

    ul li:hover em{border-left-color:#394165 }

    ul li strong{ display: block;border:20px solid transparent; border-left:15px solid #fff;height:0px; float: left; margin-left:-5px;}

</style>

</head>

<body>

    <ul>

        <li><a href="#" ><strong></strong>首页</a><span><em></em></span></li>

        <li><a href="#" >公司简介</a><span><em></em></span></li>

        <li><a href="#" >公司简介</a><span><em></em></span></li>

        <li><a href="#" >公司简介</a><span><em></em></span></li>

        <li><a href="#" >公司简介</a><span><em></em></span></li>

        <li><a href="#" >公司简介</a><span><em></em></span></li>

        <li><a href="#" >公司简介</a><span><em></em></span></li>

    </ul>

</body>

</html>

css2实现尖角箭头式导航的更多相关文章

  1. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  2. html如何绘制带尖角（三角）的矩形

    结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...

  3. CSS3 media queries + jQuery实现响应式导航

    目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM ...

  4. Bootstrap组件之响应式导航条

    响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .nav ...

  5. Java程序员的日常 —— 响应式导航Demo

    这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo. 效果 代码 <!DOCTYPE html> <html> &l ...

  6. 15款帮助你实现响应式导航的 jQuery 插件

    对于我们大多数人来说,建立一个负责任的布局中最困难的方面是规划和导航的实现.由于没有真正经得起考验的通用解决方案,您可以使用的菜单设计风格将取决于正在建设的网站类型. 无论你正在建设什么类型的网站,在 ...

  7. CSS3之尖角标签

    如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> ...

  8. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  9. CSS3+Js制作的一款响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大 ...

随机推荐

  1. 温故而知新之数据库的分离和附加…高手请跳过….

    sql server2005分离数据库后,把路径下的两个文件拷到自己想要存放的目录下,然后再附加

  2. [转]Java虚拟机类加载机制浅谈

    Java语言是一种编译后再经过解释器执行的过程, 解释器主要就是如何处理解释Class文件的二进制字节流.JVM主要包含三大核心部分:运行时数据区,类加载器和执行引擎. 虚拟机将描述类的数据从Clas ...

  3. BOOST CHRONO steadycolock::now分析

    一直觉得boost的时间库不是很好用,当然,也有可能是我没有深入理解,所以,把代码弄出来看看或许要好些,时间处理中,取当前时间真的是太常见,而boost中各种clock又区分不清楚,然而,代码能说明一 ...

  4. abstract的方法是否可同时是static 是否可同时是native 是否可同时

    搬一下以前写的 1.abstract与static (what)​ abstract:用来声明抽象方法,抽象方法没有方法体,不能被直接调用,必须在子类overriding后才能使用 static:用来 ...

  5. 移动端js插件分享

    分享几个移动端使用的插件,个人感觉挺不错的. 1. TouchSlide1.1 滑动的焦点图  http://pan.baidu.com/s/1i3J6bbB 2. iscroll.js  模拟滚动条 ...

  6. Android 6.0 以及HttpClient

    Android 6.0 SDK,API Level 是 23.更新之后,就可以修改 compileSdkVersion 和targetSdkVersion 到 23 体验新的特性了. 同时 Andro ...

  7. raphael 支持group(简)

    raphael 不支持group,里面有的set方法,只是把对象数组存起来,方法调用的时候,遍历都调用下,但是在实际需求上面感觉group还是瞒有用处的,可以控制group下面的节点的交互 比如地图区 ...

  8. SilverLight搭建WCF聊天室详细过程

    收藏SL双工通信例子教程 SilverLight 4正式版发布给开发人员带来了更多功能,并且4已经支持NET.TCP协议,配合WCF开发高效率的交互应用程序已经不再是难事,本系列文章主要针对已经完成的 ...

  9. SQL Server Primary key 、clustered index 、 unique

    primary key: 1.主键不可以有空值. 2.不可以有重复行. unique : 1.可以有空行. 2.不可以有重复行. clustered index: 1.可以有重复行. 2.可以有空行. ...

  10. JS中的prototype属性

    JavaScript是基于对象的,任何元素都可以看成对象.然而,类型和对象是不同的.本文中,我们除了讨论类型和对象的一些特点之外,更重要的 是研究  如何写出好的并且利于重用的类型.毕竟,JavaSc ...