text-decoration 通常我们用于给链接修改装饰效果
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。下划线 也是我们链接自带的 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
使用技巧:在一行内的盒子内,我们设定行高等于盒子的高度,就可以使文字垂直居中。
<head>
<meta charset="utf-8">
<style>
body {
background-color: #000;
}
a {
width: 200px;
height: 50px;
/* background-color: orange; */
display: inline-block; /* 把a 行内元素转换为行内块元素 */
text-align: center; /* 文字水平居中 */
line-height: 50px; /* 我们设定行高等于盒子的高度,就可以使文字垂直居中 */
color: #fff;
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>