CSS布局案例实践-优快云博客

本文链接：https://blog.youkuaiyun.com/escdelete/article/details/19261815
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>盒子模型案例</title>
<style>
	body{
		margin:0px;
		padding:0px;
		border:1px solid #FF0000;
	}
	div{
		width:100px;
		height:50px;
		border-top:2px #00CC66 dotted;
		border-right:2px #CC6699 solid;
		border-bottom:2px #999900 dashed;
		border-left:2px #CC66CC groove;
	}
</style>
</head>
<body>
	<div>
		盒子模型案例
	</div>
</body>
</html>







<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>float</title>
<style>
	div{
		width:200px;
		height:120px;
		border:1px #FF0000 solid;
	}
	#one{
		background-color:#0000FF;
		text-align:center;
		float:right;
	}
	#two{
		background-color:#33FFFF;
		text-align:left;
		clear:right;
		float:right;
	}
	#three{
		background-color:#CCFF66;
		text-align:right;
	}
</style>
</head>
<!-- 
	
-->
<body>
	<div id="one">
		第一个div
	</div>
	<div id="two">
		第二个div
	</div>
	<div id="three">
		第三个div
	</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>float</title>
<style>
	#content{
		width:200px;
		height:80px;
		background-color:#FFFFFF;
	}
	#image{
		float:left;
	}
</style>
</head>
<!-- 
	
-->
<body>
	<div id="content">
		<div id="image">
			<img src="1.png" />
			
		</div>
		<div id="text">
			我正在测试代码我正在测试代码我正在测试代码我正在测试代码
		</div>
	</div>
</body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>position</title>
<style>
	#one{
		width:200px;
		height:80px;
		border:1px #009966 solid;
		background-color:#00CCCC;
		position: relative;
		z-index:10;
	}
	#two{
		width:200px;
		height:80px;
		border:1px #009966 solid;
		background-color:#CC00CC;
		position:absolute;
		top:60px;
		left:40px;
		z-index:5;
	}
	#three{
		width:200px;
		height:80px;
		border:1px #009966 solid;
		background-color:#0000FF;
		position:relative;
		z-index:1;
	}
</style>
</head>
<!-- 
	position:标签的定位
			值：
				absolute	绝对定位
					标签原有的位置释放，下面的标签上移
					偏移时参照的对象为父对象（父标签）
				relative	相对定位
					标签原有的位置不释放
					偏移时参照的对象为对象的原有位置
		偏移属性:
			top:
			left:
			right:
			bottom:
		
		层：
		z-index:
			值大着 上层显示
			值小着， 下层显示
			
			使用前提： 必须设置position

-->
<body>
	<div id="one">
	
	</div>
	<div id="two">
	
	</div>
	<div id="three">
	
	</div>
</body>
</html>


这些代码没有什么难度，把最基本的概念理解了，再多熟练写代码提高代码的书写速度！
CSS（续）--案例
