html5 div布局与table布局详解

  发布时间:2016-11-16 16:51:36   作者:csdn9_14   我要评论
这篇文章主要为大家详细介绍了html5 div布局与table布局,区分div布局与table布局的异同,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

本文实例为大家解析了html5 div布局与table布局,供大家参考,具体内容如下

div布局:html+css实现简单布局。

#container中height不能写成百分数,必须为具体高度。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!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布局:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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

效果图:

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

蓄力AI

相关文章

  • HTML利用九宫格原理进行网页布局

    这篇文章主要介绍了HTML利用九宫格原理进行网页布局,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2020-03-13
  • 吃透移动端 Html5 响应式布局

    这篇文章主要介绍了吃透移动端 Html5 响应式布局,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2019-12-16
  • 详解html5页面 rem 布局适配方法

    本篇文章主要介绍了详解html5页面 rem 布局适配方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-12
  • HTML+CSS实现单列布局水平居中布局

    这篇文章主要介绍了HTML+CSS实现单列布局水平居中布局的相关资料,需要的朋友可以参考下
    2017-09-06
  • HTML使用栅格布局实现六种筛子样式的代码详解

    这篇文章主要介绍了HTML使用栅格布局实现六种筛子的样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-06-03

最新评论