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实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
css3 media 响应式布局的简单实例
Aug 03 HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
Aug 23 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 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
我的论坛源代码(九)
2006/10/09 PHP
ThinkPHP模板Switch标签用法示例
2014/06/30 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
script标签属性用type还是language
2015/01/21 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
jQuery中each()、find()和filter()等节点操作方法详解(推荐)
2016/05/25 Javascript
Three.js学习之网格
2016/08/10 Javascript
js replace()去除代码中空格的实例
2017/02/14 Javascript
解决webpack无法通过IP地址访问localhost的问题
2018/02/22 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
Python Queue模块详解
2014/11/30 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
纯CSS改变webkit内核浏览器的滚动条样式
2014/04/17 HTML / CSS
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
最新奶茶店创业计划书范文
2014/02/08 职场文书
个人银行贷款担保书
2014/04/01 职场文书
社区巾帼文明岗事迹材料
2014/06/03 职场文书
土地租赁意向书
2014/07/30 职场文书
私人委托书格式
2014/09/10 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
工程部部长岗位职责
2015/02/12 职场文书
收入证明怎么写
2015/06/12 职场文书
电工实训心得体会
2016/01/14 职场文书
Python Flask请求扩展与中间件相关知识总结
2021/06/11 Python
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python