css精灵图和滑动门

层级关系
- z-index -特点
- 在css2中，只能定位的元素才有层级关系，使用z-index设置层级关系
- 如果元素都设置了定位，那么该元素得到默认层级z-index值为auto[0]，最后定位的元素会压着前面定位的元素[后来居上]
- z-index值越大的元素，那么该元素的层级越高
- 如果子元素的父元素设置了定位，那么看谁的父元素z-index值大，那么该元素就在上面

2.绝对定位的元素居中显示

标准流下的盒子居中显示
- 盒子居中显示特点[标准流]
- margin:0 auto;
绝对定位的盒子如何居中显示
- 首先通过left移动父元素宽度一半left:50%
- 通过设置margin-left:负元素自己宽度一半

3.网页布局规范，规避脱标流

网页布局过程中优先考虑标准布局
然后考虑使用浮动
最后使用定位
注意:元素模式转换的过程中，必须使用display

4.图片对齐方式

img图片默认属性vertical-align:baseline;默认值
vertical-align:baselin bottom top middle
vertical-align使用与图片标签或行内元素。table中可以使用vertical-align属性
vertical-align与行高配合实现图片垂直居中位置

5.页面元素隐藏方式

overflow: hidden;
- 将超出部分隐藏
display
- 取值none block
visibility: hidden;
- visibility元素隐藏占位置

6.logo内容移除

背景显示的时候，要有宽高
text-indent: -2000px;

7.精灵图

作用: 减少对服务器请求图片的数量
使用
- 不要移动盒子
- 通过background-position移动背景图片
- 如果使用fw，请使用打开的方式(用切片，找出x，y轴) -制作sprite
- ctrl+n新建画布，设置背景图为透明
- ctrl+shift+s 格式为拼合的png

8.滑动门

滑动门的使用场景
- 核心
  - 内容不能给固定宽度
  - 滑动门要根据内容而定
- 两张背景图的滑动门

3张背景图写法

<body>
	<div class="l"></div>
	<div class="m">文字文字文字</div
	<div class="r"></div>
</body> ----------
<style>
	.l{
		width: 10px;
		height: 100px;
		background: url(images/l.png) no-repeat
		float: left;
	}
	.m{
		/* 注意不给宽度 */
		height: 100px;
		background: url(images/m.png);
		float: left;
		line-height: 100px;
	}
	.r{
		width: 10px;
		height: 100px;
		background: url(images/r.png) no-repeat
		float: left;
	}
</style>

两张背景图的滑动门

<div class="nav">
	<ul>
		<li>
			<a href="#">
				<span>文字一</span>
			</a>
		</li>
	</ul>
</div>

a{
	text-decoration: none;
	color: black;
}
.nav{
}
.nav ul li{
	float: left;
	line-height: 35px;
}
.nav ul li a{
	display: inline-block;
	height: 35px;
	background: url(images/bg_r1_c1.png) no-repeat;
	padding-left: 7px;
}
.nav ul li a span{
	display: inline-block;
	height: 35px;
	background: url(images/bg_r1_c2.png) no-repeat right
	padding-right: 25px;
}

/* 鼠标滑入背景图片改变效果 */
.nav ul li a:hover{
	background: url(images/blue_r1_c1.png) no-repeat;
}
.nav ul li a:hover span{
	background: url(images/blue_r1_c2.png) no-repeat right;
}

9/6/2016 9:29:36 PM

css精灵图和滑动门

3张背景图写法

两张背景图的滑动门

Comments