实例
1.实现QQ客 服功能
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实现QQ客 服功能</title>
<style>
body{
margin: 0;
}
.close{
position: absolute;
right: 10px;
top: 8px;
}
.box{
width: 400px;
height: 300px;
background-color: white;
position: fixed;
bottom: 0;
right: 0;
}
.box .box1{
width: 400px;
height: 30px;
background-color: #0388F1;
position: fixed;
bottom: 270px;
right: 0;
}
.box .box2{
width: 400px;
height: 30px;
background-color: #0388F1;
position: fixed;
bottom: 0;
right: 0;
}
.box img{
position: fixed;
right: 0;
bottom: 30px;
}
</style>
</head>
<body>
<div class="box">
<a href="http://kf.qq.com/">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534681478239&di=673527954c54b7e2bc5727d8d8f45384&imgtype=0&src=http%3A%2F%2Fimage.coolapk.com%2Ffeed%2F2016%2F0331%2F394142_1459410061_2002.jpg.m.jpg" alt=""
></a>
<div class="box1"></div>
<div class="box2"></div>
<span class="close" onclick="this.parentNode.style.display='none'">关闭</span>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
2.浮动实现图文混排
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动实现图文混排</title>
<style>
h2,p{
margin: 0;
}
.box1 {
width: 700px;
background-color: #efefef;
font-size: 1rem;
color: #555;
border-radius: 1rem;
padding: 1.5rem;
}
.box1 img{
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.box1 p{
text-indent: 2rem;
line-height: 1.5rem;
}
</style>
</head>
<body>
<div class="box1">
<h1>暴雨黄色预警持续：辽宁山东等地将有强降雨</h1>
<img src="https://inews.gtimg.com/newsapp_bt/0/4897275283/1000" alt="" width="200px">
<p>中新网8月19日电 据中央气象台网站消息，中央气象台8月19日18时继续发布暴雨黄色预警，预计8月19日20时至20日20时，山东中东部、辽宁中东部等地有大到暴雨，局地有特大暴雨。</p>
<h2>山东河北河南等地出现强降</h2>
<p>19日白天，受“温比亚”影响，山东中西部以及河南濮阳、河北沧州、天津大港等地出现暴雨，其中山东泰安、聊城和济宁大暴雨(100～208毫米)，山东泰安东平特大暴雨(287毫米)；上述地区最大小时降雨量有50～80毫米。另外，浙江东南部、福建东部沿海、江西南部、广东中部等地出现分散性大雨或暴雨，广东佛山大暴雨(124毫米)。</p>
<h2>辽宁山东等地将有强降雨</h2>
<p>预计8月19日20时至20日20时，山东中东部、河北东部、天津中南部、辽宁中东部、吉林东南部等地有大到暴雨，其中山东东北部、辽宁东南部等地部分地区有大暴雨，局地有特大暴雨(250～300毫米)，上述部分地区伴有短时强降水(小时雨量20～60毫米，最大可达70毫米以上)，局地有雷暴大风等强对流天气。中央气象台8月19日18时继续发布暴雨黄色预警。</p></p></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
3.双飞冀三列布局
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞冀三列布局</title>
<style type="text/css">
.header,.footer{
width: 100%;
height: 60px;
background-color: #666666;
}
.footer{
clear:both;
}
.content{
width: 1000px;
min-height: 100%;
background-color: gray;
margin: auto;
text-align: center;
line-height:60px;
}
.wrap{
width: 100%;
background-color: cyan;
float: left;
}
.main{
min-height: 600px;
margin: 0 200px;
background-color: wheat;
}
.left{
width: 200px;
min-height: 600px;
float: left;
margin-left: -100%;
background-color: lightblue;
}
.right{
width: 200px;
min-height: 600px;
float: left;
margin-left: -200px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="header">
<div class="content">网站头部</div>
</div>
<div class="contain">
<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>运行实例 »
点击 "运行实例" 按钮查看在线实例
4.圣杯布局
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style type="text/css">
.header,.footer{
width: 100%;
height: 60px;
background-color: lightgray;
}
.footer{
clear: both;
}
.content{
width: 1000px;
height: 100%;
background-color: gray;
margin: auto;
text-align: center;
line-height: 60px;
}
.container{
width: 600px;
background-color: yellow;
margin: auto;
overflow: hidden;
padding: 0 200px;
}
.container .main{
min-height: 650px;
width: 100%;
float: left;
background-color: wheat;
}
.container .left{
width:200px;
min-height: 650px;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
background-color: lightblue;
}
.container .right{
width: 200px;
min-height: 650px;
float: left;
margin-left: -200px;
position: relative;
right: -200px;
background-color: lightgreen;
}
</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>运行实例 »
点击 "运行实例" 按钮查看在线实例
手抄:
