实例
固定定位+图文混排
<!DOCTYPE html>
<html>
<head>
<title>固定定位+图文混排</title>
<meta charset="utf-8">
<style type="text/css"></style>
</head>
<body>
<div class="fixed">
<span>×</span>
<table cellpadding="5px">
<tr>
<td><img src="QQ.png" width="40" height="40"></td>
<td><a href="#">QQ在线服务1</a></td>
</tr>
<tr>
<td><img src="QQ.png" width="40" height="40"></td>
<td><a href="#">QQ在线服务2</a></td>
</tr>
</table>
</div>
<style type="text/css">
.fixed{
width: 200px;
height: 150px;
background: #ccc;
position: fixed;/*固定定位，父级永远不变，是当前窗口body*/
bottom: 0;
right: 0;
}
.fixed span{
margin-left: 180px;
}
.fixed span:hover{
color: red;
cursor: pointer;
}
table{
/*border: 1px solid #000;
border-collapse: collapse;*/
margin-left: 10px;
}
table tr{
height: 20px;
}
table tr td{
/*border: 1px solid #000;*/
text-align: center;
cursor: pointer;
}
table img{
width: 40px;
height: 40px;
}
.box{
width: 500px;
height: 500px;
background: #ccc;
border-radius: 15px;
padding: 5px;
}
.box h3{
text-align: center;
margin-top: 10px;
}
.box img{
float: left;
margin-right: 20px;
margin-bottom: 5px;
}
.box p{
line-height: 25px;
text-indent: 2rem;
}
</style>
<div class="box">
<h3>PHP中文网第三期培训课程开始啦</h3>
<img src="https://img.php.cn/upload/article/000/000/003/5b596217c2850304.jpg">
<p>各位php中文网的铁粉们！好消息来了！您期盼已久的《php中文网第三期php在线实战培训》现在正式开始报名啦！各位php中文网的铁粉们！好消息来了！您期盼已久的《php中文网第三期php在线实战培训》现在正式开始报名啦！各位php中文网的铁粉们！好消息来了！您期盼已久的《php中文网第三期php在线实战培训》现在正式开始报名啦！各位php中文网的铁粉们！好消息来了！您期盼已久的《php中文网第三期php在线实战培训》现在正式开始报名啦！各位php中文网的铁粉们！好消息来了！您期盼已久的《php中文网第三期php在线实战培训》现在正式开始报名啦！各位php中文网的铁粉们！好消息来了！您期盼已久的《php中文网第三期php在线实战培训》现在正式开始报名啦！各位php中文网的铁粉们！好消息来了！您期盼已久的《php中文网第三期php在线实战培训》现在正式开始报名啦！</p>
</div>
</body>
</html>双飞翼布局
实例
<!DOCTYPE html>
<html>
<head>
<title>双飞翼布局</title>
<meta charset="utf-8">
<style type="text/css">
.header{
width: 100%;
height: 60px;
background: #eee;
margin-bottom: 10px;
text-align: center;
line-height: 60px;
}
.footer{
width: 100%;
height: 60px;
background: #eee;
margin-top: 10px;
clear:both; /*清除两边浮动*/
text-align: center;
line-height: 60px;
}
.content{
width: 1000px;
min-height: 100%;
background-color: #ccc;
margin: auto;
}
.container{
width: 1000px;
height: 600px;
margin: auto;
}
.container .wrap{
width: 100%; /*主体的样式都写在他的父级元素wrap中*/
height: 600px;
background: lightgreen;
margin: 0 auto;
float: left;
}
.container .wrap .main{
/*width: 100%;*/
min-height: 100%;
background: green;
margin: 0 210px; /*双飞翼布局的重点，将主题部分用margin挤出来*/
}
.container .left{
width: 200px;
min-height: 100%;
background: lightblue;
float: left;
margin-left: -100%;
}
.container .right{
width: 200px;
min-height: 100%;
background: lightcoral;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">
主体内容<br>
<p>1.首先先设置container的宽度，高度</p>
<p>2.优先渲染主体main，内容区写在前面，需要在内容区再加个父级元素wrap</p>
<p>3.主体的样式都写在wrap中，设置宽度为100%,最小高度设置为100%继承父元素高度</p>
<p>4.wrap，left，right都设置为左浮动，左浮动后，因为wrap宽度为100%，所以left和right都被挤到下一行，所以设置
left的margin-left:-100%;right的margin-left:-200px(自身宽度)</p>
<p style="color:red;font-weight: bold;">5.最重要的，也是双飞翼最核心的，将主体部分用margin挤出来，再主体内容区main中设置margin:0 210px;</p>
</div>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>圣杯布局
实例
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style type="text/css">
.header{
width: 100%;
height: 60px;
background: #eee;
margin-bottom: 10px;
}
.footer{
width: 100%;
height: 60px;
background: #eee;
margin-top: 10px;
}
.content{
width: 1000px;
min-height: 100%;
background-color: #ccc;
margin: auto;
}
.container{
width: 560px;
height: 600px;
margin: auto;
}
.container .main{
min-height: 600px;
background: red;
width: 100%;
float: left;
}
.container .left{
width: 200px;
min-height: 600px;
background: lightblue;
float: left;
margin-left: -100%;
position: relative; /*圣杯布局的重点，利用相对定位实现*/
left: -220px;
}
.container .right{
width: 200px;
min-height: 600px;
background: lightcoral;
float: left;
margin-left: -200px;
position: relative;
right: -220px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部</div>
</div>
<div class="container">
<div class="main">主体内容<br>
<p>圣杯布局和双飞翼布局都是优先渲染主体,最大的区别是：双飞翼布局采用margin来挤压出主体区域，圣杯主要是用相对定位来实现</p>
<p>圣杯布局前面大部分和双飞翼是一样的，圣杯布局的主体不需要再套父级，他和left，right都是同一个父级container，设置container的总宽度为三个主体的和</p>
<p>都是先将三个区域左浮动，用margin来进行位置的排序，</p>
<P style="font-weight: bolder;">最后，也是圣杯的重点，也是不同于双飞翼的，用相对定位。positio:relative，将左右区域按照相应的位置进行相对定位</P>
</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
点击 "运行实例" 按钮查看在线实例
运行实例 »
点击 "运行实例" 按钮查看在线实例
