html布局效果

最新推荐文章于 2024-09-14 18:46:05 发布

lhh5356

最新推荐文章于 2024-09-14 18:46:05 发布

阅读量89

点赞数

分类专栏：学习总结文章标签： java

本文链接：https://blog.csdn.net/ljh5356/article/details/123674248

版权

学习总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<html>
   <head>
       <meta charset="utf-8">
       <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: greenyellow;
               height:80%;
               width:15%;
               float:left;
           }
           #div_main{
               background-color: whitesmoke;
               height:70%;
               float:left;
               width:85%;
           }
           #div_bottom{
               background-color: sandybrown;
               height:10%;
               width:85%;
               float:left;
           }
           #div_container{
               width:80%;
               height:100%;
               border:0px solid blue;
               margin-left:10%;
               float:left;
           }
       </style>
   </head>
   <body>
       <div id="div_container">
           <div id="div_top">div_top</div>
           <div id="div_left">div_left</div>
           <div id="div_main">div_main</div>
           <div id="div_bottom">div_bottom</div>
       </div>
   </body>
</html>