div布局

最新推荐文章于 2024-06-17 22:21:26 发布

cc雪影

最新推荐文章于 2024-06-17 22:21:26 发布

阅读量587

点赞数 3

文章标签： div布局 Html

本文链接：https://blog.csdn.net/weixin_45043707/article/details/103340309

版权

HTML语言专栏收录该内容

3 篇文章 0 订阅

订阅专栏

div布局

原理

利用div自定义标签（嵌套）实现对网页的布局

简单div布局的代码实现

<head>
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        div#container{
            width: 100%;
            height: 950px;
            background: antiquewhite;
        }
        div#heading{
            width: 100%;
            height: 10%;
            background: cyan;
        }
        div#content-menu{
            width: 30%;
            height: 80%;
            background: blueviolet;
            float: left;
        }
        div#content-body{
            width: 70%;
            height: 80%;
            background: forestgreen;
            float: right;
        }
        div#footing{
            width: 100%;
            height: 10%;
            background: gold;
        }

    </style>
</head>
<body>
<div id="container">
    <div id="heading">
        头部
    </div>
    <div id="content-menu">
        内容菜单
    </div>
    <div id="content-body">
        内容主体
    </div>
    <div id="footing">
        底部
    </div>
</div>
</body>

 div#container{ // 注： div可省略，直接#container
            width: 100%;
            height: 950px;
            background: antiquewhite;
        }

##简单div布局的效果展示 div布局展示

可以看出，table布局和div布局没啥太大区别，只是布局的两种形式罢了

cc雪影

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录