CSS 导航栏CSS 导航栏水平导航栏垂直导航栏float和display: inline-block到底有什么区别？float

48 阅读 0 评论 32 点赞

我是靠谱客的博主丰富月饼，最近开发中收集的这篇文章主要介绍CSS 导航栏CSS 导航栏水平导航栏垂直导航栏float和display: inline-block到底有什么区别？float，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

CSS 导航栏

熟练使用导航栏，对于任何网站都非常重要。

使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。

水平导航栏

由于使用列表元素，都会有一个默认的样式，所以我们在进行导航栏制作的时候，一定要将这些样式去除掉

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
li a {
    text-decoration: none;
}

两种方式创建水平导航栏，一种是display:inline-block一种是 float

display:inline-block
同样的

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #333;
}

/*修改链接样式*/
li a {
    color: white;
    display: inline-block;/*注意如果要更改a链接的尺寸，必须给他block化*/
    width: 50px;
    text-decoration: none;
}
/*将列表水平化*/
li{
    display: inline-block;
    text-align: center;
}

/*更改悬浮状态*/
li a:hover {
    background-color: #111;
}
/*给出一个active类 进行导航激活状态显示*/
li a.active {
    background-color: #4CAF50;
}

垂直导航栏

创建一个简单的垂直导航条实例，在鼠标移动到选项时，修改背景颜色：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
 
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}