收藏
批改状态：合格
老师批语：
今天学习了浮动和经典布局的方式，尤其要注意双飞翼布局和圣杯布局的布局方式
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQkefu固定</title>
<style>
ul,li{
margin:0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
position: fixed;
right: 100px;
bottom: 100px;
/*border:1px solid red;*/
}
.box ul{
list-style: none;
}
.box ul li a{
text-decoration-line: none;
}
.close{
position: absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<div class="box">
<span class="close" onclick="this.parentNode.style.display='none'">X</span>
<br>
<ul>
<li><a href=""><img src="1.jpg" width="20px" height="20px" align="absmiddle" alt="QQ"> QQ1</a></li>
<li><a href=""><img src="1.jpg" width="20px" height="20px" align="absmiddle" alt="QQ"> QQ2</a></list>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
代码二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style>
h2,p{margin:0;}
.box{
width: 600px;
background-color: #ccc;
font-size: 1rem;
color:#555;
border-radius: 1rem;
padding: 20px;
}
.box h2{
text-align: center;
margin-bottom: 20px;
}
.box img{
width: 250px;
float:left;
margin-right: 20px;
margin-bottom:20px;
}
.box p{
text-indent: 2rem;
line-height: 1.5rem;
}
</style>
</head>
<body>
<div class="box">
<h2><<荷花>></h2>
<img src="2.jpg" alt="">
<p>荷花（Lotus flower）属山龙眼目，莲科，是莲属二种植物的通称。又名莲花、水芙蓉等。是莲属多年生水生草本花卉。地下茎长而肥厚，有长节，叶盾圆形。花期6至9月，单生于花梗顶端，花瓣多数，嵌生在花托穴内，有红、粉红、白、紫等色，或有彩纹、镶边。坚果椭圆形，种子成卵形。荷花种类很多，分观赏和食用两大类。原产亚洲热带和温带地区，中国早在周朝就有栽培记载。荷花全身皆宝，藕和莲子能食用，莲子、根茎、藕节、荷叶、花及种子的胚芽等都可入。其出污泥而不染之品格恒为世人称颂。“接天莲叶无穷碧，映日荷花别样红”就是对荷花之美的真实写照。荷花“中通外直，不蔓不枝，出淤泥而不染，濯清涟而不妖”的高尚品格，历来为古往今来诗人墨客歌咏绘画的题材之一。</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
代码三：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.header,.footer{
width: 100%;
height: 60px;
background-color: #ccc;
}
.footer{
clear: both;
}
.content{
width: 1000px;
min-height: 100%;
margin:auto;
text-align: center;
line-height: 60px;
background-color: blue;
}
.container{
width: 1000px;
margin:auto;
overflow: hidden;
background-color: red;
}
.wrap{
width: 100%;
background-color: gray;
float: left;
}
.main{
min-height: 600px;
margin: 0 200px;
background-color: wheat;
}
.left{
width: 200px;
min-height: 600px;
float: left;
background-color: yellow;
margin-left: -100%
}
.right{
width: 200px;
min-height: 600px;
float: left;
background-color: pink;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="header"><div class="content">网站头部</div></div>
<div ></div>
<div class="container">
<div class="wrap">
<div class="main">主体内容区</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
代码四：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
.header,.footer{
width: 100%;
height: 60px;
background-color: lightgray;
}
.content{
width: 1000px;
min-height: 100%；
background-color:gray;
margin:auto;
text-align: center;
line-height: 60px;
}
.container{
width: 600px;
margin:auto;
overflow: hidden;
padding: 0 200px;
background-color: yellow;
}
.main{
width: 100%;
min-height: 650px;
background-color: #6CF;
float: left;
}
.left{
width: 200px;
min-height: 650px;
background-color: #FD6FCF;
float: left;
margin-left:-100%;
position: relative;
left: -200px;
}
.right{
width: 200px;
min-height: 650px;
background-color: #FC0107;
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>点击 "运行实例" 按钮查看在线实例
作业五
圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。
双飞翼布局和圣杯的区别是双飞翼的兼容性更好
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
