导航条背景练习

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

导航条图片背景练习：

<DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航条背景练习</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            .nav {
                width: 1000px;
                height: 39px;
                margin: 50px auto;
                line-height: 39px;
                background-color: #dedede;
                background-image: url(bg.png);
                background-repeat: repeat-x;
                list-style: none;
            }

            .nav li {
                width: 20%;
                float: left;
                text-align: center;
            }

            .nav a {
                display: block;
                width: 100%;
                height: 39px;
                color: #000;
                font-size: 17px;
                font-weight: bold;
                text-decoration: none;
            }

            .nav a:hover {
                color: #fff;
                background-color: #e61013;
            }
        </style>
    </head>
    <body>
        <ul class="nav">
            <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>

你可以先按照样图自己动手编写 >>戳我查看样图<<

最终效果 >>请戳我<<

如发现错误请联系我，谢谢你。
本文链接：http://ninefire.tk/HTML&CSS.basics/56.html