重要样式
display显示样式:
display:none; /*隐藏样式 */ 这个不会占用页面的位置
display:block; / *这个可以用来显示样式 */
display:inline-block; /*行内块样式 */
display:inline; /*行内元素 */
visibility 显示样式:
visibility: visible; /*这个用来显示*/
visibility:hidden; /*这个用来不显示,但是这个是占用位置的*/
overflow样式:
overflow: hidden; /*溢出隐藏*/
/*overflow: scroll; !*无论有没有溢出都增加滚动条*!*/
/*overflow: visible;*/ /*溢出的时候仍然可以见这个是默认的样式*/
/*overflow: auto; !*溢出的时候增加滚动条*!*/
cursor样式:
cursor: pointer; 鼠标变成小手形状
/*cursor: text; 鼠标变成一个竖线*/
/*cursor: default; 默认就是鼠标的本身形状*/
cursor: move; /*这个是可以拖拽的形状*/
outline样式:
outline:none /*轮廓取消 */
textarea设置:
resize:none /*取消拉伸尺寸*/
vertical-align垂直居中:
vertical-align: bottom; /*底线对齐,可以用来对图片下面的间隙进行清除有时候还可以通过
img{
display:block};也可以达到这个效果,但是不推荐使用这个。
*/
/*vertical-align: top; 顶线对齐*/
/*vertical-align: middle; 中线对齐*/
/*vertical-align: baseline; /* 默认基线对齐*/
border: 0; /*有时候可以用来对图片取消边框*/
white-space,text-overflow样式:
这三个样式要一起使用才有效。
white-space: nowrap; /*强制在一行内显示*/
text-overflow: ellipsis; /*文本超出时候,超出的部分采用省略号来表示*/
overflow: hidden; /*采用溢出隐藏*/
精灵图和滑动门
什么是精灵图?
将html网页中出现的所有背景图片放入一个大的图片中。但是对于插入的图片不放。
为什么引入精灵图?
为了减轻访问页面时候,对服务器访问的压力,因为每一次访问网站,图片都是向服务器进行请求得到的,因此我们想出了将所有背景图片放到一个大图片中去,以减少对服务器访问的压力。
小公司,一般不适用精灵图。
精灵图的缺点?
图片过多,不好管理。
demo如下:
h3{
background: url("../img/index_.png") no-repeat -2px -184px;
width: 26px;
height: 26px;
}
div{
width: 236px;
height: 106px;
background: url("../img/index_.png") no-repeat 0px -350px;
}
滑动门:
思想:
a标签里面带个span标签。
a的background和span的background一样但是,a取背景图片的左边,span标签取背景图片的右边,写入字体时候,由于都设为行内块元素,只要字数不超过背景的width,都会保持滑动门原样。
div a{
display: inline-block;
height: 33px;
background: url("../img/to.png") no-repeat left top;
color: #f8f6f1;
padding-left: 15px;
line-height: 33px;
font-size: 14px;
}
a span{
display: inline-block;
height: 33px;
background: url("../img/to.png") no-repeat right ;
padding-right: 15px;
}
.main a:hover,.main a:hover span{
background-image: url("../img/ao.png");
}
<div class="main">
<a href="#">
<span>
首页
</span>
</a>
</div>