css網頁佈局

時間 2019-11-16

標籤 css 網頁佈局欄目 CSS 简体版

原文原文鏈接

經典的行佈局css

1.基礎的行佈局html

2.行佈局自適應瀏覽器

3.行佈局自適應限制最大寬佈局

4.行佈局垂直水平居中spa

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body{margin:0;padding: 0;color:#fff;  text-align: center;font-size: 16px}
        .header{width: 100%;height: 50px;background: #333;margin: 0 auto; line-height: 50px; position: fixed;}
        .banner{width: 800px;height: 300px;background: #30a457;margin: 0 auto;padding-top: 50px;}
        .container{width: 800px;height: 1000px;background: #4c77f2;margin: 0 auto;}
        .footer{width: 800px;height: 100px;background: #333;margin :0 auto;line-height: 100px;}
    </style>

</head>
<body>
    <div class="header">這是頁面的頭部</div>
    <div class="banner">這是頁面的banner圖</div>
    <div class="container">這是頁面的內容</div>
    <div class="footer">這是頁面的底部</div>
</body>
</html>

經典的列布局code

1.兩列布局固定 width爲pxhtm

2.兩列布局自適應 width爲%blog

3.三列布局固定utf-8

4.三列布局自適應it

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body{margin: 0;padding: 0;color: #fff;}
        .container{width: 90%;height: 1000px;margin: 0 auto;}
        .left{width: 60%;height: 1000px;background: #1a5acd;float: left;}
        .right{width: 40%;height: 1000px;background: #5880f9;float: right;}
    </style>
</head>
<body>
    <div class="container">
        <div class="left">這是頁面的左側</div>
        <div class="right">這是頁面的右側</div>
    </div>
</body>
</html>

混合佈局

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body{margin: 0;padding: 0;font-size: 16px;color: #fff;text-align: center;}
        .header{width: 100%;height: 50px;background: #5880f9;margin: 0 auto;line-height: 50px;}
        .container{width: 100%;margin: 0 auto;height: 1000px}
        .container .left{width: 40%;height: 1000px;background: #67b581;float: left;}
        .container .right{width: 60%;height: 1000px;background: #123456;float: right;}
        .footer{width: 100%;height: 100px;background: #ed817e;margin: 0 auto;line-height:100px; }
    </style>
</head>
<body>
    <div class="header">這是頁面的頭部</div>
    <div class="container">
        <div class="left">這是頁面的左側</div>
        <div class="right">這是頁面的右側</div>
    </div>
    <div class="footer">這是頁面的底部</div>
</body>
</html>

聖盃佈局

聖盃佈局是由國外的Kevin Cornell提出的一個佈局模型概念

在國內由淘寶UED的工程師傳播開來

佈局要求

1.三列布局，中間寬度自適應，兩邊定寬

2.中間欄要在瀏覽器中優先展現渲染

3.容許任意列的高度最高

4.用最簡單的CSS、最少的HACk語句

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        *{margin: 0;padding: 0;}
        body{min-width: 700px;}
        .header,
        .footer{float: left;width: 100%;background: #ddd;height: 40px;line-height: 40px;text-align: center;}
        .container{padding: 0 220px 0 200px;}
        .left,
        .middle,
        .right{position: relative;float: left;min-height: 300px;}
        .middle{width: 100%;background: #1a5acd;}
        .left{width: 200px;background:#f00; margin-left: -100%;left: -200px;}
        .right{width: 220px;background:#30a457;margin-left: -220px;right: -220px; }
    
    </style>
</head> 
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
            <p>這是頁面中間的內容這是頁面中間的內容這是頁面中間的內容</p>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>這是頁面左側的內容</p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>這是頁面右側的內容</p>
        </div>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>
</html>

聖盃佈局的流程方式：

1.Middle部分首先要放在container的最前部分

2.而後是left right

雙飛翼佈局

經淘寶UED的工程師針對聖盃佈局改良後得出雙飛翼佈局

去掉相對佈局，只須要浮動和負邊距

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        *{margin:0;padding: 0;}
        .header,
        .footer{width:100%;float:left; height: 40px;background: #ddd;text-align: center;line-height: 40px;}
        .sub,
        .main,
        .extra{float: left;min-height: 300px;}
        .main{width: 100%;min-height: 300px;}
        .main-inner{margin-left: 200px;margin-right: 220px;background: #30a457;min-height: 300px;}
        .sub{width: 200px;background: #f00;margin-left: -100%}
        .extra{width: 220px;background: #1a5acd;margin-left: -220px;}
    </style>
</head>
<body>
    <div class="header">
        <h4>header</h4>
    </div>
    <div class="main">
        <div class="main-inner">
            <h4>main</h4>
            <p>這是頁面中間的內容這是頁面中間的內容這是頁面中間的內容</p>
        </div>
    </div>
    <div class="sub">
        <h4>sub 替補</h4>
        <p>這是頁面左側的內容</p>
    </div>
    <div class="extra">
        <h4>extra 多餘</h4>
        <p>這是頁面右側的內容</p>
    </div>
    <div class="footer">
        <h4>footer</h4>
    </div>

</body>
</html>

雙飛翼佈局的流程方式：

main要放在最前邊，其次是sub extra

聖盃佈局
<div class="container">
    <div>中間</div>
    <div>左側</div>
    <div>右側</div>
</div>

雙飛翼佈局
<div class="main">
    <div>中間</div>
</div>
<div>左側</div>
<div>右側</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。