前端导航栏html5+css3

最新推荐文章于 2024-09-28 17:23:57 发布

原创最新推荐文章于 2024-09-28 17:23:57 发布 · 2k 阅读

3 ·

CC 4.0 BY-SA版权

web前端技术专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url("images/bg_title.jpg")  repeat-x,url("images/bg.jpg");
        }
        #logo{
            width:895px;
            height:45px;
            /*margin:上下 左右*/
            margin:50px auto;
            border-radius:10px;
            /*html + css3 渐变画图 */
            background-image:-webkit-linear-gradient(rgba(41,41,41,0.75) 0% ,rgba(54,54,54,0.72) 50%,rgba(24,23,23,0.94) 51%);
            box-shadow:1px 1px 33px #FFFFFF;/*设计阴影的*/
        }
        #logo ul li{
            width:127px;
            height:45px;
            list-style-type: none;/*去掉圆点*/
            float: left;/*水平显示*/
            color:white;
            font-size: 18px;
            font-family:"微软雅黑";
            text-align:center;
            line-height: 45px;
            border-right:1px solid #000;
        }
        #logo ul li a{
            color:white;/* #fff */
            font-size:18px;
            font-family:"微软雅黑";
            text-decoration:none;
        }
        #logo ul li:hover{
            background:rgba(10,5,5,0.45);
        }
        #logo ul li.first:hover{
            border-radius:10px 0px 0px 10px;/*左上 左下 圆弧显示 */
        }
        #logo ul li.last:hover{
            border-radius:0px 10px 10px 0px;/*左上 左下 圆弧显示 */
        }
        #logo ul li ul li{
            border: none;
            border-top:1px solid #989898;
            background:rgba(10,5,5,0.45);/*颜色透明度 */
            border-radius:10px;
        }
        #logo ul li ul{
            display:none;
        }
        #logo ul li ul li:hover{
            background:rgba(10,5,5,0.8);/*颜色透明度 */
            border-radius:10px;
        }
        #logo ul li:hover ul{
            display: block;
            -webkit-animation:roll 1s ease;
        }
        @-webkit-keyframes roll {
            from{
                -webkit-transform: rotate(0deg);
            }
           to{-webkit-transform:rotate(360deg);}
        }
    </style>
</head>
<body>
    <div id="logo">
        <ul>
            <li class="first">
                <a href="#">网址</a>
                <ul>
                    <li>
                        <a href="http://www.baidu.com">百度</a>
                    </li>
                    <li>
                        <a href="http://www.sina.com">新浪</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">英语</a>
            </li>
            <li>
                <a href="#">数学</a>
            </li>
            <li>
                <a href="#">音乐</a>
            </li>
            <li>
                <a href="#">地图<a>
            </li>
            <li class="last" style="border:none;">
                <a href="#">关于<a>
            </li>
        </ul>

    </div>
</body>
</html>