CSS_스타일 Sample

2733 단어 sample
<!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>

좋은 웹페이지 즐겨찾기