HTML水平导航栏伸缩效果

2017-10-26 20:01:33来源:CSDN作者:qinqigang人点击

分享

前端知识

感觉自己前端不是很好,还要多多练习。做了一下笔记。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>水平导航栏伸缩动画效果</title>    <script src="../js/jquery.min.js"></script>    <style>        *{            margin: 0px;            padding: 0px;            font-size: 14px;        }        ul{            list-style: none; /*无序号*/            height: 50px;            padding-left: 30px;            border-bottom: 5px solid  #f60; /*整个 ul 的底部变宽,为一条线*/        }        li{            float: left;            margin-top: 20px;        }        a{text-decoration: none;/* a 标签的下划线*/            display: block;/*将 a 标签变成一个块,进而可以设置属性*/            height: 30px;            line-height: 30px;  /*文字居中*/            width: 120px;            background-color: #ccc;            margin-bottom: 1px;            text-align: center;        }        a:hover{            color: #fff;            background-color: #f60;            height: 30px;            line-height: 30px;        }    </style>    <script>        $(function () {            $("a").hover(                function () {                    $(this).stop().animate({"width":"170px"},200);                },function () {                    $(this).stop().animate({"width":"120px"},200);                }            )        });    </script></head><body><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></body></html>

效果

这里写图片描述

微信扫一扫

第七城市微信公众平台