html5 div布局与table布局详解


Posted in HTML / CSS onNovember 16, 2016

本文实例为大家解析了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>

效果图:

html5 div布局与table布局详解

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>

效果图:

html5 div布局与table布局详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
HTML5地理定位_动力节点Java学院整理
Jul 12 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
html5 figure和figcaption的使用方法
Sep 10 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
canvas版人体时钟的实现示例
Jan 29 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
Dec 24 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 #HTML / CSS
HTML5制作表格样式
Nov 15 #HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 #HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 #HTML / CSS
html5 视频播放解决方案
Nov 06 #HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 #HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 #HTML / CSS
You might like
PHP脚本的10个技巧(5)
2006/10/09 PHP
PHP 各种排序算法实现代码
2009/08/20 PHP
九个你必须知道而且又很好用的php函数和特点
2013/08/08 PHP
php实现图片缩略图的方法
2016/03/29 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
分享27个jQuery 表单插件集合推荐
2011/04/25 Javascript
jquery 实现两Select 标签项互调示例代码
2014/09/25 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
2017/11/14 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
Vuex中实现数据状态查询与更改
2019/11/08 Javascript
python去掉字符串中重复字符的方法
2014/02/27 Python
2款Python内存检测工具介绍和使用方法
2014/06/01 Python
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
Too Faced官网:美国知名彩妆品牌
2017/03/07 全球购物
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
2014年师德承诺书
2014/05/23 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
Python字典和列表性能之间的比较
2021/06/07 Python
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python