css 创建水平导航条

最新推荐文章于 2023-08-03 09:02:09 发布

tianjun2012

最新推荐文章于 2023-08-03 09:02:09 发布

阅读量2.2k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/tianjun2012/article/details/49864267

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果如下所示：
这里写图片描述
html代码片段如下所示：

<body id="home">

        <ul class="nav">
            <li class="first"><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Clients</a></li>
            <li><a href="#">Case Studies</a></li>
        </ul>
        <br class="clear" />
    </body>

css样式如下：水平有方式列举了三种方式，参看注释

<style type="text/css">

            ul.nav{
                margin: 0;
                padding: 0;
                list-style: none;
                width: 72em;
                background: #faa819 url(img/mainNavBg.gif) repeat-x;
            }

            ul.nav li{
                float: left;
            }
            /* 方法一：添加一个进行清理的元素*/
            /*.nav:after{
                content: ".";
                height: 0;
                visibility: hidden;
                display: block;
                clear:both;
            }*/
            /*方法二：父元素浮动，并使用某个元素（站点页脚）对它进行清理以便换行。*/
            /*ul.nav{
                float: left;
            }
            url.nav .clear{
                clear: both;
            }*/
            /* 方法三：使用overflow：hidden技术（推荐） */
            ul.nav{
                margin: 0;
                padding: 0;
                list-style: none;
                width: 72em;
                overflow: hidden;
                background: #FAA819 url(img/mainNavBg.gif) repeat-x;
            }
            ul.nav a{
                display: block;
                padding: 0 3em;
                line-height: 2.1em;
                background:url(img/divider.gif) repeat-y left top;
                text-decoration: none;
                color: #fff;
            }
            ul.nav .first a{
                background-image: none;
            }
            ul.nav a:hover,
            ul.nav a:focus{
                color:#333;
            }
        </style>

tianjun2012

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css 创建水平导航条

效果如下所示： html代码片段如下所示：<body id="home"> <ul class="nav"> <li class="first"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">News</a><
复制链接

扫一扫