关于固定定位--qq在线客 服窗口
实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
</head>
<body>
<!--
绝对定位是相对于离它最近的，具有定位属性的父级容器进行定位，定位父级不确定，可以自定义
固定定位它的定位父级永远不变，是当前窗口 body
-->
<style>
body{
margin:0;
height:1000px;
}
.box1{
position:fixed;
bottom:100px;
right:0;
border:1px solid;
width:250px;
height:130px;
}
img{
margin-top:20px;
}
span{
position:absolute;
right:10px;
top:5px;
}
a{
margin-top:50px;
}
</style>
<div class="box1">
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=752795944&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:752795944:51" alt="点击这里给我发消息" /></a>QQ:752795944
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=666666&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:666666:51" alt="点击这里给我发消息" /></a>QQ:666666
<span class="close" onclick="this.parentNode.style.display='none'">X</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
浮动实现图文混排
实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>实战图文混排</title>
</head>
<style>
h2,p{
margin:0;
}
.box{
width:700px;
background-color: #9bacd2;
font-size:1rem;
color:red;
border-radius:1rem;
padding:1.5rem;
}
.box h2{
text-align:center;
margin-bottom:10px;
}
.box img{
float:left;
margin-right:10px;
margin-bottom:10px;
}
.box p{
text-indent:2rem;
line-height:1.5rem;
}
</style>
<body>
<div class="box">
<h2>浮动实现图文混排-实战</h2>
<img src="https://ws1.sinaimg.cn/large/005T68rqgy1fueszg1f41j31hc0u0hd7.jpg" height="200px" alt="">
<p>世人说，爱是最宝贵的东西。我皱眉，爱，我不懂。 然后，我去看言情小说，用它来弥补我最关键的一刻。可我却依旧不明白，反而更加懵懂。 我看过太多的人。他们或许是高高在上的佼佼者，有华丽的身世，由于生俱来的相貌与气质；他们或许是淹没在人群中的丑小鸭，有各种不一样的机遇，追逐自己的爱情。 我疑惑，我要以那种姿态等待我的王子。是那些嚣张泼辣的女强人，或是冷漠宁静的安定者。是视一切为无物，与固有的姿态冷眼生活。还是绽开笑容，热情迎接生命赐予我的每一分相遇。怎么 样，才能吸引属于我的目光。 然后，我在一本书里看到，爱情来临之前，只用做好自己。我延续自己冷漠而孤独的风格，期待，最宝贵的爱情。 我看到过太多爱情的开始，是一见钟情，却遮遮掩掩。还是放开大胆，用尽浑身解数的追逐。明明感觉无望的心上人，却依旧不放弃。或者望而退却的钦慕着，却发现那边正是爱自己的人。</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
双飞翼布局
实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.header,.footer{
width:100%;
height:60px;
background-color: lightgrey;
}
.content{
width:1000px;
min-height:100%;
background-color: pink;
margin:auto;
text-align:center;
line-height:60px;
}
.container{
/*position:relative;*/
width:1000px;
margin:auto;
background-color: yellow;
overflow:hidden;
}
.wrap{
width:100%;
background-color: #00a2d4;
float:left;
}
.main{
min-height:600px;
background-color: #d4c674;
/*从主体区给左右两边挤出空间*/
margin-left:210px ;
margin-right:210px ;
}
.left{
width:200px;
min-height:600px;
background-color: #94b4d4;
float:left;
margin-left:-100%;
}
.right{
width:200px;
min-height:600px;
background-color: #d47066;
float:left;
margin-left:-200px;
}
</style>
</head>
<body>
<!--DOM结构-->
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯三列布局
实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>经典的三列圣杯布局</title>
<style>
.header,.footer{
width:100%;
height:60px;
background-color: lightgrey;
}
.content{
width:1000px;
min-height:100%;
background-color: pink;
margin:auto;
text-align:center;
line-height:60px;
}
.container{
width:600px;
margin:auto;
overflow: hidden;
background-color: #ff50ef;
padding:0 200px;
}
.container .main{
width:100%;
min-height:650px;
background-color: #00CC99;
float:left;
}
.container .left{
width:200px;
min-height:650px;
background-color: #7067cc;
float:left;
margin-left:-100%;
position: relative;
left:-200px;
}
.container .right{
width:200px;
min-height:650px;
background-color: #cc407b;
float:left;
margin-left:-200px;
position: relative;
right:-200px;
}
.footer{
clear:left;
}
</style>
</head>
<body>
<!--DOM结构-->
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
关于双飞翼与圣杯三列布局的区别
双飞翼与圣杯布局在前端布局中比较常用，
