CSS_样式sample

时间：2014-05-12 12:32:14 收藏：0 阅读：423

<!DOCTYPE HTML>
<html> 
<head> 
	<title>div浮动</title>
	<style type="text/css">
		 body{

		 	margin: 0px 1px 2px 3px;
		 }

		 #father{

		 	background-color: yellow;
		 	width: 100%;
		 	height: 100px;
		 	border: dashed green;
		 }

		 #son1{
		 	float: left;
		 }

		 #son2{
			float: left;
		 }

		 #son3{
			float: left;
		 }

		 #clear{
		 	clear: both;
		 }
	</style>

</head>
   	<body>
   		<!--是div在同一列上,如果清楚浮动效果 同层div也会浮动-->
   		<div id="father">
   			<div id="son1">aaaaaa</div>
   			<div id="son2">bbbbbb</div>
   			<div id="son3">cccccc</div>
   			<div id="clear"></div>
   			<div>dddddddddddd</div>
   		</div>
   	</body>
</html>

<!DOCTYPE HTML>
<html> 
<head> 
	<title>div浮动</title>
	<style type="text/css">
		 body{

		 	margin: 0px 1px 2px 3px;
		 }

		 #father{

		 	background-color: yellow;
		 	width: 100%;
		 	height: 100px;
		 	border: dashed green;
		 	position:relative;
		 }

		 #son1{
		 	position: absolute;
		 	margin-left: 60%;
		 }

		 #son2{
			
		 }

	
	</style>

</head>
   	<body>
   		<!--相对定位，元素没有脱离文本流-->
   		<!--绝对定位，是相对于浏览器-->
   		<!--如果相对于父节点的绝对定位，父节点要设置相对定位,脱离文本流-->
   		<!--result     bbbbbb      aaaaaaaaaa-->
   		<div id="father">
   			<div id="son1">aaaaaa</div>
   			<div id="son2">bbbbbb</div>
   			
   		</div>
   	</body>
</html>

<!DOCTYPE HTML>
<html> 
<head> 
	<title>div常用样式</title>
	<style type="text/css">

		 #father{

		 	background-color: yellow;
		 	width: 100%;
		 	height: 100px;
		 	border:1px dashed green;
		 }

		 #son1，#son2,#son3{
		 	background-color: green;
		 	width: 100px;
		 	margin-left: 5px;
		 	margin-top: 5px;
		 	display: inline; /*3个div显示在同一行*/
		 }

		 #son3{
			display: none; /*隐藏第三个div*/
		 }

		 #son2:hover,#son1:hover{
		 	background-color: blue;
		 	cursor: hand;
		 }
	
	</style>

</head>
   	<body>
   	
   		<div id="father">
   			<div id="son1">aaaaaa</div>
   			<div id="son2">bbbbbb</div>
   			<div id="son3">bbbbbb</div>
   		</div>
   	</body>
</html>

CSS_样式sample,布布扣,bubuko.com