码迷,mamicode.com
首页 > Web开发 > 详细

慕课笔记利用css进行布局【一列布局】

时间:2017-07-29 15:13:44      阅读:169      评论:0      收藏:0      [点我收藏+]

标签:text   width   logs   height   round   html   pre   技术   知识点   


<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居中

 

 

慕课笔记利用css进行布局【一列布局】

标签:text   width   logs   height   round   html   pre   技术   知识点   

原文地址:http://www.cnblogs.com/soulsjie/p/7255662.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!