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才能够和上面的对齐，同时中间的三张设置成
向左边进行浮动，这样就可以让他们进行同行显示
