HTML5基础11----HTML5布局的使用，div布局

最新推荐文章于 2021-06-10 11:48:42 发布

zhaihaohao1

最新推荐文章于 2021-06-10 11:48:42 发布

阅读量924

点赞数

分类专栏： HTML5基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47068417

版权

HTML5基础专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--HTML5布局的使用，div布局-->
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <title>div布局</title>
    <style type="text/css">
        body{
            margin: 0;;
        }
        /*
        整个布局
        div#zongbuju中的div加不加都行
        */
        div#zongbuju{
            width: 100%;
            height: 500px;
            background-color: aqua;
        }
        /*头部分*/
        #head{
            width: 100%;
            height: 10%;
            background-color: burlywood;
        }
        /*左边部分*/
        #left{
            width: 20%;
            height: 80%;
            background-color: chartreuse;
            /*排序方式：从左到右*/
            float: left;
        }
        /*右边部分*/
        #right{
            width: 80%;
            height: 80%;
            background-color: #b3d4fc;
            /*排序方式：从左到右*/
            float: left;
        }
        /*下部分*/
        #foot{
            width: 100%;
            height: 10%;
            background-color: blueviolet;
            /*清除浮动*/
            clear: both;
        }

    </style>
</head>
<body>

     <div id="zongbuju">
          <div id="head">头部</div>
          <div id="left">左边</div>
          <div id="right">右边</div>
          <div id="foot">底部</div>
     </div>
</body>
</html>

zhaihaohao1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础11----HTML5布局的使用，div布局

html>lang="zh"> charset="UTF-8"> div布局 type="text/css"> body{ margin: 0;; } /* 整个布局 div#zongbuju中的div加不加都行 */ div#zon
复制链接

扫一扫

专栏目录