zoukankan      html  css  js  c++  java
  • 制作导航菜单分隔线的总结:用css3

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

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

    <!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度 分隔线

  • 相关阅读:
    Linux进程管理概述
    【反转单链表】一篇就够了
    线性数据结构
    Linux的su和sudo有什么区别?如何使用?
    关于CentOS切换中文输入法的问题
    MySQL 初识
    MySQL 增-删-改操作
    数据库简介
    MySQL 查询操作
    HANDLER Statement
  • 原文地址:https://www.cnblogs.com/alone2015/p/4349584.html
Copyright © 2011-2022 走看看