I.精灵图的使用需知
.box1 {
width: 65px;
height: 60px;
background-color: pink;
margin: 100px auto;
/* 后面两个元素为精灵图捕捉对应小图标的X轴和Y轴坐标 */
background: url(images/test.png) no-repeat -178px 0;
}
后面两个坐标分别对应X轴和Y轴座标的移动
II.15-滑动门原理.html
<style>
/*1. a 是 设置 左侧 背景 (左门)*/
a {
/*因为我们是滑动门,左右推拉 跟文字内容多少有关系,此时需要用文字撑开盒子, 就要用到行内块*/
display: inline-block;
height: 33px;
background: url(images/to.png) no-repeat;
margin: 100px;
padding-left: 15px;
color: #fff;
}
/*2. span 是设置 右侧 背景 (右门)*/
a span {
display: inline-block;
height: 33px;
/*一定注意 span 需要背景图片 右对齐*/
background: url(images/to.png) no-repeat right top;
padding-right: 15px;
}
/*3 因为整个导航栏都是 链接 所以 a 要包含 span */
</style>
</head>
<body>
<a href="#">
<span>首页</span>
</a>
<a href="#">
<span>公司新闻</span>
</a>
</body>
1.滑动门原理主要针对带有文字的模块,其模块内部包含一个标签和文字标签,文字标签由标签所包裹。
2.两个标签都必须设置成行内块元素,因为行内块元素在一排展示,同时行内块元素可以设置宽高。
3.a标签负责设置左侧内边距(背景),而内置的文字标签负责设置右侧内边距(背景)
4.两边如果设置伪类选择器的时候,在更换图片时都必须通过更换