当前位置: 代码迷 >> 综合 >> CSS 导航栏案例
  详细解决方案

CSS 导航栏案例

热度:81   发布时间:2024-01-26 02:46:10.0

导航栏案例

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

<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>

 

 

 

 

 

  相关解决方案