利用固定定位制作一个在线客 服,使用position:fixed 让其脱离文档流,并且固定在窗口中,代码如下
实例
<!DOCTYPE html> <html> <head> <title>QQ在线客 服</title> <meta charset="utf-8"> <style type="text/css"> body{height: 1000px} .box { border: 1px solid black; border-radius: 8px; width: 150px; padding: 0; position:fixed; right: 0; top: 40%; } .top { font-size: 2rem; background: #8FCFF2; text-align: center; line-height: 4rem; border-top-left-radius: 8px; border-top-right-radius: 8px; } .bottom{ background: #CEE4F1; /*width:100%;*/ height: 100%; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; padding:10px 30px; } .bottom .content{ border: 1px solid black; text-align: center; border-radius: 8px; background: #D6E8F4; line-height: 2rem; /*margin: 20px 30px;*/ } .box img{ width:100px; margin:0 auto; display: block; } a{ text-decoration-line: none; } span{ position: absolute; top: 1px; right: 3px; } span a{color: black;} </style> </head> <body> <div class="box"> <div class="top">在线客-服</div> <div class="middle"><img src="qq.jpg" ></div> <div class="bottom"><div class="content"><a href="http://qq.com">QQ交谈</a></div></div> <span onclick="this.parentNode.style.display='none'"><a href="">X</a></span> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
2.利用浮动进行图文混排
文本会围绕浮动元素,并不会钻进浮动元素的下面,这样就有利于布局,代码如下
实例
<!DOCTYPE html> <html> <head> <title>图文</title> <style type="text/css"> .box{ border: 1px solid yellow; width: 600px; margin:auto; } img{ float:left; } h2{text-align: center;} p{text-indent: 2rem;} </style> </head> <body> <div class="box"> <h2>php中文网第三期培-训-班</h2> <img src="php.jpg"> <p>内容实用: 经过长期调研与学员反馈,汇总出最实用的PHP技术,学完之后,可以快速融入企业开发环境中 </p><p>知识面广: 涵盖PHP及其周边主要技术,web网站建设,微信小程序开发等可以轻松应对!</p><p> 讲解深入: 针对于PHP核心技术,应用场景,以及原理上的讲解,使学员不仅学会,还能举一反三,最终全面掌握。</p><p> 关注前沿: 时时关注市 场上出现的新技术,及时更新课程,确保课程一直走在前沿,不落伍!</p><p> 就业导向: 就业,择业指导,使学员们可以快速,高薪找到自己心仪的工作!</p> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
3.双飞翼布局
主要利用float、负的margin以及margin:auto等元素来进行布局,其案列代码如下
实例
<!DOCTYPE html> <html> <head> <title>双飞翼布局</title> <meta charset="utf-8"> <style type="text/css"> .header,.footer { width: 100%; height: 60px; background: lightgray; } .content { text-align: center; margin: auto; background: gray; width: 1000px; min-height: 100%;/*子元素的最小高度,使得子元素不会溢出*/ line-height: 60px; } .container{background: yellow;width:1000px;margin:auto; overflow: hidden; } .wrap{ background: coral; float:left;width: 100%; } .main{ margin: 0 210px; min-height: 600px; background: wheat; } .left{ width: 200px; height:600px; background: lightblue; float: left; margin-left: -100%; } .right { width: 200px; height:600px; background: lightgreen; float:left; margin-left:-200px; } </style> </head> <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>
点击 "运行实例" 按钮查看在线实例
4.圣杯布局
与双飞翼布局类似,更加简单一点,利用相对定位显示出主体部分,其案列代码如下:
实例
<!DOCTYPE html> <html> <head> <title>圣杯布局</title> <meta charset="utf-8"> <style type="text/css"> .header,.footer { width: 100%; height: 60px; background: lightgray; clear:both; } .content { text-align: center; margin: auto; background: gray; width: 1000px; min-height: 100%;/*子元素的最小高度,使得子元素不会溢出*/ line-height: 60px; } .container{background: yellow;width:600px;margin:auto; /*overflow: hidden;*/ } .main{ /*margin: 0 210px;*/ min-height: 600px; background: wheat; width: 100%; float: left; } .left{ width: 200px; height:600px; background: lightblue; float: left; margin-left: -100%; position: relative; left: -200px; } .right { width: 200px; height:600px; background: lightgreen; float:left; margin-left:-200px; position:relative; right: -200px; } </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>
点击 "运行实例" 按钮查看在线实例
以下是这两种布局的区别
总结:浮动元素只影响后面的元素布局,并不会影响前面的元素。
min-height可以让元素的高度不会低于这个值
overfloat:hidden可以解决子元素浮动引起父级高度塌陷
浮动后的行内元素支持宽高设定