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