导航栏案例

71 阅读 0 评论 47 点赞

我是靠谱客的博主喜悦八宝粥，最近开发中收集的这篇文章主要介绍导航栏案例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文本的装饰

text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本
underline	定义文本下的一条线
overline	定义文本上的一条线
line-through	定义穿过文本下的一条线

使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以是文字垂直居中

导航栏设计

鼠标经过文字显示背景
文字水平居中

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body{
	background-color: #000;
}
a{
	width:200px;
	height:50px;
	/*background-color:orange;*/
	display: inline-block;
	text-align: center;
	line-height:50px;    /*在一行盒子内，设置行高等于盒子高度可是文字居中*/
	color: white;
	font-size:22px;
	text-decoration:none;
}
a:hover{
	background: url(images/h.png) no-repeat;
}
</style>
</head>

<body>
<a href="#">专区说明</a>	
<a href="#">申请资格</a>
<a href="#">兑换奖励</a>
<a href="#">下载游戏</a>
</body>

效果图

在这里插入图片描述
背景图片没有选好，效果略差！