H5学习之旅-H5的布局(10)
2015-09-18 19:10
537 查看
两种实现方式:div和table
div实现布局的方式
代码实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5布局0</title> <style type="text/css"> body{ margin: 0px;; } #container{ width:100%; height: 950px; background-color: chartreuse; } #heading{ width: 100%; height: 10%; background-color: brown; } #content_menu{ width:30%; height: 80%; background-color: blue; float: left; } #content_body{ width: 70%; height: 80%; background-color: darkgreen; float: left; } #footer{ width: 100%; height: 10%; background-color: aliceblue; 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>
!!!!!!!float表示从左往右浮动 clear表示清除
效果图
table布局
代码实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>H5布局0</title> </head> <body> <table width="100%" height="950px" style="background-color: chartreuse"> <tr> <td width="100%" height="10%" style="background-color: brown" colspan="3">头部</td> </tr> <tr> <td width="20%" height="80%" style="background-color: aqua">左菜单</td> <td width="60%" height="80%" style="background-color: black">主体</td> <td width="200%" height="80%" style="background-color:crimson">右菜单</td> </tr> <tr> <td width="100%" height="10%" style="background-color: deeppink" colspan="3">尾部</td> </tr> </table> </body> </html>
!!!!注意colspan属性
效果图
相关文章推荐
- H5学习之旅-H5的布局(10)
- H5学习之旅-H5的布局(10)
- HTML5和HTML4的区别
- 总结html5-canvas学习笔记
- [持续更新]HTML5学习笔记(五)简单Ajax实现
- maven项目加载H5页面(加载页面乱码)
- html5 调用手机相机、文件和相册
- HTML5-websocket(构建高性能的实时web应用)
- HTML5 getUserMedia/AudioContext 打造音谱图形化
- 有趣html5(两)----使用canvas结合剧本画在画布上的简单图(html5另一个强大)
- HTML5就是现在:深入了解Polyfills
- H5学习之旅-H5的块标签的使用(9)
- H5学习之旅-H5的块标签的使用(9)
- H5学习之旅-H5的块标签的使用(9)
- H5学习之旅-H5的块标签的使用(9)
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
- localStorage兼容方案实现
- HTML5+Springmvc实现拖拽文件上传
- html5应用缓存
- html5常见的表单元素