PHP全栈开发（八）：CSS Ⅹ 导航栏制作

学习了这么久的CSS，我们现在也可以小试牛刀一下了，我们使用我们学会的CSS知识来制作一个导航栏。

我们都知道，在现代的导航栏里面，最普遍的就是使用无序列表来制作导航栏。

我们可以使用如下代码来制作一个横向的导航栏

    <ul><li><a href="#home">主页</a></li><li><a href="#news">通知</a></li><li><a href="#things">订单</a></li><li><a href="#contact">联系方式</a></li><li><a href="#gen">个人</a></li><li><a href="#about">关于</a></li></ul>

这就是一个典型的用UL制作的导航栏了。这个原装的货色就是这样子的。

然后现在我们使用CSS来给导航栏加上样式。

看会变成什么样子。我们首先去掉它的列表样式，然后把内外边距全部设置为0.

ul {list-style-type: none;margin: 0;padding: 0;
}

这样一来它就会贴紧浏览器的边缘。并去掉了列表的标志。

上面的例子中的CSS代码是垂直和水平导航栏使用的标准代码。

为了让列表和周围的样式区别开来，我们给列表加上背景颜色，并设定宽度。

ul{list-style-type: none;margin: 0;padding: 0;width: 200px;background-color: #f1f1f1;
}

设置完成之后这个导航栏的效果是这样的。

但是我们感觉这个链接之间还是太挤了。给链接加一些高度间隙。

在增加间距的时候我们首先要做的是就是把<a>变成一个块元素，不然是不能给内联元素增加内外边距的。

所以我们使用以下代码来给链接增加边距。

ul{list-style-type: none;margin: 0;padding: 0;width:200px;background-color: #f1f1f1;}
li a{display:block;padding:8px 8px;text-decoration: none;
}
li a:hover {background-color: #555;color: white;
}

这样一个简单的垂直导航栏就做完了。

如果需要做一个横向的导航栏，只需要把li的float属性设置为left即可。

我们看一个横向导航栏的例子：

 ul{list-style-type:none;margin:0;padding:0;background-color: #333;overflow: hidden;}li {float: left;
}li a{display:block;text-decoration: none;color:white;padding:14px 16px;}li a:hover {background-color: #111;
}

这里使用float:left来实现了display:inline;同样的效果，但值得注意的是。

在使用float:left;来进行横向显示的时候，必须要设置overflow: hidden;

转载于:https://www.cnblogs.com/sparrow32/p/9488302.html

PHP全栈开发（八）：CSS Ⅹ 导航栏制作相关推荐

【全栈开发实战小草看书之Web端（八）主入口】
全栈开发实战小草看书之Web端(八)主入口 Html文件(index.html) <!DOCTYPE html> <html lang="en"><h ...
视频教程-全栈开发之前端开发-HTML5/CSS
全栈开发之前端开发多年互联网从业经验: 有丰富的的企业网站.手游.APP开发经验: 曾担任上海益盟软件技术股份有限公司项目经理及产品经理: 参与项目有益盟私募工厂.睿妙影音家庭物联网设备.手游东方江 ...
python 全栈开发，Day45(html介绍和head标签,body标签中相关标签)
python 全栈开发,Day45(html介绍和head标签,body标签中相关标签) 一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) ...
收藏！最详细的Python全栈开发指南看完这篇你还不会Python全栈开发你来打我!!!
Python Web全栈开发入门实战教程教程大家好,我叫亓官劼(qí guān jié ),这个<Python Web全栈开发入门实战教程教程>是一个零基础的实战教程,手把手带你开 ...
小白都能看懂的实战教程手把手教你Python Web全栈开发(DAY 3)
小白都能看懂的实战教程手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统第三讲这是小白都能看懂的实战教程手把手教你Python Web全栈开发的 ...
小白都能看懂的实战教程手把手教你Python Web全栈开发(DAY 1)
小白都能看懂的实战教程手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统第一讲博主博客文章内容导航(实时更新) 更多优质文章推荐: 收藏!最详细的P ...
python全栈开发工程师_【2018重磅巨献】老男孩Python高级全栈开发工程师第三期...
2018年老男孩python全栈第三期老男孩python全栈3期老男孩教育Python全栈开发为国内首家专注python全方面开发的教育机构老男孩Python全栈第三期课程详细目录,高清不加密! ...
Vue3 Typescript + Axios 全栈开发教程：手把手教你写「待办清单」APP
本文完整版:<Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP> Vue3 Typescript + Axios 全栈开发教程前端 Vue3 ...
将Sublime Text 3设置为Python全栈开发环境
为 Sublime Text 3 设置 Python 的全栈开发环境 Sublime Text 3 (ST3) 是一个轻量级的跨平台文字编辑器,尤以其轻快的速度,易用性和强大的社区支持而著称.它一经面 ...

PHP全栈开发（八）：CSS Ⅹ 导航栏制作

PHP全栈开发（八）：CSS Ⅹ 导航栏制作相关推荐

最新文章

热门文章