经典页面布局学习
2018-03-08 本文已影响0人
Weastsea
总结几种常用的页面布局
- 上中下布局
<!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>
页面运行效果：
上中下
- 左右两栏布局
<!-- 左右两栏布局 -->
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>左右两栏布局</title>
<style>
body {
margin: 0px;
}
.wrap {
width: 900px;
margin: 0 auto;
}
#left {
width: 200px;
/* 向左浮动 */
float: left;
height: 500px;
background: #ccffff;
}
#right {
/* 自适应宽度 */
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>
页面运行效果：
左右两栏布局
- 左右两栏纯浮动实现
宽度固定，不能自适应
<!-- 纯浮动实现方案 -->
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>左右两栏布局</title>
<style>
body {
margin: 0px;
}
.wrap {
width: 900px;
margin: 0 auto;
/* 清除浮动 */
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>
页面运行效果：
纯浮动实现方案
- 左右页眉页脚布局
<!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>
页面运行效果：
左右页眉页脚布局
- 左中右三栏布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左中右3栏布局</title>
<style>
.wrap {
/* 根据屏幕的宽度自适应 */
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>
页面运行效果：
左中右
- 左中右三栏之双飞翼
<!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>
页面运行效果：
双飞翼布局
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>
页面运行效果：
左中右三栏加页眉页脚
