图文混排，QQ在线客 服
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>QQ在线客 服，图文混排</title>
<style>
.big{
width: 600px;
height: 400px;
margin: auto;
color: #868282;
}
.left{
width: 100px;
height: 300px;
position: absolute;
top: 20px;
border: 1px solid;
border-radius: 20px
}
.top{
height: 100px;
background: #179FE1;
border-radius: 20px;
text-align: center;
line-height: 100px
}
.mid{
height: 100px;
background: #179FE1;
border-radius: 20px;
text-align: center;
line-height: 100px
}
.bottom{
height: 100px;
background: #179FE1;
border-radius: 20px;
text-align: center;
line-height: 100px
}
a{
text-align: center;
text-decoration: none;
color: aliceblue
}
</style>
</head>
<body>
<div class="big">
<h1 style="text-align: center">河北科技大学-百度百科</h1>
<img src="1.jpg" style="float: left;width: 300px;margin: 5px 10px 5px 0 ;padding: 0">
<p>河北科技大学（Hebei University of Science Technology）坐落于河北省会石家庄市，是一所成立于1996年5月的地方一流教学研究型大学，学校为第二批卓越工程师教育培养计划高校，国家国防科技工业局与河北省人民政府共建的省部共建大学。 [1]
1996年，河北轻化工学院、河北机电学院和河北省纺织职工大学合并组建河北科技大学。2013年，学校被列为河北省人民政府与国家国防科技工业局共建省属重点高校。2017年，学校被河北省确定为博士学位授予立项建设单位。 [1-2]
截至2017年11月，学校占地2760亩，建筑面积80万平方米，固定资产总值24.3亿元；图书馆馆藏文献194.5万册；设15个本科专业学院，79个本科专业，16个硕士学位授权一级学科，7个专业硕士授权类别；有教职工2334人，全日制本科生、研究生、留学生共20308人。</p>
</div>
<div class="left">
<div class="top">
<a href="">QQ咨询</a>
</div>
<div class="mid"><a href="">电话咨询</a></div>
<div class="bottom"><a href="">了解更多</a></div>
</div>
<input type="text" name="name" value="" placeholder="昵称" style=" width: 400px;height: 50px;border-radius: 8px;line-height: 100px">
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯模型
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圣杯布局</title>
<style>
.header{
background: #B45E60;
width: 100%;
min-height: 75px
}
.footer{
background: #93B57A;
width: 100%;
height: 75px
}
.content{
background: #98C0B8;
width: 1000px;
margin: auto;
height: 75px;
line-height: 75px;
text-align: center
}
.container{
width: 600px;
height: 600px;
background: #856CAD;
margin: auto;
padding: 0 200px;
overflow: hidden
}
.main{
float: left;
width: 100%;
background: #C19999;
min-height: 600px
}
.left{
float: left;
width: 200px;
background: #8F2151;
margin-left: -100%;
position: relative;
left: -200px;
min-height: 600px
}
.right{
float: left;
background: #BB341C;
width: 200px;
margin-left: -200px;
position: relative;
left: 200px;
min-height: 600px
}
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞翼模型
实例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>双飞翼模型</title>
<style>
*{
margin: 0;
padding: 0;
}
.head,.footer{
width: 100%;
height: 50px;
text-align: center;
line-break: 50px;
background-color: #C0C0C0;
}
/*container只是为了让DOM结构看着更加合理*/
.container{
overflow: hidden;
}
.main{
width: 100%;
}
.center{
margin-left: 200px;
margin-right: 200px;
background-color: #F5704F;
}
.left,.right,.main{
float: left;
min-height: 130px;
margin-bottom: -2000px;
padding-bottom:2000px ;
}
.left{
width: 200px;
background-color: darkgoldenrod;
margin-left: -100%;
}
.right{
width: 200px;
background-color: cadetblue;
margin-left: -200px;
}
.footer{
clear: both;
}
</style>
</head>
<body>
<div class="head">head</div>
<div class="container">
<div class="main">
<div class="center">middle</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="footer">footer</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞冀与圣杯布局的最大区别在哪里？
个人总结：
个人感觉圣杯模型比较容易理解，比较经典。
