CSS網頁佈局基礎-聖盃佈局和雙飛翼佈局

時間 2019-11-16

標籤 css 網頁佈局基礎雙飛欄目 CSS 简体版

原文原文鏈接

行佈局javascript

多列布局css

聖盃佈局html

雙飛翼佈局java

1、行佈局

行佈局垂直水平居中佈局

注：這裏沒有用margin: 0 auto;先讓它水平居中，而是使用了絕對定位佈局，而後設置top:50%; left:50%;可是光設置這個還不夠，由於這並非水平垂直居中，由於它並無考慮自身的寬度和高度，因此這裏根據盒子自己的高寬又再此基礎上設置了margin-left和margin-top。若是隻設置了top:50%; left:50%;而沒有設置margin-left和margin-top，效果以下：ui

代碼以下：url

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			background: burlywood;
		}
		.container {
			background: rgb(136, 89, 182);
			height: 200px;
			width: 800px;
			text-align: center;
			margin: 0 auto;
			position: absolute;
			top: 50%;
			left: 50%;
		}
	</style>
</head>
<body>
	<div class="container">這是頁面內容</div>
	
</body>
</html>

最終展現效果以下：spa

2、多列布局

3、聖盃佈局（具體思路看pdf文檔）

代碼：3d

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

    .left {
        margin-left: -100%;
        left: -200px;
        width: 200px;
        background: #f00;
    }

    .right {
		width: 220px;
		margin-left: -220px;
        right: -220px;
        background: #30a457;
    }

    .middle {
        width: 100%;
        background: #1a5acd;
    }
    </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>

4、雙飛翼佈局（聖盃佈局改良版，pdf）（相比較聖盃佈局，去掉左邊，右邊和中間的最外層包裹，因此不用相對定位作）

代碼：htm

<!DOCTYPE html>
<html>

<head>
    <title>聖盃佈局</title>
    <meta charset="utf-8">
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    body {
        min-width: 700px;
    }

	.header,
	.footer {
		border: 1px solid #333;
        background: #ddd;
        height: 40px;
        line-height: 40px;
        text-align: center;
    }
    .sub,
    .middle,
    .extra {
        float: left;
		min-height: 300px;
	}
	.extra {
		margin-left: -220px;
        width: 220px;
        background: #30a457;
	}
    .sub {
        margin-left: -100%;
        width: 200px;
        background: #f00;
    }
    .main-inner {
		margin-left: 200px;
		margin-right: 220px;
		min-height: 300px;
        background: #1a5acd;
	}
	.footer {
		clear: both;
	}
    </style>
</head>

<body>
    <div class="header">
        <h4>header</h4>
    </div>
	<div class="middle">
		<div class="main-inner">
			<h4>middle</h4>
			<p>
				這是頁面的主體內容 這是頁面的主體內容 這是頁面的主體內容 這是頁面的主體內容 這是頁面的主體內容 這是頁面的主體內容 這是頁面的主體內容 這是頁面的主體內容
			</p>
		</div>
	</div>
	<div class="sub">
		<h4>left</h4>
		<p>
			這是頁面的左邊 這是頁面的左邊 這是頁面的左邊 這是頁面的左邊 這是頁面的左邊 這是頁面的左邊
		</p>
	</div>
	<div class="extra">
		<h4>right</h4>
		<p>
			這是頁面的右邊 這是頁面的右邊 這是頁面的右邊 這是頁面的右邊
		</p>
	</div>
    <div class="footer">
        <h4>footer</h4>
    </div>
</body>

</html>

相關標籤/搜索

每日一句

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