經典的行佈局

weixin_34075551發表於2018-08-26
7236116-1d00fc9c0dafa16f.png
image.png

水平居中,百分比寬度

效果

7236116-e205f19ef29de20c.gif
5.gif

過程步驟

1

html結構
<div class="container">水平居中,百分比寬度</div>

2

預處理body
body{ margin: 0; padding: 0; color: #fff; text-align: center; }
3
水平居中,設寬高,百分比寬度,背景顏色

            .container{
                /*水平居中*/
                margin: 0 auto;
                
                /*設寬高,百分比寬度,背景顏色*/
                width: 90%;
                max-width: 1000px; /*最大寬度1000px,防止寬度太寬*/
                min-width: 800px; /*最小寬度800px,防止寬度窄*/
                height: 500px;
                background: #0066FF;
                
                
            }

完整程式碼

7236116-c7a3f91f1afc9e9c.png
image.png

html

    <body>
        <!--html結構-->
        <div class="container">水平居中,百分比寬度</div>
    </body>

css

        <style>
            
            /*預處理body*/
            body{
                margin: 0;
                padding: 0;
                color: #fff;
                text-align: center;     
            }
            
            
            /*水平居中,百分比寬度*/
            .container{
                /*水平居中*/
                margin: 0 auto;
                
                /*設寬高,百分比寬度,背景顏色*/
                width: 90%;
                max-width: 1000px; /*最大寬度1000px,防止寬度太寬*/
                min-width: 800px; /*最小寬度800px,防止寬度窄*/
                height: 500px;
                background: #0066FF;
                
                
            }
        </style>

相關文章