zoukankan      html  css  js  c++  java
  • 实践中学习css3(二级导航条制作)

    <!--
    
    -moz-:火狐
    
    -webkit-:谷歌
    
    -o-:opera
    
    -ms-:IE
    
    -->
    
    
    
    <!DOCTYPE html>
    <html lang="zh-CN"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>二级CSS3动画下拉菜单</title>
    <style>
    body {
    background: #eee;
    }
    #menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    }
    #menu {
    width: 960px;
    margin: 60px auto;
    border: 1px solid #222;
    background-color: #111;
    background-image: -moz-linear-gradient(#444, #111);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
    background-image: -webkit-linear-gradient(#444, #111);
    background-image: -o-linear-gradient(#444, #111);
    background-image: -ms-linear-gradient(#444, #111);
    background-image: linear-gradient(#444, #111);
    
    <!--gradient:阴影,在火狐中-moz-gradient(top,#color,#color),在谷歌中-webkit-gradient(linear,top,button,form(#color),to(#color))第一个参数为类型linear(线性渐变)radial(径向渐变),第二和第三为方向参数,第四第五是颜色参数也可以写成-webkit-linear-gradient(#color, #color)-->
    -moz-border-radius: 6px;
    
    -webkit-border-radius: 6px;
    border-radius: 6px;
    
    <!--border-radius:圆角特效-->
    -moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    -webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
    
    <!--box-shadow:阴影特效
    
    box-shadow:inset x-offset y-offset blur-radius spread-radius #color;
    
    inset:阴影类型为内阴影,默认为外阴影;x-offset:x轴偏移量负数(向左)-正数(向右);y-offset:y轴偏移量负数(向上)-正数(向下);blur-radius:模糊半径;#color:阴影颜色-->
    
    zoom: 1;
    font: 13px "trebuchet MS", Arial, Helvetica;
    }
    #menu:before, #menu:after {<!--伪元素-->
    content: "";<!--必要的-->
    display: table;
    }
    #menu:after {
    clear: both;
    }
    #menu li {
    float: left;
    border-right: 1px solid #222;
    -moz-box-shadow: 1px 0 0 #444;
    -webkit-box-shadow: 1px 0 0 #444;
    box-shadow: 1px 0 0 #444;
    position: relative;
    }
    #menu a {
    float: left;
    padding: 12px 30px;
    color: #999;
    text-transform: uppercase;
    
    <!--text-transform:定义文本显示格式
    
    capitalize:首字母大写
    
    uppercase:全部为大写
    
    lowercase:全部为小写-->
    
    font: bold 12px Arial, Helvetica;
    text-decoration: none;
    
    <!--text-decoration:定义文本修饰方式
    
    overline:上划线
    
    line-through:横线穿过文字中间
    
    underline:下划线
    
    blink:定义闪烁文本-->
    text-shadow: 0 1px 0 #000;
    }
    #menu li:hover > a {
    color: #fafafa;
    }
    #menu ul {
    margin: 20px 0 0 0;
    opacity: 0;
    
    <!--opacity:不透明度设置0-1,也可以用rgba(,,,)设置-->
    visibility: hidden;
    
    <!--visibility:visible(元素可见)hidden(元素不可见,但依然占位)
    
    display:none(元素不可见,不占位,连株子代全部不可见-->
    position: absolute;
    top: 38px;
    left: 0;
    z-index: 1;
    background: #444;
    background: -moz-linear-gradient(#444, #111);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
    background: -webkit-linear-gradient(#444, #111);
    background: -o-linear-gradient(#444, #111);
    background: -ms-linear-gradient(#444, #111);
    background: linear-gradient(#444, #111);
    -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
    -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    box-shadow: 0 -1px 0 rgba(255,255,255,.3);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;<!--作用对象全部,时间0.2秒,速度慢开始慢结束-->
    
    <!--transition:实现动画效果-->
    }
    #menu li:hover > ul {
    opacity: 1;
    visibility: visible;
    margin: 0;
    }
    #menu ul ul {
    top: 0;
    left: 150px;
    margin: 0 0 0 20px;
    _margin: 0;
    -moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    -webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
    box-shadow: -1px 0 0 rgba(255,255,255,.3);
    }
    #menu ul li {
    float: none;
    display: block;
    border: 0;
    _line-height: 0;
    -moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    -webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
    }
    #menu ul li:last-child {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    }
    #menu ul a {
    padding: 10px;
    width: 130px;
    _height: 10px;
    display: block;
    white-space: nowrap;
    
    <!--white-space:文本显示方式 pre(保留空白符) pre-line(合并相同空白符)-->
    float: none;
    text-transform: none;
    }
    #menu ul a:hover {
    background-color: #0186ba;
    background-image: -moz-linear-gradient(#04acec, #0186ba);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
    background-image: -webkit-linear-gradient(#04acec, #0186ba);
    background-image: -o-linear-gradient(#04acec, #0186ba);
    background-image: -ms-linear-gradient(#04acec, #0186ba);
    background-image: linear-gradient(#04acec, #0186ba);
    }
    #menu ul li:first-child > a {
    -moz-border-radius: 3px 3px 0 0;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    }
    #menu ul li:first-child > a:after {
    content: '';
    position: absolute;
    left: 40px;
    top: -6px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #444;
    }
    #menu ul ul li:first-child a:after {
    left: -6px;
    top: 50%;
    margin-top: -6px;
    border-left: 0;
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    border-right: 6px solid #3b3b3b;
    }
    #menu ul li:first-child a:hover:after {
    border-bottom-color: #04acec;
    }
    #menu ul ul li:first-child a:hover:after {
    border-right-color: #0299d3;
    border-bottom-color: transparent;
    }
    #menu ul li:last-child > a {
    -moz-border-radius: 0 0 3px 3px;
    -webkit-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    }
    </style>
    </head>
    <body>
    <div id="menu-wrap">
    <ul id="menu">
    <li><a href="" target="_blannk">首 页</a></li>
    <li> <a href="">分 类</a>
    <ul>
    <li> <a href="">页面重构</a></li>
    <li> <a href="">编程语言</a></li>
    <li> <a href="">调试工具</a></li>
    <li> <a href="">浏览器</a></li>
    </ul>
    </li>
    <li> <a href="">链 接</a>
    <ul>
    <li> <a href="">门户</a></li>
    <li> <a href="">新闻</a></li>
    <li> <a href="">社交</a></li>
    </ul>
    </li>
    <li><a href="">关 于</a></li>
    <li><a href="">联 系</a>
    <ul>
    <li><a href="">微博</a></li>
    <li><a href="">微信</a></li>
    <li><a href="">E-mail</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </body></html>
  • 相关阅读:
    element ui 表单清空
    element ui 覆盖样式 方法
    element ui 修改表单值 提交无效
    element ui 抽屉里的表单输入框无法修改值
    element ui 抽屉首次显示 闪烁
    css 左侧高度 跟随右侧内容高度 自适应
    PICNUF框架
    elementui 抽屉组件标题 出现黑色边框
    vue 子组件跨多层调用父组件中方法
    vue 编辑table 数据 未点击提交,table里的数据就发生了改变(深拷贝处理)
  • 原文地址:https://www.cnblogs.com/zhenxianluo/p/5065825.html
Copyright © 2011-2022 走看看