收藏
批改状态：合格
老师批语：
QQ在线询问代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ在线询问</title>
</head>
<body>
<div class="top"></div>
<div class="qq">
<ul>
<li><img src="https://thumbnail0.baidupcs.com/thumbnail/c1996a395d949f8e800b247b7842e9a1?fid=2671713914-250528-1066397930200704&time=1534813200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-y6vulDyYaK4kyWZCFHplsOye46A%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5389954465402435594&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" alt="qq">
<p>QQ咨询</p></li>
<li><img src="https://thumbnail0.baidupcs.com/thumbnail/62f496f9637261e7074f7e2a227afe2a?fid=2671713914-250528-903416321969719&time=1534813200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-EdToDBTx0%2BQknbc06dbKpwF7KaA%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5389967456358392635&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" alt="微博">
<p>官方微博</p></li>
<li><img src="https://thumbnail0.baidupcs.com/thumbnail/5ab7e3f8052cf9a87f36511e63762d09?fid=2671713914-250528-141621392671430&time=1534813200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-ksEBDbsrcWtzq7m6yv4CKiwPWaA%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5389961940077870736&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" alt="微信">
<p>微信二维码</p></li>
<li><img src="https://thumbnail0.baidupcs.com/thumbnail/2b39427600d8a19bb6ad0ff0e14d6e39?fid=2671713914-250528-184391435532154&time=1534813200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-OikBbvmS6Pk5f%2BZAW%2BRyXW8ANpY%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5389972044145431857&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video" alt="帮助">
<p>建站帮助</p></li>
</ul>
</div>
<style>
body{
height: 1000px;
}
.top{
width: 100%;
height: 400px;
background-color: #0085FF;
}
.qq{
width: 228px;
height: 508px;
background: url(https://thumbnail0.baidupcs.com/thumbnail/63fb32e2feca89b7f163c5a664079415?fid=2671713914-250528-1124511345760336&time=1534813200&rt=sh&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-LsWRSG0dQtqRsUwSa%2FB2YDBBwu8%3D&expires=8h&chkv=0&chkbd=0&chkpc=&dp-logid=5389984462296071834&dp-callid=0&size=c710_u400&quality=100&vuk=-&ft=video) no-repeat center;
position: fixed;
left: 50px;
top: 100px;
}
.qq ul{
margin-left: 12px;
padding: 0;
}
.qq ul li{
width: 123px;
height: 95px;
list-style: none;
text-align: center;
}
.qq ul li:first-child{
padding-top: 60px;
}
.qq ul li img{
width: 62px;
height: 55px;
}
.qq ul li:nth-last-child(2){
height: 130px;
}
.qq ul li:nth-last-child(2) img{
width: 100px;
height: 100px;
}
.qq ul li p{
margin: 0;
}
</style>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行图：
![XR$@LL8{~W]I_QLR1NJWMRJ.png](https://img.php.cn//upload/image/689/591/538/1534815740715664.png "1534815740715664.png")
图文混排代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混排</title>
</head>
<body>
<div class="box">
<img src="https://img.php.cn/upload/course/000/000/003/5a508deef1e58616.jpg" alt="">
<div class="list">
<h3>独孤九贱(4)_PHP视频教程</h3>
<p>江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用为原则，让你学得会，记得住，用得上。学习PHP编程，不得不提醒阁下，前端的基础知识，还是要有一点的。当然不要求精通，但必须对基本标签、基本概念和术语有一定了解，否则，会对你的学习信心造成小打击哟~~（php中文网上有很多优秀的html,css,javascript教程可供您参考，如果你选择我们官方原创课程最好啦）</p>
<ul>
<li>PEterZhu</li>
<li>2017-03-20 22:47:17</li>
<li>点击数(1111687)</li>
</ul>
</div>
</div>
<style>
.box img{
width: 220px;
height: 160px;
float: left;
border-radius: 8px;
}
.box .list{
width: 400px;
float: left;
margin-left: 20px;
}
.box .list h3{
font-size: 1rem;
line-height: 1.5rem;
margin: 0;
color: #333;
}
.box .list p{
font-size: 0.9rem;
line-height: 1.5rem;
color: #666;
width: 100%;
height: 100px;
overflow: hidden;
}
.box .list ul{
padding: 0;
}
.box .list ul li{
float: left;
list-style: none;
font-size: 0.9rem;
color: #888888;
margin-right: 10px;
}
</style>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行图：
![MXF47{3KS}PR~~6$MW]DO(H.png](https://img.php.cn//upload/image/540/870/765/1534836358307994.png "1534836358307994.png")
双飞翼布局代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
</head>
<body>
<style>
body{
padding: 0;
margin: 0 auto;
}
.header,.footer{
width: 1038px;
height: 40px;
text-align: center;
background-color: #888888;
line-height: 40px;
}
.footer{
clear: both;
}
ul{
padding: 0;
}
ul li{
color: #C8E1FA;
list-style: none;
}
.box{
width: 1038px;
margin: 0 auto;
}
.main{
width: 100%;
float: left;
}
.center{
min-height: 600px;
margin: 0 240px 0 180px;
background-color: #265380;
border: 1px solid #000;
}
.left{
width: 168px;
min-height: 600px;
background-color: #265380;
float: left;
margin-left: -100%;
border: 1px solid #000;
}
.left ul li{
line-height: 2rem;
text-align: center;
}
.right{
width: 228px;
min-height: 600px;
background-color: #265380;
float: left;
margin-left: -230px;
border: 1px solid #000;
}
.right h3{
color: #C8E1FA;
font-size: 1rem;
}
.right ul{
padding: 0 10px;
}
.right ul li{
width: 100%;
height: 80px;
font-size: 0.8rem;
}
.right ul li img{
width: 80px;
height: 60px;
float: left;
}
.cen{
padding: 20px 30px;
}
.cen_top{
padding: 20px;
height: 50px;
border-bottom: 1px solid #666;
}
.cen_top img{
float: left;
width: 50px;
height: 50px;
border-radius: 50px;
}
.cen_top_l{
width: 200px;
height: 50px;
float: left;
color: #C8E1FA;
}
.cen_top_l p{
margin: 0;
padding: 0;
line-height: 1.5rem;
font-size: 0.9rem;
}
</style>
<div class="header">我是头部</div>
<div class="box">
<div class="main">
<div class="center">
<div class="cen">
<div class="cen_top">
<img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
<div class="cen_top_l">
<p>雨上 访问了我的主页</p>
<p>09：03 来自手机空间</p>
</div>
</div>
</div>
<div class="cen">
<div class="cen_top">
<img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
<div class="cen_top_l">
<p>雨上 访问了我的主页</p>
<p>09：03 来自手机空间</p>
</div>
</div>
</div>
<div class="cen">
<div class="cen_top">
<img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
<div class="cen_top_l">
<p>雨上 访问了我的主页</p>
<p>09：03 来自手机空间</p>
</div>
</div>
</div>
<div class="cen">
<div class="cen_top">
<img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
<div class="cen_top_l">
<p>雨上 访问了我的主页</p>
<p>09：03 来自手机空间</p>
</div>
</div>
</div>
</div>
</div>
<div class="left">
<ul>
<li>好友动态</li>
<li>特别相关</li>
<li>与我相关</li>
<li>空间达人</li>
<li>那年今日</li>
<li>腾讯课堂</li>
<li>游戏应用</li>
<li>我的收藏</li>
</ul>
</div>
<div class="right">
<h3>大家都在看</h3>
<ul>
<li>
<img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
<p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
</li>
<li>
<img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
<p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
</li>
<li>
<img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
<p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
</li>
<li>
<img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
<p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
</li>
<li>
<img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
<p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
</li>
</ul>
</div>
</div>
<div class="footer">我是底部</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行图：
![97T96FII43UCKEFF%B9]6PS.png](https://img.php.cn//upload/image/138/836/291/1534838629482987.png "1534838629482987.png")
圣杯布局代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
</head>
<body>
<style>
body{
padding: 0;
margin: 0 auto;
}
.header,.footer{
width: 100%;
height: 40px;
text-align: center;
background-color: #888888;
line-height: 40px;
}
.footer{
clear: both;
}
ul{
padding: 0;
}
ul li{
color: #C8E1FA;
list-style: none;
}
.box{
width: 610px;
margin: 0 auto;
}
.center{
width: 100%;
min-height: 600px;
margin: 0 auto;
float: left;
background-color: #265380;
border: 1px solid #000;
}
.left{
width: 168px;
min-height: 600px;
background-color: #265380;
float: left;
margin-left: -100%;
border: 1px solid #000;
position: relative;
left: -180px;
}
.left ul li{
line-height: 2rem;
text-align: center;
}
.right{
width: 226px;
min-height: 600px;
background-color: #265380;
float: left;
margin-left: -230px;
border: 1px solid #000;
position: relative;
right: -240px;
}
.right h3{
color: #C8E1FA;
font-size: 1rem;
}
.right ul{
padding: 0 10px;
}
.right ul li{
width: 100%;
height: 80px;
font-size: 0.8rem;
}
.right ul li img{
width: 80px;
height: 60px;
float: left;
}
.cen{
padding: 20px 30px;
}
.cen_top{
padding: 20px;
height: 50px;
border-bottom: 1px solid #666;
}
.cen_top img{
float: left;
width: 50px;
height: 50px;
border-radius: 50px;
}
.cen_top_l{
width: 200px;
height: 50px;
float: left;
color: #C8E1FA;
}
.cen_top_l p{
margin: 0;
padding: 0;
line-height: 1.5rem;
font-size: 0.9rem;
}
</style>
<div class="header">我是头部</div>
<div class="box">
<div class="center">
<div class="cen">
<div class="cen_top">
<img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
<div class="cen_top_l">
<p>雨上 访问了我的主页</p>
<p>09：03 来自手机空间</p>
</div>
</div>
</div>
<div class="cen">
<div class="cen_top">
<img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
<div class="cen_top_l">
<p>雨上 访问了我的主页</p>
<p>09：03 来自手机空间</p>
</div>
</div>
</div>
<div class="cen">
<div class="cen_top">
<img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
<div class="cen_top_l">
<p>雨上 访问了我的主页</p>
<p>09：03 来自手机空间</p>
</div>
</div>
</div>
<div class="cen">
<div class="cen_top">
<img src="https://qlogo3.store.qq.com/qzone/2658931142/2658931142/50?1533953112" alt="">
<div class="cen_top_l">
<p>雨上 访问了我的主页</p>
<p>09：03 来自手机空间</p>
</div>
</div>
</div>
</div>
<div class="left">
<ul>
<li>好友动态</li>
<li>特别相关</li>
<li>与我相关</li>
<li>空间达人</li>
<li>那年今日</li>
<li>腾讯课堂</li>
<li>游戏应用</li>
<li>我的收藏</li>
</ul>
</div>
<div class="right">
<h3>大家都在看</h3>
<ul>
<li>
<img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
<p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
</li>
<li>
<img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
<p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
</li>
<li>
<img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
<p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
</li>
<li>
<img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
<p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
</li>
<li>
<img src="http://pgdt.gtimg.cn/gdt/0/DAAAaWTABQAA8AAKBZQKayALy_Jxaz.jpg/0?ck=ff17c4d6318566d2e1e790d8969b76f8" alt="">
<p>毁童年的三国内幕！不近女色的关于曾经在河边遛马谈恋爱，简直不可思议！！！</p>
</li>
</ul>
</div>
</div>
<div class="footer">我是底部</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
运行图：
![97T96FII43UCKEFF%B9]6PS.png](https://img.php.cn//upload/image/172/129/976/1534840041142598.png "1534840041142598.png")
圣杯布局和双飞翼布局最大的区别：
圣杯布局和双飞翼布局都是三栏浮动布局，不同的是在解决中间栏div内容不被遮挡的问题，处理方式和思路不一样。
圣杯布局：处理中间栏内容不被遮挡，将中间的div设置了左右padding后，讲左右两个div用相对定位position：relative，并配合right和left属性，将左右两个div移动后，不遮挡中间div的内容。
双飞翼布局：处理中间内容时，直接在中间div内部再创建一个div放置内容，在该子div上用margin设置左右盒边距，为左右两栏div留出位置，比圣杯布局多用了一个div，少用了几个属性。
个人感觉双飞翼布局比圣杯布局思路更直接和简洁一点。
手抄：
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
