Web前端---图层嵌套与层叠&&三行三列效果

1.图层的嵌套设计

复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图层嵌套</title>
	<style type="text/css">
		.inline_div{display:inline-block;}
		#wrap{width=400px;height=250px;border:2px solid black;}
		#d1,#d2{height:100px;width:45%;background-color:green;margin:20px;}
		#d2{background-color:yellow;}
		#d3{height:100px;width:95%;border:2px solid black;background-color:#66FF33;margin:0 auto;}
		h3{font-size:28px;color:#0033FF;}
	</style>
</head>

<body>
	<h3>图层嵌套的应用</h3>
	<div id="wrap">
		<div id="d1" class="inline_div">div1</div>
		<div id="d2" class="inline_div">div2</div>
		<div id="d3">div3</div>
	</div>
</body>
</html>

（1）多个div既可以各自使用，也可以相互包含，嵌套调用，这样就会更加有利于整体页面的布局

（2）body里面外层的div嵌套了3对内层的div,id是CSS里面的id选择器，class是类选择器

（3）id选择器是由#和id选择器的名字组成的，在style标记里面被定义，和body里面相互对应

（4）class里面的inline，对应style里面由点和名字组成的类选择器，两者也是相互对应的

2.层叠效果

复制代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>层叠效果</title>
	<style type="text/css">
		body{margin:0;}
		div{position:absolute;width:200px;height:200px;}
		#d1{background-color:black;color:white;z-index:0;}
		#d2{background-color:red;top:25px;left:50px;z-index:1;}
		#d3{background-color:yellow;top:50px;left:100px;z-index:2;}
	</style>
</head>

<body>
	<div id="d1">div1</div>
	<div id="d2">div2</div>
	<div id="d3">div3</div>
</body>
</html>

（1）想要实现层叠的效果，必须要先把position属性的值设置为absolute,在使用z-index设计它们之间的层数关系

（2）margin表示的是边界

（3）25----50；50---100的便宜定位的数值设计成等比例的更能够凸显效果

（4）这里同样使用了选择器，#加上选择起的名字和body里面的相互对应，z-index越大，月位于最上方。

3，三行三列的效果

（1）三行三列的布局效果里面把HTML和CSS内容分割开来，各自放在不同的文件夹里面

（2）使用link标记，但是link标记里面的href要作为CSS里面的文件名称，只有这样2这才能相互

关联，实现布局效果；

（3）CSS里面的页脚footer要先清除前面使用的页面格式，然后设计自己的样式，CSS里面的

left,center right的width比例相加的和应该是100才能够和上面的对齐，同时中间的三张设置成

向左边进行浮动，这样就可以让他们进行同行显示