JavaWeb学习笔记:css布局

做如下页面布局:

代码:

<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>

效果:

其中

position: relative    相对定位,一般会和float,margin,padding......等一起使用;

              absolute   绝对定位,需要配合使用left,top;

完结

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值