简单纯css 多级导航菜单制作教程1 - 使用ul li 制作导航栏

最新推荐文章于 2021-06-01 04:56:17 发布

weixin_30414305

最新推荐文章于 2021-06-01 04:56:17 发布

阅读量461

点赞数 1

原文链接：http://www.cnblogs.com/iiixxxiii/archive/2013/04/22/3035487.html

版权

这是效果:

这是html代码结构

< div id= "nav">
        < div class= "menu">
            < ul>
                    < li>
                        < a href= "">菜单 1</ a>
                    </ li>
                    < li>
                        < a href= "">菜单 2</ a>
                     </ li>
                     < li>
                        < a href= "">菜单 3</ a>
                      </ li>
            </ ul>
        </ div>
</ div>

正常不加css 的显示是这样:

第一步我们要将排列变成横列

我们加上css

. menu ul { list- style:none;}
. menu li { float:left; width: 100px;}

分下下这3句

list-style:none; 是消除 ul 前面的小点

float:left; 将li 变成浮动元素,

width:100px; 设定宽度

显示是这样:

接下来我们修改 a 的样式

添加如下样式

. menu a{
        display:block; /*此元素将显示为块级元素*/
         height: 32px;
         width: 100px;
        line- height: 32px;        /*字体行高*/
         text-decoration:none;    /*取消链接下划线*/
         text- align: center;        /*字居中*/
    }

    /*配色独立出来修改方便*/
    . menu a {
         color:#F8F8F8; /*文字颜色*/
         background:# 2571B7; /*底色*/
    }
    . menu a:hover {
         background: # 175286; /*鼠标悬浮颜色*/
    }

这样一个简单的导航菜单就制作完成了

来自为知笔记(Wiz)

转载于:https://www.cnblogs.com/iiixxxiii/archive/2013/04/22/3035487.html