css2实现尖角箭头式导航

<!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>
时间: 2024-11-10 13:29:41

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

箭头式导航

目的: 纯css实现以上这种导航样式 代码: 结构:  (因为空间问题,删除了一个li) 样式: 原文地址:https://www.cnblogs.com/ly-qingqiu/p/10155985.html

html如何绘制带尖角(三角)的矩形

摘要:网上有很多html+css制作带三角的矩形的方法,我在这里列举其中一种,兼容bootstrap3.我们先来看一个三角在左边的对话框的效果图矩形就不必说了,矩形的border-radius也不用说了,圆角可以自己设置,可以直接用bootstrap中的类.下面说下矩形左边的小三角,我们可以这么设置.右边的矩形我们标记为类log-content,左边的小三角我定义为类triangle,在html中的代码是这样:<divclass="log-content" 网上有很多html+c

Bootstrap组件之响应式导航条

响应式导航条:在PC和平板中默认要显示所有的内容:但在手机中导航条中默认只显示“LOGO/Brand”,以及一个“菜单折叠展开按钮”,只有单击折叠按钮后才显示所有的菜单项. 基础class: .navbar 1.Bootstrap中导航条的按位置: 1)顶部导航条 2)底部导航条  Bootstrap中导航条的按颜色: 1)浅色底深色的字 .navbar-default 2)深色底浅色的字 .navbar-inverse Bootstrap中导航条的按定位: 1)相对定位position: re

Bootstrap历练实例:响应式导航栏

响应式的导航栏 为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse..navbar-collapse 的 <div> 中.折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮.第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素.三个带有 class .icon-bar 的 <span> 创建所谓的汉

CSS3媒体查询入门,制作自己的响应式导航

现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大小的屏幕上提供一流的用户体验,答案是:采用响应式设计.响应式设计可以随所显示的屏幕大小而改变.实现响应式设计的主要方法是使用 CSS 媒体查询.--摘自IBMdeveloperworks 相信大家很多人都了解Bootsrap这个响应式框架,简单来说,该框架根据不同的分辨率提供非常友好的浏览体验,里面的核心

css细节决定薪水一:尖角处理

在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫尖角吧,通俗易懂.我查看了各大互联网公司的网站,包括腾讯.百度.新浪.天猫.去哪网, 腾讯: 百度: 去哪网: 天猫: 其中,百度和腾讯直接用的背景图片,简单粗暴,没有艺术细菌. 优点:形状随意: 缺点:不方便维护: 下面要说的是新浪微博,右键小尖角,查看元素,可以看到一段代码: <div clas

bootstrap-面包屑式导航

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>面包屑式导航</title>     <!-- 最新版本的 Boot

bootstrap-胶囊式导航内使用徽章

说明 胶囊式导航内使用徽章 示例 <!DOCTYPE html> <html lang="zh-CN">    <head>      <meta charset="utf-8">      <meta http-equiv="X-UA-Compatible" content="IE=edge">      <meta name="viewport&q

如何利用CSS3与jQuery实现响应式导航

在前端开发中,我们常常需要利用CSS3 media queries + jQuery来实现响应式导航,那它的具体实现步骤和方法到底是怎样的呢?一起来看看吧,希望可以帮助大家更好地学习CSS3. 目的: 实现一个响应式导航,当屏幕宽度大于700px时,效果如下: 当屏幕宽度小于700px时,导航变成一个小按钮,点击之后有一个菜单慢慢拉下来: 思路: 1.为了之后在菜单上绑定事件,并且不向DOM中添加多余的节点,在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个. 所以我选择了将导航绝对定位. 2.