398day(overflow,vertical,鼠标样式,轮廓,精灵图)

《2018年11月5日》【连续398天】

标题:overflow,vertical,鼠标样式,轮廓,精灵图;

内容:

/*overflow: visible / auto / hidden / scroll */
			/*cursor: pointer/text/move/default;*/

去轮廓:

input,
textarea {
	outline: none;
}
textarea {
			resize: none; /*防止拖拽*/
			outline: none;
		}
/*	vertical-align : top /middle / bottom /baseline;*/
		/*注意基线对齐时的边框问题*/
/*只针对行内元素和行内块元素,尤其是行内块元素,主要用于图片和表单的对齐*/
white-space: nowarp;  /*强制一行显示*/
text-overflow: clip / ellipsis; /*后者是超出文本省略号代替*/

精灵图:

将背景小图集合到大图上,这样浏览器只需请求一次即可;

使用:

缩略图:原图600*669

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		span {
			display: inline-block;
			background: url(images/abcd.jpg) no-repeat;
		}

		.a1 {
			width: 117px;
			height: 121px;
			background-position: -370px -270px;
		}
		
		.a2 {
			width: 126px;
			height: 114px;
			background-position: -124px -413px;
		}

		.a3 {
			width: 115px;
			height: 113px;
			background-position: 0 -9px;
		}
		.a4 {
			width: 125px;
			height: 123px;
			background-position: -247px -270px;
		}

		.a5 {
			width: 112px;
			height: 110px;
			background-position: -96px -141px;
		}

		.a6 {
			width: 115px;
			height: 107px;
			background-position: -474px -9px;
		}
		
	</style>
</head>
<body>
	<span class="a1"></span>
	<span class="a2"></span>
	<span class="a3"></span>
	<span class="a4"></span>
	<span class="a5"></span>
	<span class="a6"></span>
</body>

猜你喜欢

转载自blog.csdn.net/orangecloudy/article/details/83758588
今日推荐