第四课css中的定位和伪选择器:hover的使用五期课程2019年3月14号 22点

定位分为三种：固定定位fixed; 相对定位relative;绝对定位absolute;
伪选择器:hover用于制作下拉框

实例
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="icon" type="images/x-icon" href="">
	<title>css中的定位</title>
	<style type="text/css">
	*{margin: 0;padding: 0;}
		.fix{
			width: 40px;
			height: 500px;
			background: red;
			/*固定定位：可以上下左右移动*/
			position: fixed;top: ;left: ;right: 0;bottom: ;
		}
		.box{
			height: 2000px;
		}
		/*relative:相对定位元素的定位是相对其正常的位置，相对定位元素通常是用来作为绝对定位元素的容器块*/
		.rel{
			width: 200px;
			height: 200px;
			background: green;
			position: relative;/*top: 20px;left: 20px;*/
		}
		/*absolute:绝对定位的元素位置相对于最近的已定位父元素，如果没有父元素，那么他的位置相对于初始包含块*/
		.a{
			width: 50px;
			height: 50px;
			background: red;
			position: absolute;left: 300px;
		}
		/*z-index 属性设置元素的堆叠顺序，页面默认是1，结合定位才有作用，相对定位设置不管用*/
		/*子绝父相*/
	/*伪选择器:hover;*/
	a{
		color: #000;
		text-decoration: none;

	}
	a:hover{
		color: green;
		font-weight: bold; /*字体加粗*/
		font-size: 20px;
		text-decoration: underline;  /*给元素加上下划线*/
	}
	ul li{
		list-style: none;
		float: left;
		width: 100px;
		/*border: 1px solid #000;*/
		line-height: 30px;
		text-align: center;
		position: relative;;
	}
	ul li:hover{
		background: blue;
		color: red;
	}
	ul li ul{
		width: 100px;
		height: 100px;
		position: absolute;left: 0;
		display: none; /*使元素不显示*/
	}
	ul li:hover .b{
		display: block;

	}
	</style>
	
</head>
<body>
	<div class="fix">
		
	</div>
	<div class="box"">
		<div class="rel">
			<div class="a"></div>
		</div>
		<a href="">php中文网</a>
		<ul>
			<li>web
				<ul class="b">
					<li>html</li>
					<li>css</li>
					<li>jquery</li>
				</ul>
			</li>
			<li>sql</li>
			<li>java</li>
		</ul>
	</div>

</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例

总结：
1.fixed固定定位是固定在页面某个位置，可以上下左右移动；
  relative相对定位元素的定位是相对其正常的位置，相对定位元素通常是用来作为绝对定位元素的容器块；
  absolute绝对定位的元素位置相对于最近的已定位父元素，如果没有父元素，那么他的位置相对于初始包含块;
子绝父相.
2.z-index 属性设置元素的堆叠顺序，页面默认是1，结合定位才有作用
3.伪选择器:hover主要用于超链接鼠标点上去的效果和制作下拉框。
第四课css中的定位和伪选择器:hover的使用 五期课程2019年3月14号 22点

相关文章
