慕课笔记利用css进行布局【一列布局】
<html> <head> <title>一列布局</title> <style type="text/css"> body{margin:0;padding:0;text-align:center} /*一列的布局样式*/ /*margin:0 auto使div居中*/ .top{width:800px;height:50px;background:#00f;margin:0 auto} .main{width:800px;height:250px;background:#ccc;margin:0 auto} .foot{width:800px;height:50px;background:#f00;margin:0 auto} </style> </head> <body> <!--/*一列的布局样式*/--> 一列的布局样式<br/> <div class="top">一列布局01</div> <div class="main">一列布局02</div> <div class="foot">一列布局03</div> <br/> <br/> </body> </html>
效果如下：
关键知识点：margin:0 auto使div居中
