1.固定定位制作QQ在线kf；
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQkf</title>
<style type="text/css">
body {
margin: 0;
height: 2000px;
}
.qqkf {
position: fixed;
right: 20px;
bottom: 220px;
width: 55px;
min-height: 55px;
text-align: center;
background-color: #555;
}
a {margin:auto; line-height: 55px;text-align: center; color: #fff; text-decoration: none; font-size: 1.5rem;}
</style>
</head>
<body>
<div class ="qqkf">
<a target="_blank" href="https://im.qq.com" title="点击在线咨询">QQ</a>
<a target="_blank" href="https://im.qq.com" title="点击在线咨询">微信</a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.浮动实现图文混排;
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文浮动</title>
<style type="text/css">
.content { width: 1100px; margin: auto;}
.content img { float: left; margin-right: 15px; }
p { line-height: 1.5em; text-indent: 2em;}
</style>
</head>
<body>
<div class="content">
<h1>马哈蒂尔访华首日取经阿里+高铁 试驾吉利汽车</h1>
<img src="https://img0.utuku.china.com/550x0/news/20180819/0c2316db-6235-43af-bf89-981cd618ddfc.jpg">
<p>[环球时报-环球网杭州报道记者赵觉珵]93岁高龄的马来西亚总理马哈蒂尔17日晚正式开启了中国之旅，这是马哈蒂尔自2011年以来再次以总理身份访华，中国也成为他再度执政后首个正式访问的非东盟国家。</p>
<p>马哈蒂尔此访最受关注的话题，莫过于其再次执政后中企在马来西亚的投资前景问题。自今年5月上任以来，马哈蒂尔已经搁置了超过200亿美元的中国承建的基建项目，其中包括由吉隆坡至新加坡的高铁以及大马东海岸铁路的建设。就在中马经贸合作面临不确定性之际，18日，马哈蒂尔将此次访问中国的前两站放在了阿里巴巴和吉利汽车，似乎向中国企业转达了一种信号：马来西亚依然欢迎中国企业和中国投资。</p>
<p>18日上午9时50分左右，身穿深色西装，系着紫红色领带的马哈蒂尔现身位于杭州的阿里巴巴总部，迎接他的是阿里巴巴董事局主席马云。正好两个月前，马哈蒂尔也曾在吉隆坡的总理府会见了马云，与他长谈了1个小时。</p>
<p>在6月18日的会面中，马哈蒂尔曾对马云明确提到，“马来西亚是对投资友好的国家，我们相信投资能带来就业和机遇。”马哈蒂尔还表达了对中国互联网发展与全球化步伐的赞赏，并表示马来西亚必须向中国学习。抱着“学习”的心理，马哈蒂尔8月18日上午在阿里巴巴听取了关于马来西亚数字自由贸易区（DFTZ）、移动支付、ET城市大脑等领域的介绍。其中，马哈蒂尔对于移动支付最为感兴趣。《环球时报》记者注意到，在蚂蚁金服董事长井贤栋进行介绍时，马哈蒂尔掏出手机，打开了录音程序，并且提出了他唯一一个问题。马云则拿来一部.手机，向马哈蒂尔详细介绍了支付宝的功能。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3. 实例演示双飞冀三列布局；在老师基础上实现了响应式双飞翼布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式双飞翼布局</title>
<style>
.header, .footer { width: 100%; height: 70px; background: lightgreen; }
.content { width: 80%; min-height: 100%; background-color: green; margin: auto; text-align: center; line-height: 70px; color: #eee;}/*line-height:100%无法居中*/
.container { width: 80%; margin: auto; background-color: #ddd; overflow: hidden; }
.wrap { width: 100%; background-color: red;float: left;}
.main { min-height: 600px; margin: 0 20%; background-color: black; color: white;}
.left { width: 20%; min-height: 600px; background-color: lightskyblue; float: left; margin-left: -100%;}
.right { width: 20%; min-height: 600px; background-color: gray; float: left; margin-left: -20%;}
p { margin: 0; }
</style>
</head>
<body>
<div class="header">
<div class="content">header</div>
</div>
<div class="container">
<div class="wrap">
<div class="main"><p>main</p>
<p>响应式双飞翼布局</p>
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">
<div class="content">footer</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.实例演示圣杯三列布局；
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
* {margin: 0;}
.header,.footer {width: 100%;height: 60px; background-color: #bbb; text-align: center;line-height: 60px;}
.content {background-color: green; color: white; width: 1000px; margin: auto;}
.container {width: 600px; min-height: 600px; margin: auto; background-color: lightgreen; padding: 0 200px;
overflow: hidden;/*使当前区块能够包住内部的浮动区块,超出当前区块范围会隐藏*/}
.main {width: 100%; min-height: 500px; background-color: gray;float: left; }
.left {width: 200px; min-height: 500px; background-color: red; float: left; margin-left: -100%; position: relative; left: -200px; }
.right {width: 200px; min-height: 500px; background-color: red;float: left; margin-left: -200px;position: relative;right: -200px;}
</style>
</head>
<body>
<div class="header">
<div class="content">页面头部导航</div>
</div>
<div class="container">
<div class="main">主内容区域，优先渲染
</div>
<div class="left">左侧栏
</div>
<div class="right">右侧栏
</div>
</div>
<div class="footer">
<div class="content">页面尾部区域</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
