首页 > > 网页制作 > css >

2018.3.29 DIV位置调整代码

2018-06-24 02:20:09来源：未知阅读 ()

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           /*固定在页面某一位置*/
           #a{
               width: 20px;
               height: 20px;
               background-color: black;
               position: fixed;
               bottom: 10px;
               left: 10px;
           }
           /*相对于原位置所做的位移*/
           #b{
               width: 80px;
               height: 80px;
               background-color: red;
               position: relative;
               top: 60px;
               left: 60px;
           }
           /*相对于上一级界面做的位移*/
           #c{
               width: 20px;
               height: 20px;
               background-color: #8A2BE2;
               position: absolute;
               bottom: 30px;
               left: 30px;
           }
           /*浮动,向左*/
           #d{
               width: 20px;
               height: 20px;
               background-color: black;
               float: left;
           }
           /*浮动,向右*/
           #e{
               width: 20px;
               height: 20px;
               background-color: green;
               float: right;
           }
           /*清除上面div的格式影响*/
           .clear{
               clear: both;
           }
       </style>
   </head>
   <body>
       <div id="a">
       </div>
       <div id="b">
       </div>
       <div id="c">
       </div>
       <div class="clear"></div>
       <div id="d">
       </div>
       <div id="e">
       </div>

   </body>
</html>