qq在线客 服实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none
}
.content{
height:2000px;
background-color: #a2acb4;
}
.qq{
height: 328px;
width: 170px;
background-color: #d8d8d8;
position: fixed;
bottom: 30px;
right: 0;
}
.qq>p{
width:inherit;
color: white;
background-color: #fa0;
line-height: 45px;
text-align: center;
font-size:20px;
font-weight: bold;
}
.teacher{
background-color: #fff;
}
.teacher ul{
padding: 0 14px;
}
.teacher li{
padding: 8px 20px;
border-bottom: 1px solid #e2e2e2;
}
.teacher img{
height: 30px;
width: 40px;
}
.teacher a{
font-size: 18px;
}
.erweima{
padding: 10px;
color:#848484;
text-align: center;
}
.erweima img{
height:150px;
width: 150px;
}
</style>
<body>
<div class="content">
</div>
<div class="qq">
<p>在 线 客 服</p>
<div class="teacher" >
<ul>
<li>
<img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=ce79769a30f33a879e6d071cfe677705/34fae6cd7b899e5114f3cfbe48a7d933c8950d1e.jpg" align="absmiddle">
<a href="">朱老师</a>
</li>
<li>
<img src="https://gss3.bdstatic.com/-Po3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=ce79769a30f33a879e6d071cfe677705/34fae6cd7b899e5114f3cfbe48a7d933c8950d1e.jpg" align="absmiddle">
<a href="">猪哥</a>
</li>
</ul>
</div>
<div class="erweima">
<img src="https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=7bcb659c9745d688a302b5a29cf91a23/2934349b033b5bb571dc8c5133d3d539b600bc12.jpg" alt="">
百度百科
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
图文混排实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图文混排</title>
</head>
<body>
<style>
h2, p {
margin: 0;
}
.box {
width: 700px;
background-color: #efefef;
font-size: 1rem;
color: #555;
border-radius: 1rem;
padding: 20px;
margin: 0 auto;
}
.box h2 {
text-align: center;
margin-bottom: 20px;
}
.box img {
width: 300px;
height: 200px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.box p {
text-indent: 2rem;
line-height: 1.5rem;
}
</style>
<div class="box">
<h2>《PHP中文网第三期培 训 班》</h2>
<img src="https://img.php.cn/upload/article/000/000/003/5b596217c2850304.jpg" alt="">
<p>为了第三期的培 训，我们18位老师和同事历经3月精心准备。每一个PPT，每一行代码，每一个实战案例都是经过
我们老师和同事们反复讨论，反复打磨敲定！我们追求完美，力求每一节课程都是精品！
为了这次课程，我们的培训老师也是在一起相互试听，不断改进教学风格，坚持幽默，深入浅出，
力求每一个学员都能听得懂，学得会！我们的辅导老师也是早早准备好！跟进监督每位学员的作业
（避免光学不练空架子），及时解答学员的问题，更有回答某些学员的生活上的私人问题~~默默的奉献！
PHP中文网第三期线上 培训 班_前端基础学习内容: HTML5,CSS3,JavaScript,jQuery,Vue.js入门,
Bootstrap,页面布局实战 《网站管理后台》的模板开发(综合应用以上所学知识)
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.header,
.footer {
width: 100%;
height: 60px;
background-color: #bbb;
clear: both;
}
.content {
width: 1000px;
min-height: 100%;
background-color: #c2c6d1;
margin: auto;
text-align: center;
line-height: 60px;
}
.container {
width: 1000px;
margin: auto;
overflow: hidden;
background-color: yellow;
}
.wrap {
width: 100%;
background-color: cyan;
float: left;
}
.main {
min-height: 600px;
margin: 0 200px;
background-color: #c2cbca;
}
.main p{
text-align: center;
color: aliceblue;
}
.left {
width: 200px;
min-height: 600px;
float: left;
margin-left: -100%;
background-color: #9fb3bf;
}
.left li {
list-style: none;
display: block;
height: 40px;
color: aliceblue;
}
.right {
width: 200px;
min-height: 600px;
float: left;
margin-left: -200px;
background-color: #9ab2b5;
}
.right li {
text-align: right;
list-style: none;
display: block;
height: 40px;
color: aliceblue;
}
</style>
</head>
<body>
<div class="header">
<div class="content">头</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
<p>1</p>
</div>
</div>
<div class="left">
<img src="//img1.360buyimg.com/da/jfs/t24421/202/1448980410/92212/55bdb284/5b5edd53N433c624a.gif?v=0.3854445221887721">
<ul>
<li>家 用电 器</li>
<li>家 居</li>
<li>男 装</li>
<li>女 装</li>
<li>食 品</li>
<li>图 书</li>
<li>母 婴</li>
</ul>
</div>
<div class="right">
<img src="//img1.360buyimg.com/da/jfs/t24421/202/1448980410/92212/55bdb284/5b5edd53N433c624a.gif?v=0.3854445221887721">
<ul>
<li>家 用电 器</li>
<li>家 居</li>
<li>男 装</li>
<li>女 装</li>
<li>食 品</li>
<li>图 书</li>
<li>母婴</li>
</ul>
</div>
</div>
<div class="footer">
<div class="content">底部</div>
</div>
<pre>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三圣杯实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列圣杯布局</title>
<style type="text/css">
.header, .footer {
width: 100%;
height: 60px;
background-color: #dbd4d4;
}
.footer {
clear: both;
}
.content {
width: 1000px;
height: 100%;
background-color: #bebebe;
margin: auto;
text-align: center;
line-height: 60px;
}
.container {
width: 600px;
background-color: #f4f4c0;
margin:auto;
overflow: hidden;
padding:0 200px;
}
.container .main {
min-height: 650px;
width: 100%;
float:left;
background-color: #ebe4d5;
}
.container .left {
width: 200px;
min-height: 650px;
float:left;
margin-left: -100%;
position: relative;
left: -200px;
background-color: #b5c6d0;
}
.container .right {
width: 200px;
min-height: 650px;
float:left;
margin-left:-200px;
position: relative;
right:-200px;
background-color: #c2d4c2;
}
</style>
</head>
<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>
<div class="footer">
<div class="content">网站底部</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
