实例 1 固定定位实现QQkefu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位之QQ在线客fu</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.aa {
height: 1800px;
}
.box1 {
position: fixed;
/*固定定位*/
bottom: 0;
right: 0;
}
h3 {
text-align: center;
margin-bottom: 5px;
}
/*img{
border-radius:25px;
}*/
a .close {
position: absolute;
top: 30px;
right: 10px;
}
</style>
</head>
<body>
<div class="aa">
<div class="box1">
<h3>QQ在线</h3>
<a href="http://www.php.cn" target="_back">
<img src="image/QQ.png" alt="">
<span class="close">X</span>
</img>
</a>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 2 实现图文混排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混排</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 1000px;
margin: auto;
}
h1{
text-align: center;
margin: 10px auto;
}
img{
float: left;
margin-right: 20px;
margin-bottom:18px;
}
p{
line-height: 1.5em;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box1">
<h1>《PHP中文网第三期班》</h1>
<img src="image/aa.png">
<p>正文：技术过硬首先是每一个开发者必备的面试条件，但毕竟人人不是大牛，毕竟大牛也不一定会让所有公司满意，今天主要总结的是除了技术以外在面试中如何营销自己的软技能 。
技巧一：了解面试官想要什么，尽量往他想要的方向表现自己
观察一下招聘网站中职位描述和啊啊啊，不难发现对方公司想要找什么类型的人。啊啊啊中的技术要求就算不会，那起码也需要在面试前进行恶补，没有相关方面的经验，但需要让对方感受到你有这方面的能力。啊啊啊上面的技术要求一般都是你进入公司以后必须用到的技能，正常公司是不会花钱去培养0技能的人。
正文：技术过硬首先是每一个开发者必备的面试条件，但毕竟人人不是大牛，毕竟大牛也不一定会让所有公司满意，今天主要总结的是除了技术以外在面试中如何营销自己的软技能 。</p>
<p>技巧一：了解面试官想要什么，尽量往他想要的方向表现自己
观察一下招聘网站中职位描述和啊啊啊，不难发现对方公司想要找什么类型的人。啊啊啊中的技术要求就算不会，那起码也需要在面试前进行恶补，没有相关方面的经验，但需要让对方感受到你有这方面的能力。啊啊啊上面的技术要求一般都是你进入公司以后必须用到的技能，正常公司是不会花钱去培养0技能的人。
正文：技术过硬首先是每一个开发者必备的面试条件，但毕竟人人不是大牛，毕竟大牛也不一定会让所有公司满意，今天主要总结的是除了技术以外在面试中如何营销自己的软技能 。</p>
<p>技巧一：了解面试官想要什么，尽量往他想要的方向表现自己
观察一下招聘网站中职位描述和啊啊啊，不难发现对方公司想要找什么类型的人。啊啊啊中的技术要求就算不会，那起码也需要在面试前进行恶补，没有相关方面的经验，但需要让对方感受到你有这方面的能力。啊啊啊上面的技术要求一般都是你进入公司以后必须用到的技能，正常公司是不会花钱去培养0技能的人。
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例3 实现双飞翼三列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼实现三列布局</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位三列布局</title>
<style type="text/css">
/* * {
padding: 0;
margin: 0;
}*/
body {
background-color: #efefef;
}
.header,
.footer {
width: 100%;
height: 60px;
background-color: lightgreen;
}
.content {
/*先设置总的宽度,这步很重要*/
width: 900px;
/*高度直接引用父区块值*/
min-height: 100%;
/*设置参考色:灰色*/
background-color: gray;
/*使自己水平居中*/
margin: auto;
/*使其内部的文本水平垂直居中*/
text-align: center;
line-height: 60px;
}
.container{
width: 900px;
margin:auto;
background-color: yellow;
overflow: hidden;
}
.wrap{ /*主体内容父子盒子*/
width: 100%; /*设置内容区块宽度为100%*/
background-color:cyan;
float: left; /* 3、浮动主体父级盒子*/
}
.main{
/*主体不浮动*/
min-height: 400px;
background-color: wheat;
/*margin-left: 220px;
margin-right: 220px;*/
margin:0 200px; /*将主体内容左右挤出内容*/
}
.left{
width: 200px;
min-height: 400px;
background-color:green;
float: left; /*1、先设置左区域*/
margin-left: -100%; /*向左浮动100%覆盖住内容区
移动到最左侧*/
}
.right{
width: 200px;
min-height: 400px;
background-color:blue;
float: left; /*2、在浮动右侧区域*/
margin-left: -200px; /*向左浮动该区块的宽度，使之移动到
内容区的最右端*/
}
</style>
</head>
双飞翼布局：
先渲染中间主体内容，
1、将内容区包在一个盒子中（主体内容父级），将盒子左浮动，内容不浮动，
margin-left:左侧内容宽度， margin-right:右侧内容宽度， 挤压内容区（不是父级盒子）使之显示在中间
2、左侧内容 ：左浮动100%，使之移动覆盖到内容区最左侧
3、右侧 ：左浮动该区块宽度值，使之移动覆盖到内容区最右侧
<body>
<div class="header">
<div class="content">网站头部</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>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例4 圣杯布局实现三列布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局实现三列布局</title>
<style type="text/css">
/* * {
padding: 0;
margin: 0;
}*/
body {
background-color: #efefef;
}
.header,
.footer {
width: 100%;
height: 60px;
background-color: lightgreen;
}
.clear{
clear: both;
}
.content {
/*先设置总的宽度,这步很重要*/
width: 900px;
/*高度直接引用父区块值*/
min-height: 100%;
/*设置参考色:灰色*/
background-color: gray;
/*使自己水平居中*/
margin: auto;
/*使其内部的文本水平垂直居中*/
text-align: center;
line-height: 60px;
}
.container{
width: 500px; /*设置盒子父级宽度为内容区想要的宽度*/
margin: auto;
background-color:yellow;
}
.container .main{
width: 100%; /*将主体内容区设置宽度为100%*/
min-height: 400px;
background-color: cyan;
float:left; /* 将内容区左浮动*/
}
.container .left{
width: 200px;
min-height: 400px;
background-color:blue;
float:left; /*左浮动*/
margin-left: -100%; /*移动覆盖到内容区左侧*/
position:relative; /*利用相对定位（相对于父级）向左移动自身宽度*/
right: 200px;
}
.container .right{
width: 200px;
min-height: 400px;
background-color:green;
float:left; /*右侧内容左浮动*/
margin-left: -200px; /*移动覆盖到内容区右侧*/
position:relative; /*利用相对定位（相对于父级）向右移动自身宽度*/
left: 200px;
}
</style>
</head>
<!-- 圣杯布局：
优先渲染中间内容区
主体设置宽度即为主体内容区的宽度
内容区、左、右在同一个主体区内，三者同级关系
1、内容区设置宽度为100%，左浮动
2、左区 左浮动100%（左浮动主体宽度）， margin-left: -100%;
然后再通过相对定位向左移动自身宽度，position:relative;right: 自身宽度;
3、右区 左浮动自身宽度 margin-left:自身宽度
然后再通过相对定位向右移动自身宽度，position:relative;left: 自身宽度; -->
<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 class="clear"></div> <!-- 清除浮动对底部的影响 -->
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5、双飞翼和圣杯布局区别：
