JavaWeb学习笔记：css布局

最新推荐文章于 2022-07-02 17:10:57 发布

卡卡西学网安

最新推荐文章于 2022-07-02 17:10:57 发布

阅读量207

点赞数

分类专栏： JavaWeb基础学习文章标签：学习 css 前端

本文链接：https://blog.csdn.net/Z_jl123/article/details/123006264

版权

JavaWeb基础学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

做如下页面布局：

代码：

<html>
<head>
<style type="text/css">
body{
margin:0;
       padding:0;
       background-color:#808080;
   }
div{
   position:relative;
       }
#div_top{
   background-color:orange;
       height:20%;
       }
#div_left{
   background-color:yellow;
height:80%;
       width:15%;
       float:left;
       }
#div_main{
   background-color:red;
       height:70%;
       width:85%;
       float:left;
       }
   #div_botton{
   background-color:green;
       height:10%;
       width:85%;
       float:left;
       }
   #div_container{
   width:80%;
       height:100%;
       border:0px solid black;
       margin-left:10%;
       float:left;
       }
</style>
</head>
<body>
<div id="div_container">
<div id="div_top">top</div>
   <div id="div_left">left</div>
   <div id="div_main">main</div>
   <div id="div_botton">botton</div>
</div>
</body>
</html>