实现双飞翼三列布局，固定定位实现qq客.服 主体内容浮动实现图文混排
代码
实例
<!DOCTYPE html>
<!--filename lesson06.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>重庆实木门厂</title>
<style type="text/css">
/*公共样式*/
*{
margin:0;
padding:0;
}
#header{
width:100%;
min-height:100px;
background-color:lightgray;
}
#footer{
width:100%;
min-height:100px;
background-color:lightgray;
clear:both;
}
.content{
width:980px;
min-height:100px;
background-color:gray;
margin:0 auto;
text-align:center;
line-height:100px;
}
/*双飞冀三列布局样式*/
.container{
width:980px;
margin:0 auto;
overflow: hidden;
background-color:lightgrey;
}
.wrap{
width:100%;
float:left;
}
.main{
min-height:600px;
margin:0 203px;
}
.left{
width:200px;
min-height:600px;
float:left;
margin-left:-100%;
background-color: #abcdef;
}
.left ul{
padding:0 20px;
}
.left li{
list-style:none;
height: 45px;
line-height:45px;
border-bottom:1px dashed #999;
}
.left li a,:link,:visited{
text-decoration:none;
font-size:16px;
color:coral;
}
.left li a:hover{
color:#999;
}
.right{
width:200px;
min-height:600px;
float:left;
margin-left:-200px;
background-color: lightblue;
}
/*以下是QQ客.服样式*/
#contactCS{
width:170px;
position:fixed;
background-color:#fff;
right:0;
bottom:100px;
z-index:999;
}
.contactTit{
width:100%;
hight:45px;
background-color:orange;
font-size:18px;
color:white;
text-align:center;
line-height:45px;
}
.contactShadow{
background-color:white;
box-shadow:-2px 1px 3px #cfcfcf;
font-size:14px;
color:#333;
}
.contactShadow ul{
padding:0 14px;
}
.contactShadow li{
height:45px;
line-height:45px;
list-style: none;
/*padding:0;*/
border-bottom: 1px solid #cfcfcf;
}
.contactShadow a{
text-decoration: none;
}
.contactShadow a:hover{
color:#888;
}
.contactShadow a:link,:visited{
color:#333;
}
.contactShadow img{
display:inline-block;
vertical-align: middle;
margin-bottom:2px;
}
.contactWX{
padding: 10px;
text-align: center;
background-color:#efefef;
}
/*QQ客.服样式结束*/
.aboutC,.aboutP,.aboutU{
height:45px;
line-height: 45px;
text-align: left;
text-indent:20px;
background-color:#999933;
color:#994843;
border-bottom:2px dashed #333;
}
.aboutM{
overflow:hidden;
line-height:1.7rem;
font-size:14px;
padding:10px;
text-indent:2rem;
}
.aboutM img{
float:left;
padding-right:10px;
}
</style>
</head>
<body>
<!--1. 编程:固定定位制作QQ在线客.服；-->
<!--2.编程:浮动实现图文混排;-->
<!--3.编程: 实例演示双飞冀三列布局；-->
<!--http://www.cqssmc.com-->
<div id="header">
<div class="content">
头部
</div>
</div>
<!--双飞冀三列布局-->
<div class="container">
<div class="wrap">
<div class="main">
<h3 class="aboutC">公司简介</h3>
<div class="aboutM">
<img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/4011ecff779e412903edb0377f662fc7acfc8f8190b8dcd88de4818a3f3cab47521925ee96566c57c412b502d7a47a31?pictype=scale&from=30113&version=3.3.3.3&uin=1161022098&fname=about.jpg&size=256">
重庆三色木业位于重庆市沙坪坝区西永镇童善桥工业园，是一家多年专业从事室内套装门研究、设计、生*产、销售和服务为一体的综合性企业。旗下品*牌有：裕德华、泰渝、兴凯、川木门博士、春之声、金点子、财到家、渝悦豪阁、昊泽名居等9个品*牌。<br>
企业拥有先进的生*产设备和现代化的管理及监控流程，从选料到生*产加工注重每一道细节，在销售领域我们不断的提高市*场知名度，注重企业文化宣传和培育企业形象，诚信务实，结合国内外先进的销售经验形成企业独具特色并行之有效地销售模式；在服务领域我们始终如一的保持着良好的口碑，做到“顾客的需要，便是我们的需要”。<br>
企业生*产的室内套装门，产品包括实木门、烤漆门、实木复合门、工艺门。产品选用优质环保材料，经过现代先进技术加工处理，产品具有不变形、不开裂、防虫、防蛀、隔音、防潮等优良品*质，适应国内外南气候。<br>
企业以科学管理，合理规划，明确目标为方针，以“质量求生存”，“诚信谋发展”为企业发展理念，以全新的现象，引导潮流的发展为企业航标，并以完善的服务赢取市*场和美誉度。三色为你打开全新的门业新看点，开启美好家园。
</div>
</div>
</div>
<div class="left">
<h3 class="aboutP">产品分类</h3>
<ul>
<li><a href="#">经典实木系列</a></li>
<li><a href="#">经典欧式系列</a></li>
<li><a href="#">经典工艺系列</a></li>
<li><a href="#">时尚玻璃门系列</a></li>
</ul>
</div>
<div class="right"><h3 class="aboutU">联系我们</h3></div>
</div>
<!--QQ客.服-->
<div id="contactCS">
<div class="contactTit"><b>咨询客.服</b></div>
<div class="contactShadow">
<ul>
<li>
<a href="#"><img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/40f141d66358fed6ddffb50db44d6b936bac624f125faa852ea75d42ee114a526643c11173bcfca9ebd351f6193daad5?pictype=scale&from=30113&version=3.3.3.3&uin=1161022098&fname=qq.png&size=256" alt="明仔"> 明仔</a>
</li>
<li>
<a href="#"><img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/f048b8a51fb61dcb44ae6d3944c6d8a272ce711f1a544c1115c17534f4682ca2663631bd1f5907d6c2ed5a24038865ec?pictype=scale&from=30113&version=3.3.3.3&uin=1161022098&fname=qql.png&size=256" alt="丽丽"> 丽丽</a>
</li>
<li>
<a href="#"><img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/f048b8a51fb61dcb44ae6d3944c6d8a272ce711f1a544c1115c17534f4682ca2663631bd1f5907d6c2ed5a24038865ec?pictype=scale&from=30113&version=3.3.3.3&uin=1161022098&fname=qql.png&size=256" alt="丽丽"> 圆圆</a>
</li>
</ul>
<div class="contactWX">
<img src="https://picabstract-preview-ftn.weiyun.com/ftn_pic_abs_v3/001615f246fca890c93810043f6fbe3f33bd5d8a06cd0fef0b599e1b716037083a06826bad02b52cde32e44be139d08e?pictype=scale&from=30113&version=3.3.3.3&uin=1161022098&fname=weixin.png&size=256" alt="扫一扫">
<br>
打开微信，扫一扫
</div>
</div>
</div>
<div id="footer">
<div class="content">
底部
</div>
</div>
<!--4.编程: 实例演示圣杯三列布局；-->
<!--（注,布局色块可用具体内容与可以用图片直接替代）-->
<!--5.手写: 双飞冀与圣杯布局的最大区别在哪里？-->
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯三列布局
实例
<!DOCTYPE html>
<!--filename lesson0602.html-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯三列布局</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.header,.footer{
width:100%;
height:100px;
background-color:lightgray;
}
.content{
width:1000px;
height:100%;
background-color:#555;
margin:0 auto;
text-align: center;
line-height:100px;
}
.container{
width:594px;
background-color:#aaa;
overflow:hidden;
margin:auto;
padding:0 203px;
}
.main{
width:100%;
min-height:650px;
background-color:lightgoldenrodyellow;
float:left;
}
.left{
width:200px;
min-height: 650px;
background-color:lightyellow;
float:left;
margin-left:-100%;
position:relative;
left:-203px;
}
.right{
width:200px;
min-height:650px;
background-color:lightyellow;
float:left;
margin-left: -200px;
position:relative;
right:-203px;
}
.footer{
clear:both;
}
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
