1. 编程:固定定位制作QQ在线客#服；
实例
<!DOCTYPE html>
<html>
<head>
<title>固定定位制作QQ在线客#服</title>
</head>
<body>
<div class="box1">
<!-- <a href="http://www.qq.com"><img src="http://combo.b.qq.com/bqq/v5/images/onlinewpa.png" width="25px" height="25px"><br>QQ咨询</a> -->
<img src="http://combo.b.qq.com/bqq/v5/images/onlinewpa.png"><br>
<span>QQ咨询</span>
</div>
<div class="box2"></div>
<div class="box3"></div>
<style type="text/css">
.box1 img{
display: inline;
}
.box1 span{
color: white;
font-size: 14px;
}
.box1 {
width: 80px;
height: 80px;
background-color: #1f77e7;
/*position: fixed;*/
bottom: 50px;
right: 10px;
text-align: center;
display: table-cell;
vertical-align: middle;
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
说明：position: fixed;和text-align: center;
display: table-cell;
vertical-align: middle;这三个属性会产生冲突，只能将position: fixed;注释才能实现水平和垂直居中。
2.编程:浮动实现图文混排;
实例
<!DOCTYPE html>
<html>
<head>
<title>浮动实现图文混排</title>
</head>
<body>
<div class="main">
<h2>今晚 油价将有新变化！年内第六降来了</h2>
<img src="http://imgmini.eastday.com/push/20180820/900x1138_1534756377120210.jpeg" >
<p>根据国家发改委消息，新一轮成品油调价窗口将于今天（8月20日）24时开启。
据国家发改委价格监测中心监测，本轮成品油调价周期内（8月7日—8月20日），伦敦布伦特、纽约WTI原油期货价格震荡下降。平均来看，两市油价比上轮调价周期下降2.17%。
调价周期内，供应充足、美元走强、全球原油需求预期放缓等因素共同影响国际油价震荡下降。受此影响，国内汽油、柴油的零售价格随之下调。央视财经记者从国家发改委获悉，汽油、柴油每吨均下调50元。
本次油价调整具体情况如下：全国平均来看，
92号汽油每升下调0.04元；
95号汽油每升下调0.04元；
0号柴油每升下调0.04元。</p>
</div>
<style type="text/css">
.main {
background-color: pink;
width: 500px;
}
img{
width: 200px;
float: left;
margin: 20px;
}
h2{
text-align: center;
}
</style>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
说明：主要是针对图片进行左浮动。float: left;
3.编程: 实例演示双飞冀三列布局；
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例演示双飞冀三列布局</title>
<style type="text/css">
/*先给最简单的头部和底部设置基本的样式*/
.header, .footer {
/*宽度为窗口的宽度,自适应变化*/
width: 100%;
/*为了简化,头部与尾部高度统一设置为60px*/
height: 60px;
/*参考背景色:浅灰*/
background-color: lightgray;
}
.footer {
/*底部二边不能有浮动元素*/
clear: both;
}
/*设置头部和底部的中间内容区的基本样式*/
.content {
/*先设置总的宽度,这步很重要*/
width: 1000px;
/*高度直接引用父区块值*/
min-height: 100%;
/*设置参考色:灰色*/
background-color: gray;
/*使自己水平居中*/
margin: auto;
/*使其内部的文本水平垂直居中*/
text-align: center;
line-height: 60px;
}
/*设置主体的基本样式*/
.container {
/*设置主体的总宽度:非常关键*/
width: 1000px;
/*设置主体内部所有区块水平居中*/
margin:auto;
/*使当前区块能够包住内部的浮动区块*/
overflow: hidden;
/*设置背景参考色*/
background-color: yellow;
}
/*设置主体区域中的中间区块的基本样式*/
.wrap {
/*宽度与父区块相同,独占整行,这很重要,可确保后面的浮动元素换行显示*/
width: 100%;
/*参考背景色: 青色*/
background-color: cyan;
/*左浮动,脱离文档流*/
float: left;
}
/*设置中间区块的样式*/
.main {
/*注意:它的宽度是在父区块wrap中设置了,这里不需要重复设置*/
/*给中间内容区设置一个最小高度,这个最终会被真实内容替换*/
min-height:600px;
/*设置左右外边距为left和right的宽度,使他们显示到正确位置*/
margin: 0 200px; /*这是最后一步*/
/*参考背景色:小麦色*/
background-color: wheat;
}
.left {
/*宽度是必须设置的*/
width: 200px;
/*同理,也设置一个最小高度*/
min-height:600px;
/*设置左浮动:与前面元素一起排列*/
float:left;
/*将左区块拉回到中间区块的起始位置处*/
margin-left:-100%;
/*设置背景参考色:天蓝色*/
background-color: lightskyblue;
}
/*设置右边区块的基本样式*/
.right {
/*同样也要先设置一个宽度*/
width: 200px;
/*高度与先给一个最小高度做为参考,最终会被实际内容替换*/
min-height:600px;
/*同样也要设置左浮动,依次排到left区块的后面*/
float:left;
/*将右区块拉回到上一行的最右侧*/
margin-left:-200px;
/*背景参考色:浅绿*/
background-color: lightgreen;
}
</style>
</head>
<body>
<!-- DOM结构 -->
<!-- 头部 -->
<div class="header">
<div class="content">网站头部</div>
</div>
<!-- 主体 -->
<div class="container">
<div class="wrap">
<div class="main">主体内容区</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
说明：优先渲染主要内容区
4.编程: 实例演示圣杯三列布局；
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>经典的三列双飞翼布局</title>
<style type="text/css">
/*先给最简单的头部和底部设置基本的样式*/
.header, .footer {
/*宽度为窗口的宽度,自适应变化*/
width: 100%;
/*为了简化,头部与尾部高度统一设置为60px*/
height: 60px;
/*参考背景色:浅灰*/
background-color: lightgray;
}
.footer {
/*底部二边不能有浮动元素*/
clear: both;
}
/*设置头部和底部的中间内容区的基本样式*/
.content {
/*先设置总的宽度,这步很重要*/
width: 1000px;
/*高度直接引用父区块值*/
min-height: 100%;
/*设置参考色:灰色*/
background-color: gray;
/*使自己水平居中*/
margin: auto;
/*使其内部的文本水平垂直居中*/
text-align: center;
line-height: 60px;
}
/*设置主体的基本样式*/
.container {
/*设置主体的总宽度:非常关键*/
width: 1000px;
/*设置主体内部所有区块水平居中*/
margin:auto;
/*使当前区块能够包住内部的浮动区块*/
overflow: hidden;
/*设置背景参考色*/
background-color: yellow;
}
/*设置主体区域中的中间区块的基本样式*/
.wrap {
/*宽度与父区块相同,独占整行,这很重要,可确保后面的浮动元素换行显示*/
width: 100%;
/*参考背景色: 青色*/
background-color: cyan;
/*左浮动,脱离文档流*/
float: left;
}
/*设置中间区块的样式*/
.main {
/*注意:它的宽度是在父区块wrap中设置了,这里不需要重复设置*/
/*给中间内容区设置一个最小高度,这个最终会被真实内容替换*/
min-height:600px;
/*设置左右外边距为left和right的宽度,使他们显示到正确位置*/
margin: 0 200px; /*这是最后一步*/
/*参考背景色:小麦色*/
background-color: wheat;
}
.left {
/*宽度是必须设置的*/
width: 200px;
/*同理,也设置一个最小高度*/
min-height:600px;
/*设置左浮动:与前面元素一起排列*/
float:left;
/*将左区块拉回到中间区块的起始位置处*/
margin-left:-100%;
/*设置背景参考色:天蓝色*/
background-color: lightskyblue;
}
/*设置右边区块的基本样式*/
.right {
/*同样也要先设置一个宽度*/
width: 200px;
/*高度与先给一个最小高度做为参考,最终会被实际内容替换*/
min-height:600px;
/*同样也要设置左浮动,依次排到left区块的后面*/
float:left;
/*将右区块拉回到上一行的最右侧*/
margin-left:-200px;
/*背景参考色:浅绿*/
background-color: lightgreen;
}
</style>
</head>
<body>
<!-- DOM结构 -->
<!-- 头部 -->
<div class="header">
<div class="content">网站头部</div>
</div>
<!-- 主体 -->
<div class="container">
<div class="wrap">
<div class="main">主体内容区</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
说明：和双飞翼布局一样，优先渲染主内容区。
5.手写: 双飞冀与圣杯布局的最大区别在哪里？
总结：
