總結(jié)幾種常用的頁面布局
- 上中下布局
<!DOCTYPE html>
<!--上中下布局-->
<html lang="en">
<style>
body {
margin: 0
}
.wrap {
width: 900px;
/* 居中 */
margin: 0 auto;
font-size: 20px;
/* 文字居中 */
text-align: center;
}
#header {
height: 100px;
background: #6cf;
}
#main {
height: 500px;
background: #ccffff
}
#footer {
height: 80px;
background: #9cf
}
</style>
<head>
<meta charset="UTF-8">
<title>我的修煉</title>
</head>
<body>
<header id="header" class='wrap'>#header</header>
<section id="main" class='wrap'>#section</section>
<footer id="footer" class='wrap'>#footer</footer>
</body>
</html>
頁面運(yùn)行效果：
上中下
- 左右兩欄布局
<!-- 左右兩欄布局 -->
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>左右兩欄布局</title>
<style>
body {
margin: 0px;
}
.wrap {
width: 900px;
margin: 0 auto;
}
#left {
width: 200px;
/* 向左浮動(dòng) */
float: left;
height: 500px;
background: #ccffff;
}
#right {
/* 自適應(yīng)寬度 */
margin-left: 200px;
background: #ffcccc;
height: 500px;
}
</style>
</head>
</head>
<body>
<div class="wrap">
<aside id="left">left</aside>
<section id="right">rigth</section>
</div>
</body>
</html>
頁面運(yùn)行效果：
左右兩欄布局
- 左右兩欄純浮動(dòng)實(shí)現(xiàn)
寬度固定森瘪，不能自適應(yīng)
<!-- 純浮動(dòng)實(shí)現(xiàn)方案 -->
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>左右兩欄布局</title>
<style>
body {
margin: 0px;
}
.wrap {
width: 900px;
margin: 0 auto;
/* 清除浮動(dòng) */
overflow: hidden;
}
#left {
width: 200px;
float: left;
height: 500px;
background: #ccffff;
}
#right {
width: 700px;
background: #ffcccc;
height: 500px;
float: right;
}
</style>
</head>
</head>
<body>
<div class="wrap">
<aside id="left">left</aside>
<section id="right">right</section>
</div>
</body>
</html>
頁面運(yùn)行效果：
純浮動(dòng)實(shí)現(xiàn)方案
- 左右頁眉頁腳布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左右頁眉頁腳布局</title>
<style>
.wrap {
width: 900px;
margin: 0 auto;
}
header{
height: 200px;
background: #72418f;
}
#main {
overflow: hidden;
}
#left {
float: left;
width:200px;
background: #4f9655;
height: 400px;
}
#right {
float: right;
width: 700px;
background: #1337ad;
height: 400px;
}
footer {
height: 180px;
background: #e6bc02;
/* clear:both */
}
</style>
</head>
<body>
<div class="wrap">
<header>header</header>
<div id='main'>
<aside id='left'>left</aside>
<section id='right'>rigth</section>
</div>
<footer>footer</footer>
</div>
</body>
</html>
頁面運(yùn)行效果：
左右頁眉頁腳布局
- 左中右三欄布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左中右3欄布局</title>
<style>
.wrap {
/* 根據(jù)屏幕的寬度自適應(yīng) */
width: 80%;
margin: 0 auto;
height: 700px;
}
#left {
float: left;
width: 200px;
height: 100%;
background: #d4a6a6;
}
#center {
height: 100%;
margin: 0 210px;
background: #68d646;
}
#right {
float:right;
width:200px;
height: 100%;
background: #3014cc
}
</style>
</head>
<body>
<div class="wrap">
<section id="left"></section>
<section id="right"></section>
<section id="center"></section>
</div>
</body>
</html>
頁面運(yùn)行效果：
左中右
- 左中右三欄之雙飛翼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左中右三欄之雙飛翼</title>
<style>
.wrap {
width: 80%;
margin: 0 auto;
}
#main {
float: left;
width: 100%;
}
#content {
background: #e7890e;
height: 500px;
margin: 0 200px;
}
#left {
float: left;
width: 200px;
height: 500px;
background: #52d814;
margin-left: -100%;
}
#right {
float: left;
width: 200px;
height: 500px;
background: #3110a8;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="wrap">
<section id="main">
<div id="content">content</div>
</section>
<aside id="left">left</aside>
<aside id="right">right</aside>
</div>
</body>
</html>
頁面運(yùn)行效果：
雙飛翼布局
7: 左中右三欄加頁眉頁腳
<!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>左中右三欄加頁眉頁腳</title>
<style>
.wrap {
margin: 0 auto;
width: 80%
}
#header {
height: 100px;
background: #9dcf80
}
#main {
height: 500px;
}
#footer {
height: 80px;
background: #5b79df;
}
#middle {
float: left;
width: 100%;
background: #262341;
}
#left {
float: left;
height: 500px;
width: 200px;
background: #99609e;
margin-left: -100%;
}
#right {
float: left;
height: 500px;
width: 200px;
background: #99609e;
margin-left: -200px;
}
#content {
height: 500px;
margin: 0 200px;
}
</style>
</head>
<body>
<header id="header" class="wrap"></header>
<section id="main" class="wrap">
<div id="middle">
<section id='content'></section>
</div>
<aside id='left'></aside>
<aside id="right"></aside>
</section>
<footer id="footer" class="wrap"></footer>
</body>
</html>
頁面運(yùn)行效果：
左中右三欄加頁眉頁腳
