实例
<!DOCTYPE html>
<html lang="zh-cn">
<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">
<link rel="stylesheet" href="style01.css">
<title>页面布局</title>
<style>
code {
display: block;
background-color: #000000;
color: #fff;
width: 600px;
margin-left: 2em;
}
header,
div {
border: 1px dotted green;
box-sizing: border-box;
}
.html,
header,
.container {
width: 100%;
float: left;
clear: both;
overflow: hidden;
margin: 1em auto;
}
header {
background-color: rgba(200, 200, 0, 0.1);
}
.container {
background-color: rgba(0, 0, 360, 1);
}
/* **绝对定位布局样式** */
#container_1 {
height: 700px;
}
#layout_1 {
position: relative;
margin: 10px 5%;
height: 700px;
background-color: yellow;
}
.header,
.main,
.footer,
.left,
.center,
.right {
position: absolute;
}
.header {
left: 0;
top: 0;
width: 100%;
height: 50px;
background-color: lightgoldenrodyellow;
}
.main {
left: 0;
top: 50px;
width: 100%;
height: 600px;
background-color: lightblue;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background-color: lightgrey;
}
.left {
left: 0;
top: 0;
width: 20%;
height: 100%;
background-color: lightslategray;
}
.center {
left: 20%;
top: 0;
width: 80%;
height: 100%;
background-color: darkseagreen;
}
.right {
right: 0;
top: 0;
width: 20%;
height: 100%;
background-color: darkgrey;
}
/* **浮动布局样式** */
#container_2 {
width: 100%;
float: left;
clear: both;
}
#layout_2 {
position: relative;
margin: 10px 5%;
background-color: yellow;
}
.header-f {
width: 100%;
height: 60px;
background-color: lightseagreen;
float: left;
}
.main-f {
width: 100%;
height: 490px;
/* ????height如何设置自动撑开???? */
background-color: lightcyan;
float: left;
}
.footer-f {
width: 100%;
height: 50px;
background-color: lightseagreen;
}
.left-f,
.center-f,
.right-f,
.footer-f {
float: left;
}
.left-f {
width: 20%;
height: 100%;
background-color: lightgoldenrodyellow;
}
.center-f {
width: 60%;
height: 100%;
background-color: lightblue;
}
.right-f {
width: 20%;
height: 100%;
background-color: lightgrey;
}
</style>
</head>
<!-- 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现) -->
<body>
<header>
<div>
<p>说明：</p>
<p>为了在同一个页面实现两种布局的对比，以下用div.container(蓝色背景)模拟body标签</p>
<p></p>
</div>
</header>
<!-- .html模拟html标签 -->
<div class="html">
<div class="clear_both" style="width: 100%;height: 0;border: 0px solid red;"></div>
<!-- 绝对定位实现 -->
<div class="container" id="container_1">
<div class="layout" id="layout_1">
<div class="header">
<h2>1. 绝对定位实现3列布局
<span>[header]</span>
</h2>
</div>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
</div>
<!-- .container结束 -->
<div class="text">
<p>html code:</p>
<code><pre>
<!-- 绝对定位实现 -->
<div class="container" id="container_1">
<div class="layout" id="layout_1">
<div class="header">
<h2>1. 绝对定位实现3列布局
<span>[header]</span>
</h2>
</div>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="footer">footer</div>
</div>
</div>
<!-- .container结束 -->
</pre></code>
<p>css code：</p>
<code><pre>
/* **绝对定位布局样式** */
#container_1 {
height: 700px;
}
#layout_1 {
position: relative;
margin: 10px 5%;
height: 700px;
background-color: yellow;
}
.header,
.main,
.footer,
.left,
.center,
.right {
position: absolute;
}
.header {
left: 0;
top: 0;
width: 100%;
height: 50px;
background-color: lightgoldenrodyellow;
}
.main {
left: 0;
top: 50px;
width: 100%;
height: 600px;
background-color: lightblue;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background-color: lightgrey;
}
.left {
left: 0;
top: 0;
width: 20%;
height: 100%;
background-color: lightslategray;
}
.center {
left: 20%;
top: 0;
width: 80%;
height: 100%;
background-color: darkseagreen;
}
.right {
right: 0;
top: 0;
width: 20%;
height: 100%;
background-color: darkgrey;
}
</pre></code>
</div>
<div class="clear_both" style="width: 100%;height: 0;border: 0px solid red;"></div>
<!-- 浮动定位实现 -->
<div class="container" id="container_2">
<div class=" layout " id="layout_2">
<div class="header-f ">
<h2>2. 浮动定位实现3列布局[header-f]</h2>
</div>
<div class="main-f ">
<div class="left-f ">[left-f]</div>
<div class="center-f ">[center-f]</div>
<div class="right-f ">[right-f]</div>
</div>
<div class="footer-f ">[footer-f]</div>
</div>
</div>
<!-- .container结束 -->
<div class="text">
<p>html code:</p>
<code><pre>
<!-- 浮动定位实现 -->
<div class="container" id="container_2">
<div class=" layout " id="layout_2">
<div class="header-f ">
<h2>2. 浮动定位实现3列布局[header-f]</h2>
</div>
<div class="main-f ">
<div class="left-f ">[left-f]</div>
<div class="center-f ">[center-f]</div>
<div class="right-f ">[right-f]</div>
</div>
<div class="footer-f ">[footer-f]</div>
</div>
</div>
<!-- .container结束 -->
</pre></code>
<p>css code：</p>
<code><pre>
/* **浮动布局样式** */
#container_2 {
width: 100%;
float: left;
clear: both;
}
#layout_2 {
position: relative;
margin: 10px 5%;
background-color: yellow;
}
.header-f {
width: 100%;
height: 60px;
background-color: lightseagreen;
}
.main-f {
width: 100%;
height: 490px;
/* ????height如何设置自动撑开???? */
background-color: lightcyan;
float: left;
}
.footer-f {
width: 100%;
height: 50px;
background-color: lightseagreen;
}
.header-f,
.left-f,
.center-f,
.right-f,
.footer-f {
float: left;
}
.left-f {
width: 20%;
height: 100%;
background-color: lightgoldenrodyellow;
}
.center-f {
width: 60%;
height: 100%;
background-color: lightblue;
}
.right-f {
width: 20%;
height: 100%;
background-color: lightgrey;
}
</pre></code>
</div>
<div class="clear_both" style="width: 100%;height: 0;border: 0px solid red;"></div>
</div>
<!-- .html结束 -->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
