当前位置 : 主页 > 网页制作 > css >

CSS案例1(导航栏)

来源:互联网 收集:自由互联 发布时间:2021-06-13
文本的装饰 text-decoration 通常我们用于给链接修改装饰效果 使用技巧 :在一行内的盒子内,我们设定行高等于盒子的高度,就可以使文字垂直居中。 head meta charset="utf-8" stylebody {backgr

文本的装饰

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>
网友评论