编程:固定定位制作QQ在线客；
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ客</title>
</head>
<style>
body{
height: 2000px;
}
.box{
width:150px;
height: 80px;
background-color:lightsalmon;
display:table-cell;
text-align: center;
vertical-align: middle;
border: #555555 2px dashed;
border-radius: 1em;
position:fixed ;
top: 500px;
right:0 ;
}
</style>
<body>
<div class="box">
<span>联系QQ客</span><br>
<a href="www.php.com"><span>403541865</span></a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.编程:浮动实现图文混排;
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战图文混排</title>
</head>
<style>
.box{
width: 700px;
background-color: lightblue;
font-size: 1em;
color: #555555;
border-radius: 1rem;
padding: 30px;
}
.box h1{
text-align: center;
margin-top: 30px;
}
.box img{
width: 250px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.box p{
text-indent: 2rem;
line-height: 1.5rem;
}
</style>
<body>
<div class="box">
<h1>《PHP天下第一》</h1>
<img src="https://img.php.cn//upload/image/426/710/332/1534309094483586.jpg" alt="">
<p>皮肤受损。皮肤在晚10—11点进入保养状态，长时间熬夜，人的内分泌和神经系统就会失调，使皮肤干燥、弹性差、晦暗无光，出现暗疮、粉刺、黑斑等问题 ，晚上11时到凌晨3时是美容时间，也就是人体的经脉运行到胆、肝的时段。这两个器官如果没有获得充分的休息，就会表现在皮肤上，容易出现粗糙、脸色偏黄、黑斑、青春痘等问题。对于不习惯早睡的人来说，最迟也要在凌晨1时的养肝时间进入熟睡期。搜索原标题：运营商“流量不限量”后限速，天津网友质疑“变相收费挣钱”文/刘畅“津云”微信公号8月18日消息，手机“流量不限量”套餐正在流行，三大通信运营商均推出了这项套餐服务。无奈买的不如卖的精，说是不限量，但是三大运营商却给这项服务施加了多种的门槛。
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.编程: 实例演示双飞冀三列布局；
实例
<!DOCTYPE html>
<html>
<head>
<title>双飞翼布局</title>
</head>
<style type="text/css">
.hader, .footer{
width: 100%;
height: 60px;
background-color: #aaa;
}
.footer{
clear: both;
}
.content{
width: 1000px;
min-height: 100%;
margin: auto;
text-align: center;
line-height: 60px;
background-color:#eee;
}
.container{
width: 1000px;
margin: auto;
overflow: hidden;
background-color: yellow;
}
.wrap{
width: 100%;
background-color：#325;
float: left;
}
.main{
min-height: 600px;
margin: 0 200px;
background-color: lightskyblue;
}
.left{
width: 200px;
min-height: 600px;
float: left;
margin-left:-100%;
background-color:#357;
}
.right{
width: 200px;
min-height: 600px;
float: left;
margin-left:-200px;
background-color:#357;
}
</style>
<body>
<div class="hader">
<div class="content">hrader</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">footer</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.编程: 实例演示圣杯三列布局；
实例
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
</head>
<style type="text/css">
.hader, .footer{
width: 100%;
height: 60px;
background-color: #aaa;
}
.content{
width: 1000px;
min-height: 100%;
margin: auto;
text-align: center;
line-height: 60px;
background-color:#eee;
}
.container{
width:600px;
margin: auto;
overflow: hidden;
padding: 0 200px;
background-color: pink;
}
.main{
width: 100%;
min-height:650px;
background-color: #6cf;
float: left;
}
.left{
width: 200px;
min-height: 650px;
background-color:#835;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
width: 200px;
min-height: 650px;
background-color:#835;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
}
</style>
<body>
<div class="hader">
<div class="content">hrader</div>
</div>
<div class="container">
<div class="main">主要区域</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
<div class="footer">
<div class="content">footer</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
5.手写: 双飞冀与圣杯布局的最大区别在哪里？
