前端学习基础第七天

重要样式

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>