收藏
批改状态：合格
老师批语：
这节课学会了固定定位，怎么用浮动实现图文混排，了解了两种经典布局双飞翼和圣杯布局，同时也知道怎么应用两种布局和两种布局的区别
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ在线客 服</title>
<style type="text/css">
.box{
width: 100px;
height: 200px;
border: 2px solid lightblue;
border-radius: 5px;
position: fixed;
bottom: 0;
right: 0;
}
.box1{
width: 100px;
height: 30px;
background-color: lightblue;
text-align: center;
line-height: 30px;
}
.box2 img{
width: 100px;
height: 140px;
}
.box3{
width: 100px;
height: 30px;
text-align: center;
}
.box3 button{
background-color: lightblue;
}
.box3 a{
text-decoration: none;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">在线咨询</div>
<div class="box2"><img src="1.jpg" ></div>
<div class="box3"><button><a href="">QQ交谈</a></button></div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图：
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style type="text/css">
h2, p{
margin: 0;
}
.box{
width: 500px;
background-color: aliceblue;
font-size: 18px;
padding: 20px;
}
.box img{
width: 200px;
float:left;
margin-right: 15px;
}
.box h2{
text-align: center;
margin-bottom: 20px;
}
.box p{
line-height: 1.5em;
}
</style>
</head>
<body>
<div class="box">
<h2>图文混排</h2>
<img src="2.jpg">
<p>
城里人经常被调侃有三大怕，“出门怕拥堵、工作怕生病、日常怕遇害”。随着城市化发展，人口增长，车辆增长速度远超路网
能力的增长，交通治理“慢”“难”，医疗资源不均衡，看病难看病贵让人揪心，社会安全隐患防不胜防，遇害案件频现。
显然,传统意义上的城市建设和管理模式存在很多问题，智慧城市成为城市发展必然趋势。智慧城市是通过运用人工智能、
大数据等新兴技术实现城市智慧式管理和运行，促进城市和谐、可持续成长。
如今，我国智慧城市试点城市达到500个，建设规模全球居首。
</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图：
![_]IG`2_JQZPGB]@%MO0R9XI.png](https://img.php.cn//upload/image/984/322/723/1534677121324913.png "1534677121324913.png")
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
.header, .footer{
width: 100%;
height: 40px;
background-color: lightblue;
text-align: center;
line-height: 40px;
}
.content{
width: 1200px;
min-height: 100%;
margin: auto;
}
.container{
width: 1200px;
margin: auto;
overflow: hidden;
}
.wap{
width: 100%;
float: left;
}
.main{
min-height: 600px;
background-color: lightcyan;
margin-left: 470px;
margin-right: 200px;
}
.left{
width: 460px;
min-height: 600px;
float: left;
background-color: bisque;
margin-left: -100%;
}
.right{
width: 190px;
min-height: 600px;
float: left;
background-color: lightgray;
margin-left: -190px;
}
.footer{
clear: both;
}
.content li{
list-style: none;
display: inline-block;
padding: 0 20px;
}
.left1{
width: 430px;
margin:auto;
}
.right1{
width: 160px;
margin: auto;
}
h2,p{
margin: 0;
}
.main1{
margin: 0 15px;
}
.main1 p{
padding: 20px 0;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<ul>
<li>男 士专区</li>
<li>女 士专区</li>
</ul>
</div>
</div>
<div class="container">
<div class="wap">
<div class="main">
<div class="main1">
<h2>男 士刺绣LOGO短袖</h2>
<div style="padding:100px 0 ">
<p>促销价：800元</p>
<p>运费：包邮</p>
</div>
</div>
</div>
</div>
<div class="left">
<div class="left1"><img src="3.jpg"></div>
</div>
<div class="right">
<div class="right1"><img src="4.jpg" ></div>
<div class="right1"><img src="4.jpg" ></div>
<div class="right1"><img src="4.jpg" ></div>
</div>
</div>
<div class="footer">
<div class="content">某某公司</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图
![3DQ[94@VFFIO1AP%VU2]OGB.png](https://img.php.cn//upload/image/551/933/767/1534677176220240.png "1534677176220240.png")
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
.header,.footer{
width: 100%;
height: 40px;
background-color: lightblue;
text-align: center;
line-height: 40px;
}
.content{
width: 1200px;
height: 100%;
margin: auto;
background-color: gray;
}
.container{
width: 550px;
margin: auto;
overflow: hidden;
padding:0 190px 0 460px;
}
.main{
width: 100%;
min-height: 600px;
float: left;
background-color: aqua;
}
.left{
width: 460px;
min-height:600px ;
float:left;
background-color: aliceblue;
margin-left: -100%;
position: relative;
left: -460px;
}
.right{
width: 190px;
min-height:600px ;
float: left;
background-color: antiquewhite;
margin-left: -190px;
position: relative;
right: -190px;
}
.footer{
clear: both;
}
.content li{
list-style: none;
display: inline-block;
padding: 0 20px;
}
.left1{
width: 430px;
margin:auto;
}
.right1{
width: 160px;
margin: auto;
}
h2,p{
margin: 0;
}
.main1{
margin: 0 15px;
}
.main1 p{
padding: 20px 0;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<ul>
<li>男 士专区</li>
<li>女 士专区</li>
</ul>
</div>
</div>
<div class="container">
<div class="main">
<div class="main1">
<h2>男 士刺绣LOGO短袖</h2>
<div style="padding:100px 0 ">
<p>促销价：800元</p>
<p>运费：包邮</p>
</div>
</div>
</div>
<div class="left"><div class="left1"><img src="3.jpg"></div></div>
<div class="right">
<div class="right1"><img src="4.jpg" ></div>
<div class="right1"><img src="4.jpg" ></div>
<div class="right1"><img src="4.jpg" ></div>
</div>
</div>
<div class="footer">
<div class="content">某某公司</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
预览图：
![HVI1Q%)S_FP]0A[H@V}6H4H.png](https://img.php.cn//upload/image/785/154/484/1534677327567032.png "1534677327567032.png")
手抄：
![77LM%AGI%4`$`N]XTSLM{MW.png](https://img.php.cn//upload/image/210/976/620/1534677565908643.png "1534677565908643.png")
通过手抄对双飞翼和圣杯的区别记忆更加清晰，两者的区别主要在于对中间区块的处理
总结
1、固定定位的应用，知道怎么实现固定定位
2、双飞翼布局和圣杯布局的应用，了解双飞翼和圣杯布局的区别
3、知道了怎样用浮动实现图文混排
4、双飞翼和圣杯共同点:
目标都是要将页面的主要内容区,优先渲染出来,提升用户体验，都是三列布局,左右二列固定,中间内容区自适应，三列全部采用浮动处理，要求中间的内容区不能被挡住,必须全部完整展示.
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
