首页 > 代码库 > 慕课笔记利用css进行布局【一列布局】
慕课笔记利用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居中
慕课笔记利用css进行布局【一列布局】
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。