经过百度统计中国中使用谷歌浏览器比较多，我很奇怪，我身边的同事很少用谷歌，唯一我用谷歌的原因就是看上它调试能力和模拟手机。

下面是我个人制作的 预览用谷歌浏览器.

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .nav{max-width:960px;height:30px;background: #f0ad4e;line-height:30px;border-radius:15px;  text-align:center;margin:40px auto 0;

            box-shadow: 0 2px 0 #ddd,-2px 0 #ddd;}

        ul li{list-style: none;float:left;padding:0 30px;}

        .nav ul li{

            background:  no-repeat right/ 1px 15px linear-gradient(to right, #dd2926,#a82724);

        }

        .nav ul li:last-child {background:none;}

        a{text-decoration: none;color:#ffffff;

            display: inline-block;

            -webkit-transition: all 0.2s ease-in;

        }

        a:hover {

            -webkit-transform: rotate(10deg);

        }

    </style>

</head>

<body>

<div class="nav">

    <ul>

        <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>

    </ul>

</div>

</body>

</html>

字体旋转到10度 分隔线

制作导航菜单分隔线的总结:用css3的更多相关文章

  1. CSS3背景 制作导航菜单综合练习题

    CSS3背景 制作导航菜单综合练习题 小伙伴们,根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用 ...

  2. 【CSS3】---练习制作导航菜单

    练习题 根据所学知识,使用CSS3实现下图的导航菜单效果 任务 1.制作导航圆角 提示:使用border-radius实现圆角 2.制作导航立体风格 提示:使用box-shadow实现立体风格 3.制 ...

  3. iOS史上最简单修改导航栏分隔线颜色方法!!!

    override func viewDidLoad() { super.viewDidLoad() if let imageView = self.findNavLineView(view: navi ...

  4. ul制作导航菜单

    首先上图,最终效果: HTML代码: <!DOCTYPE html><html> <head> <meta charset="utf-8" ...

  5. WEB入门.九 导航菜单

    学习内容 水平导航菜单 垂直导航菜单 下拉式导航菜单 能力目标 制作tab标签导航菜单 制作带箭头的导航菜单 制作带信息提示的导航菜单 制作垂直下拉导航菜单 制作水平下拉导航菜单 本章简介 上一章节中 ...

  6. 用CSS做导航菜单的4个理由

    导航结构在网站设计中是起到决定性作用的,导航菜单/栏常常通过颜色.排版.形状和一些图片来帮助网站创造更好的视觉和感受,它是网页设计的关键元素.虽然网站导航菜单的外观是网页设计中关系到整个设计成败与否的 ...

  7. 使用 jQuery 和 CSS3 制作滑动导航菜单

    这个下拉菜单可以让你的网站非常优雅,滑动框导航效果令人印象深刻.此外,子菜单框也可以与此集成起来以使其更具吸引力.导航是网站成功的关键之一,有吸引力的导航能够引导用户浏览网站中的更多内容. 效果演示  ...

  8. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  9. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. bootstrap-select 使用笔记 设置选中值及手动刷新

    直接笔记: 1.页面刚加载完填充select选项数据时,需要手动刷新一下组件,否则没有选项值.(组件初始化时,li 与 option 分离的,需要刷新一下(据说)) $.post('/cpms/tod ...

  2. 【转】Python爬虫_示例2

    爬虫项目:爬取并筛选拉钩网职位信息自动提交简历   一 目标站点分析 #一:实验前准备: 浏览器用Chrome 用Ctrl+Shift+Delete清除浏览器缓存的Cookie 打开network准备 ...

  3. c# 如何设置透明画刷

    使用solidBrush新建画刷,定义画刷的颜色为透明色 Brush b = new SolidBrush(Color.FromArgb(50, Color.Green)); 这里的50是透明度的设置 ...

  4. Android:日常学习笔记(6)——探究活动（4）

    Android:日常学习笔记(6)——探究活动(4) 活动的启动模式 standard模式 standard是活动默认的启动模式,在不进行显示定义的情况下,所有活动都会自动使用这种启动模式. stan ...

  5. 异常：System.Runtime.InteropServices.Marshal.GetTypeFromCLSID(System.Guid)

    异常:System.Runtime.InteropServices.Marshal.GetTypeFromCLSID(System.Guid) 原因:该引用所需.NET Framework版本为4.5 ...

  6. spark学习（2）--hadoop安装、配置

    环境: 三台机器 ubuntu14.04 hadoop2.7.5 jdk-8u161-linux-x64.tar.gz (jdk1.8) 架构: machine101 :名称节点.数据节点.Secon ...

  7. 前端 初级篇(HTML)

    HTML 概述: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就 ...

  8. EG:nginx反向代理两台web服务器,实现负载均衡 所有的web服务共享一台nfs的存储

    step1: 三台web服务器环境配置:iptables -F; setenforce 0 关闭防火墙:关闭setlinux step2:三台web服务器 装软件 step3: 主机修改配置文件:vi ...

  9. INSPIRED启示录 读书笔记 - 第3章 产品管理与项目管理

    互联网让两者变得不同 在传统的零售软件领域,产品经理常常兼任项目经理的工作,随着互联网的发展,两者的职责区别也越来越明显 产品管理的职责是探索(定义)有价值的.可用的.可行的产品 项目管理的职责是关注 ...

  10. MongoDB快速入门（五）- Where子句

    RDBMS Where子句等效于MongoDB 查询文档在一些条件的基础上,可以使用下面的操作 操作 语法 示例 RDBMS等效语句 Equality {<key>:<value&g ...