之前的 文章 《手把手教你使用css3 制作 炫酷的导航栏效果（代码详解）》中，给大家介绍怎么使用css3制作炫酷的导航栏效果。下面本篇文章给大家介绍如何用ht ML 制作一个 简单 的布局的方法，我们一起看看怎么做。
生活 中 互联网 发达了，网页中常常有这样的布局，给大家分享一下看效果图看完效果，我们来研究一下是怎么实现呢，给大家用于 讲解 div+css布局的基本流程。
1、创建html
Html编辑代码示例
<!DOCTY PE html> <html> <head> <t IT le></title> </head> <body> </body> </html>
2、定义一个包含文本的 div 大标题同时使用 class 属性向样式。
<div class="title">顶部</div> <div class="footer">底部</div>
3、在 style 之间，对 body 进行样式初始化，添加设置 外边距 m arg in 为0， 内边距 padding 为0，然后使用设置 文字居中 text-align 。
<style type="text/css">
body{text-align: center ;m ar gin : 0;padding: 0}
</style>4、在 style 之间，对 div 进行样式添加设置所有的 div 高度为200px，内容的颜色为 红色 。
div{h ei ght: 200px;color: red ;}5、在 style 之间，对 title 进行样式使用div创建网页的头部，使用 margin:0 auto 设置 div 居中，同时设置其 宽 度为800px， 背景颜色 为灰色。
.title{margin: 0 auto; width: 800px; background-color: # ccc}6、在 style 之间，使用 div 创建网页的底部，使用 clear:both 清除上面 div 的浮动，避免影响底部的布局。接着使用 margin:0 auto 设置 div 居中，又使用设置其宽度为 800px ，最后背景颜色为 #000fff 。
.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}7、在浏览器打开文件，查看实现的效果。
完整代码
<!DOCTYPE html>
<html>
<head>
<title>布局</title>
</head>
<body>
<style type="text/css">
body{text-align: center;margin: 0;padding: 0}
div{height: 200px;color: red;}
.title{margin: 0 auto; width: 800px; background-color: #ccc}
.footer{clear: both;margin: 0 auto;width: 800px;clear: both;background-color:#000fff}
</style>
<div class="title">顶部</div>
<div class="footer">底部</div>
</body>
</html>推荐学习：CSS视频教程
以上就是 新手 篇：如何用ccs制作一个简单的布局（附代码）的详细内容，更多请关注其它相关文章！
总结
以上是 为你收集整理的 新手篇：如何用ccs制作一个简单的布局（附代码） 全部内容，希望文章能够帮你解决 新手篇：如何用ccs制作一个简单的布局（附代码） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于新手篇：如何用ccs制作一个简单的布局（附代码）的详细内容...