导航栏案例

最新推荐文章于 2023-06-29 15:32:53 发布

LullabyLY

最新推荐文章于 2023-06-29 15:32:53 发布

阅读量711

点赞数

本文链接：https://blog.csdn.net/qq_42853241/article/details/82774131

版权

文本的装饰

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>

效果图

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

LullabyLY

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
导航栏案例

文本的装饰text-decoration 通常我们用于给链接修改装饰效果值描述none默认。定义标准的文本underline定义文本下的一条线overline定义文本上的一条线line-through定义穿过文本下的一条线使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以是文字垂直居中...
复制链接

扫一扫