博客列表 >浮动及两种常用的网页布局的基本使用——2018年8月17日

浮动及两种常用的网页布局的基本使用——2018年8月17日

Jackson
Jackson原创
2018年08月23日 12:33:29705浏览
  1. 利用固定定位制作一个在线客 服,使用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>
运行实例 »

点击 "运行实例" 按钮查看在线实例

以下是这两种布局的区别

8.17.jpg

总结:浮动元素只影响后面的元素布局,并不会影响前面的元素。

          min-height可以让元素的高度不会低于这个值

          overfloat:hidden可以解决子元素浮动引起父级高度塌陷

           浮动后的行内元素支持宽高设定



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议