html5 div布局与table布局详解_1
本文实例为大家解析了html5 div布局与table布局,供大家参考,具体内容如下
div布局:html css实现简单布局。
#container中height不能写成百分数,必须为具体高度。
<!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布局:
<!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>
效果图:
(资源库 www.zyku.net)
您可能感兴趣的文章
- 03-15前端布局神器display:flex
- 06-03HTML使用栅格布局实现六种筛子样式的代码详解
- 05-09一张图解析FastAdmin中的表格列表的功能
- 05-05excel表格中自动生成手机号码
- 03-17Bootstrap表格制作代码
- 02-20Dreamweaver CS3中的CSS布局规则
- 02-18html5 div布局与table布局详解
- 02-18移动端html5页面长按实现高亮全选文本内容的兼容解决
- 02-18Html5 Geolocation获取地理位置信息实例
- 02-18canvas与html5实现视频截图功能示例
- 12-13红魔游戏6S怎么提高刷新率
- 07-08帝国CMS7.0支持无限附件分表,管理与选
- 02-21CentOS彻底删除MySQL的方法
- 01-11DIY小部件-DIY小部件应用软件功能介绍
- 02-22DedeCMS织梦首页调用单页文档内容的sq
- 01-11截图作图-截图作图应用软件功能介绍
- 04-06小米11ultra防误触模式设置方法
- 02-28帝国CMS灵动标签调用复选框字段怎么去
- 01-11乙教育-乙教育应用软件功能介绍
- 11-04iwatch7锁屏功能在哪
最近更新
阅读排行
猜你喜欢
- 10-01numbers表格雷达图设置方法介绍
- 02-22DedeCMS登录管理后台出现假死的解决方
- 01-12Vicool-Vicool应用软件功能介绍
- 11-14apt-get安装报错E: Sub-process /usr/
- 02-16Vim 多行剪切、复制和删除功能
- 03-13帝国CMS提示信息函数printerror()
- 10-13华为日历显示节假日休假信息
- 12-26心欣圆-心欣圆应用软件功能介绍
- 01-12ip摄像头app-ip摄像头app应用软件功能
- 02-22DedeCMS利用单页制作谷歌XML地图的方