购物车
登陆 / 注册
微信扫码登陆

推荐手册

CSS 导航栏(navigation bar)

CSS 导航栏(navigation bar)
拥有易用的导航条对于任何网站都很重要,通过 CSS,可以把乏味的 HTML 菜单转换为漂亮的导航栏。
编辑:前端控 前端控 更新时间:2019-03-22 15:56:29

CSS 导航栏

拥有易用的导航条对于任何网站都很重要

通过 CSS,可以把乏味的 HTML 菜单转换为漂亮的导航栏

导航栏 = 链接列表

导航栏需要标准的 HTML 作为基础。

在我们的案例中,将用标准的 HTML 列表来构建导航栏。

导航栏基本上是一个链接列表,因此使用 <ul> 和 <li> 元素是非常合适的

实例

<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">课程</a></li>
		<li><a href="#">路径</a></li>
		<li><a href="#">资源</a></li>
	</ul>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 26.jpg

去掉小圆点以及内外边距

实例

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

Image 27.jpg

例子解析:

list-style:none:移除列表前小标志,一个导航栏并不需要列表标记

移除浏览器的默认设置将边距和填充设置为0

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

垂直导航栏:

实例

ul{
	width:100px;
	list-style: none;
	margin: 0;
	padding: 0;
	background: #f1f1f1;
}
li a{
	display: block;
	padding: 8px 16px;
  text-decoration: none;
	color:#000;
}
/*鼠标移上去改变背景颜色*/
li :hover{
	background-color:#ccc;
    color: white;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

水平导航栏

实例

ul{
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: #f1f1f1;
	overflow: hidden;/*清除浮动,子元素设置浮动不能将父元素撑开*/
}
li{
float: left;
}
li a{
display: block;
color:#444;
text-decoration: none;
padding:8px 16px;
}
li :hover{
	background-color:#ccc;
    color: white;
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

网站导航
网站首页
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ交流群
微信公众号
微信公众号