CSS样式随手记

最新推荐文章于 2024-07-16 16:16:24 发布

原创最新推荐文章于 2024-07-16 16:16:24 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

背景（background）属性的值的书写顺序官方并没有强制标准的。为了可读性，建议大家如下写：

background:背景颜色背景图片地址背景平铺背景滚动背景位置

~~~css

background: transparent url(image.jpg) repeat-y scroll 50% 0 ;

~~~

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

border-collapse:collapse; 表示相邻边框合并在一起。

float(浮动)可以使元素显示模式体现为行内块特性

absolute(绝对定位)可以把行内元素转换为行内块模式

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