首页 > Web开发 > 详细

CSS案例1(导航栏)

时间:2019-10-12 09:24:28      阅读:89      评论:0      收藏:0      [点我收藏+]

文本的装饰

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

技术分享图片

 

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

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

  

CSS案例1(导航栏)

原文:https://www.cnblogs.com/superjishere/p/11658192.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!