HTML5相关布局

最新推荐文章于 2025-05-21 22:19:12 发布

刘小航9527

最新推荐文章于 2025-05-21 22:19:12 发布

阅读量3.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： HTML5

本文链接：https://blog.youkuaiyun.com/qq_40594554/article/details/84556398

HTML5 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了HTML5中界面布局的基础方法，包括使用div元素进行布局，并定义样式以控制宽度、高度和背景颜色。同时，文章还展示了如何利用表格进行布局，直接在表格标签内定义样式，实现头部、菜单和主体内容的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML5界面的相关基础布局：
1.界面布局
2.表格布局

下面给出相关代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四次，布局等学习</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        div#container{
            width: 100%;
            height: 950px;
            background-color: chartreuse;
        }
        div#heading{
            width: 100%;
            height: 10%;
            background-color: red;

        }
        div#content_menu{
            width: 50%;
            height: 80%;
            background-color: bisque;
            float: left;
        }
        div#content_body{
            width: 50%;
            height: 80%;
            background-color: darkblue;
            float: right;
        }
        div#footing{
            width: 100%;
            height: 90%;
            background-color: gold;
        }
    </style>

</head>
<body>
    界面布局<br/>
    <div id="container">
        <div id="heading">头部</div>
        <div id="content_menu">内容菜单</div>
        <div id="content_body">内容主体</div>
        <div id="footing">底部</div>
    </div>
    表格布局<br/>
    <table width="100%" height="300px"  border="1" style="background-color: black" >
        <tr>
            <td colspan="2" width="100%" height="100%" style="background-color: gold">头部</td>
        </tr>
        <tr >
            <td style="background-color: darkblue" height="80%" width="30%">
                <ul>哈哈</ul>
                <ul>嘿嘿</ul>
                <ul>嘻嘻</ul>
            </td>

            <td style="background-color: darkgoldenrod" height="80%" width="70%">
                <ol>拉拉</ol>
                <ol>颖颖</ol>
                <ol>哦哦</ol>
            </td>
        </tr>
    </table>

</body>
</html>

可以看出，界面布局通过定义id，来更改其属性，等相关的信息，例如宽度，高度，颜色等基础布局。在表格布局中，直接在表格相关标签里面直接定义即可；

后面会慢慢接触到一些比较复杂的相关布局，下面给出代码运行后的实际图：

在这里插入图片描述