html5 div布局与table布局详解
发布时间:2016-11-16 16:51:36 作者:csdn9_14 我要评论
这篇文章主要为大家详细介绍了html5 div布局与table布局,区分div布局与table布局的异同,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例为大家解析了html5 div布局与table布局,供大家参考,具体内容如下
div布局:html+css实现简单布局。
#container中height不能写成百分数,必须为具体高度。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> < html > < head lang = "en" > < meta charset = "UTF-8" > < title >div布局</ title > < style type = "text/css" > body{ margin:0; padding:0; } #container{ width:100%; height:650px; background-color: aqua; } #heading{ width:100%; height:10%; background-color: azure; } #content-menu{ width:30%; height:80%; background-color: chartreuse; float:left; } #content-body{ width:70%; height:80%; background-color: chocolate; float:left; } #footer{ width:100%; height:10%; background-color: darkgrey; clear: both; } </ style > </ head > < body > < div id = "container" > < div id = "heading" >头部</ div > < div id = "content-menu" >内容菜单</ div > < div id = "content-body" >内容主体</ div > < div id = "footer" >底部</ div > </ div > </ body > </ html > |
效果图:
table布局:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> < html > < head lang = "en" > < meta charset = "UTF-8" > < title >table布局</ title > </ head > < body marginwidth = "0px" marginheight = "0px" > < table width = "100%" height = "650px" style = "background-color: aqua" > < tr > < td colspan = "3" width = "100%" height = "10%" style = "background-color: chartreuse" >这是头部</ td > </ tr > < tr > < td width = "20%" height = "80%" style = "background-color: antiquewhite" >左菜单</ td > < td width = "60%" height = "80%" style = "background-color: coral" >内容</ td > < td width = "20%" height = "80%" style = "background-color: cornflowerblue" >右菜单</ td > </ tr > < tr > < td colspan = "3" width = "100%" height = "10%" style = "background-color: crimson" >这是底部</ td > </ tr > </ table > </ body > </ html > |
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了HTML利用九宫格原理进行网页布局,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2020-03-13
- 这篇文章主要介绍了吃透移动端 Html5 响应式布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习2019-12-16
- 本篇文章主要介绍了详解html5页面 rem 布局适配方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-01-12
- 这篇文章主要介绍了HTML+CSS实现单列布局水平居中布局的相关资料,需要的朋友可以参考下2017-09-06
- 这篇文章主要介绍了HTML使用栅格布局实现六种筛子的样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-06-03
最新评论