文本的装饰
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>
效果图
背景图片没有选好，效果略差！
版权声明：本文为qq_42853241原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。