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实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
HTML5 Canvas实现放大镜效果示例
Mar 25 HTML / CSS
CSS Transition通过改变Height实现展开收起元素
Aug 07 HTML / CSS
Canvas绘制像素风图片的示例代码
Sep 25 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 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
YB217、YB235、YB400浅听
2021/03/02 无线电
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
onpropertypchange
2006/07/01 Javascript
Javascript里使用Dom操作Xml
2006/09/20 Javascript
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
jquery 学习笔记一
2010/04/07 Javascript
精选的10款用于构建良好易用性网站的jQuery插件
2011/01/23 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
vue.js 微信支付前端代码分享
2018/02/10 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
JavaScript中继承原理与用法实例入门
2020/05/09 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Python文件处理
2016/02/29 Python
11月编程语言排行榜 Python逆袭C#上升到第4
2017/11/15 Python
python 搜索大文件的实例代码
2019/07/08 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
匡威德国官网:Converse德国
2019/01/26 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
计算机专业自我鉴定
2013/10/15 职场文书
党员岗位承诺书
2014/03/25 职场文书
降消项目实施方案
2014/03/30 职场文书
公司门卫岗位职责范本
2014/07/08 职场文书
同学聚会开幕词
2019/04/02 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python