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 开发工具收集
Apr 17 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
一款基于css3麻将筛子3D翻转特效的实例教程
Dec 31 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
浅谈CSS3特性查询(Feature Query: @supports)功能简介
Jul 31 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
CSS预处理框架——Stylus
Apr 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
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
页面图片浮动左右滑动效果的简单实现案例
2014/02/10 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
js点击选择文本的方法
2015/02/09 Javascript
js实现横向伸展开的二级导航菜单代码
2015/08/28 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
[01:13]这,就是刀塔
2014/07/16 DOTA
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
python爬虫的工作原理
2017/03/05 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
python自动循环定时开关机(非重启)测试
2019/08/26 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
悦木之源美国官网:Origins美国
2016/08/01 全球购物
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
软件测试面试题
2015/10/21 面试题
幼儿园教师辞职信
2014/01/18 职场文书
给学校的建议书
2014/03/12 职场文书
2014年减负工作总结
2014/12/10 职场文书
2015年感恩节演讲稿(优选篇)
2015/03/20 职场文书
幼儿园家长反馈意见
2015/06/03 职场文书
教务处教学工作总结
2015/08/10 职场文书
个人业务学习心得体会
2016/01/25 职场文书
导游词之江南周庄
2019/12/06 职场文书
Ubuntu安装Mysql+启用远程连接的完整过程
2022/06/21 Servers