2018.3.29 DIV位置調整程式碼

董呀麼董發表於2018-03-29

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

相關文章