新手篇:如何用ccs制作一个简单的布局(附代码)
导读:收集整理的这篇文章主要介绍了新手篇:如何用ccs制作一个简单的布局(附代码),觉得挺不错的,现在分享给大家,也给大家做个参考。之前的文章《手把手教你使用css3制作炫酷的导航栏效果(代码详解)》中,给大家介绍怎么使用css3制作炫酷的导航栏...
收集整理的这篇文章主要介绍了新手篇:如何用ccs制作一个简单的布局(附代码),觉得挺不错的,现在分享给大家,也给大家做个参考。之前的文章《手把手教你使用css3制作炫酷的导航栏效果(代码详解)》中,给大家介绍怎么使用css3制作炫酷的导航栏效果。下面本篇文章给大家介绍如何用htML制作一个简单的布局的方法,我们一起看看怎么做。
生活中互联网发达了,网页中常常有这样的布局,给大家分享一下看效果图看完效果,我们来研究一下是怎么实现呢,给大家用于讲解div+css布局的基本流程。
1、创建html
Html编辑代码示例
!DOCTYPE html> html> head> tITle> /title> /head> body> /body> /html>
2、定义一个包含文本的div
大标题同时使用class
属性向样式。
div class="title"> 顶部/div> div class="footer"> 底部/div>
3、在style
之间,对body
进行样式初始化,添加设置外边距margin
为0,内边距padding
为0,然后使用设置文字居中text-align
。
style type="text/css"> body{ text-align: center; margin: 0; padding: 0} /style>
4、在style
之间,对div
进行样式添加设置所有的div
高度为200px,内容的颜色为红色。
div{ height: 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制作一个简单的布局(附代码)的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 新手篇:如何用ccs制作一个简单的布局(附代码)
本文地址: https://pptw.com/jishu/589590.html