【8/17】--HTML定位以及浮动对于高度的影响和图文混排 - 作业

Home > List of blog posts > 【8/17】--HTML定位以及浮动对于高度的影响和图文混排

Blogger Information

Blog 22

fans 0

comment 0

visits 18115

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>QQ在线咨询</title>
	<style type="text/css">
	body{
		height: 1000px;
		width: 2000px;
	}
		#fixed{
			width: 190px;
			height: 355px;
			background-color:#FCFCFC;
			position: fixed;
			bottom: 20px;
			right: 20px;
			border:1px solid #EAEAEA;
			box-shadow: 2px 2px 2px #B0B0B0;
		}	

		#help{
			width: 191px;
			height: 50px;
			background-color: lightgreen;
			line-height: 50px;
			text-align: center;
			color: white;
			font-size: 18px;
		}

		#qq{
			width: 100px;
			height: 40px;
			text-align: center;			
			line-height: 50px;
			vertical-align: middle;
			padding-bottom: 10px;
		}

		#qq a{
			display: inline-block;
			width: 190px;
			height: 40px;			
			text-decoration: none;
			display: block;
			color: gray;
			/*margin-left: 25px;*/
		}

		#qq img{
			width: 30px;
			height: 30px;
			/*margin-top: 10px;*/
			margin-bottom: -5px;
		}

		#phone{
			width: 100px;
			height: 40px;
			text-align: center;			
			line-height: 50px;
			vertical-align: middle;
			padding-bottom: 10px;
		}

		#phone a{
			display: inline-block;
			width: 190px;
			height: 40px;			
			text-decoration: none;
			display: block;
			color: gray;
			/*margin-left: 25px;*/
		}

		#phone img{
			width: 30px;
			height: 25px;
			/*margin-top: 10px;*/
			margin-bottom: -5px;
		}

	</style>
</head>
<body>
	<div id="fixed">
		<div id="help">免 费 咨 询</div>
		<div id="qq"><a href="#"><img src="img/qqcus.jpg">  售前小姐姐1</a></div>
		<div id="qq"><a href="#"><img src="img/qqcus.jpg">  售前小姐姐2</a></div>
		<div id="qq"><a href="#"><img src="img/qqcus.jpg">  售后小哥哥1</a></div>
		<div id="qq"><a href="#"><img src="img/qqcus.jpg">  售后小哥哥2</a></div>
		<div id="phone"><a href="#"><img src="img/phone.jpg">  400-2333-123</a></div>
		<div id="phone"><a href="#"><img src="img/phone.jpg">  400-3332-456</a></div>
	</div>
</body>
</html>

运行实例 »

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

上面是QQ在线咨询的实例，主要运用了固定定位的技术，其余都是div的图文混排。由于图片无法上传，只能结合预览图看下了：

$IKXWKB2HAIQLWRWW{_RQ{H7.png$

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>图文混排</title>

	<style type="text/css">
	body{
		width: 1100px;
		/*height: 800px;*/
		/*border:2px solid green;*/
		margin: auto auto;
	}
		#total{
			background-color: white;
			padding: 20px 10px;
			margin: auto auto;
		}
		#total:after{
			content: '';	/*添加空元素*/
			display: block;
			clear: both;
		}
		img{
			border-radius: 10px;
		}

		#img{
			float: left;
			margin: 0 20px 0 0;
		}
		#right{
			float: left;	
			width: 600px;		
		}
		#right_title{
			margin: 0;
		}
		#right_con{
			font-size: 14px;
			color: gray;
		}
		#level{
			display: inline-block;
			background-color: rgb(238,238,238);
			width: 30px;
			height: 20px;
			font-size: 12px;
			text-align: center;
			color: rgb(102,102,102);
		}
		#detail{
			overflow: hidden;
		}
		#book{
			color: gray;
			font-size: 14px;
			float: left;
		}
		#book img{
			display: inline-block;
			width: 10px;
			height: 15px;
		}
		
		#head img{
			display: inline-block;
			width: 22px;
			height: 15px;
		}
		#head{
			color: gray;
			font-size: 14px;
			float: left;
		}
		#time
		{
			color: gray;
			font-size: 14px;
			float: left;
			height: 25px;
		}
		#see
		{
			float: left;
			width: 170px;
			height: 55px;
			background-color: rgb(255,87,34);
			border-radius: 5px;
			font-size: 14px;			
			text-align: center;
			line-height: 55px;
		}
		#see a{
			width: 170px;
			height: 55px;
			text-decoration: none;
			display: block;
			color: white;
		}
		#down{
			float: left;
			width: 170px;
			height: 55px;
			background-color: rgb(57,61,73);
			border-radius: 5px;
			font-size: 14px;
			text-align: center;
			line-height: 55px;
			left: 20px;
			margin-left: 30px;
		}
		#down a{
			width: 170px;
			height: 55px;
			text-decoration: none;
			display: block;
			color: white;
		}
		#qq{
			float: left;
			width: 170px;
			height: 55px;
			background-color: rgb(0,150,136);
			border-radius: 5px;
			font-size: 14px;
			text-align: center;
			line-height: 55px;
			left: 20px;
			margin-left: 30px;
		}
		#qq img{						
			width: 30px;
			height: 30px;
			margin-top: 10px;
			float: left;
			margin-left: 30px;
			margin-right: -30px;
		}
		
		#qq a{
			width: 170px;
			height: 55px;
			text-decoration: none;
			display: block;
			color: white;
		}
	</style>

</head>
<body>
	<div id="total">
		<div id="img"><img src="img/img1.jpg"></div>
		<div id="right">
			<div id="right_title" style="font-weight: bold;">第三期培训_前端基础</div>
			<div id="right_con"><p>PHP中文网第三期线上培训教程_前端基础学习内容: HTML5,CSS3,JavaScript,jQuery,Vue.js入门,Bootstrap,页面布局实战	《网站管理后台》的模板开发(综合应用以上所学知识)</p></div>
			<br>
			<div id="level">初级</div>	
			<div id="detail">
				<br>
				<div id="book"><img src="img/book.jpg"> 共34章节  |  </div>
				<div id="head"><img src="img/head.jpg">5530次播放  |  </div>
				<div id="time">添加时间：2018-8-20 13:21</div>
			</div>	
			<p></p>
			<div id="oper" style="overflow: hidden;">
				<div id="see"><a href="#">观看直播  |  ☆</a></div>				
				<div id="down"><a href="#">课件下载</a></div></a>
				<div id="qq"><a href="#"><img src="img/qq.png">QQ群交流</a></div>
			</div>
		</div>
	</div>
</body>
</html>

运行实例 »

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

上面是仿照PHP中文网的培训直播块做的，主要是用了浮动和行内块以及相关的div图文混排来做的。同样图片无法可视，结合预览图来看：

]7%0ICVMU)LW2Y[_OF49I@E.png

双飞翼布局：

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>双飞翼</title>
	
	<style type="text/css">
		/*设置头部与底部的样式*/
		.header,.footer{
			width: 100%;
			height: 60px;
			background-color: lightgreen;
		}	
		/*清楚底部左右的浮动*/
		.footer{
			clear: both;
		}

		/*设置头部和底部的主体内容的样式*/
		.content{
			width: 1000px;
			min-height: 100%;
			background-color:green; 
			margin: auto;
			text-align: center;
			line-height: 60px;
		}
		/*设置整个主体内容区域的样式*/
		.container{
			width: 1000px;
			margin: auto; 
			background-color: yellow;
			overflow: hidden;
		}

		/*设置主体区域中的中间区块的基本样式*/
		.wrap{
			width: 100%;
			background-color: cyan;
			float: left;
		}

		/*主题内容区*/
		.main{
			/*宽度在父级已设置*/
			min-height: 600px;
			background-color: wheat;

			/*设置左右外边距，双飞翼与圣杯的本质区别，向外挤压*/
			margin-left: 210px;
			margin-right: 210px;
		}

		/*双飞翼的左翼样式*/
		.left{
			width: 200px;
			min-height: 600px;
			background-color: lightblue;
			float: left;
			/*将左边区块“拉回”主体区域*/
			margin-left: -100%;
		}
		/*双飞翼的右翼样式*/
		.right {
			width: 200px;
			min-height: 600px;
			background-color: purple;
			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>

运行实例 »

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

双飞翼布局的设置，主要是浮动与margin的拉回动作

BLE%1HZM$E3KV~4)7(]2]O9.png

圣杯布局：

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>圣杯布局</title>

	<style type="text/css">
		/*设置头部底部的总体样式*/
		.header,.footer{
		width: 100%;
		height: 60px;
		background-color: lightgreen;
		}	
		
		/*清楚底部的左右浮动样式*/
		.footer{
			clear: both;
		}

		/*设置头部底部的主体样式*/
		.content{
			width: 1000px;
			min-height: 100%;
			background-color:green; 
			margin: 0 auto;
			text-align: center;
			line-height: 60px;

		}

		/*设置主体区域的总体样式*/
		.container{
			width: 600px;
			margin:auto;
			background-color: lightblue;
			overflow: hidden;	/*溢出隐藏*/
			padding: 0 200px;	/*左右内边距空出,为圣杯两侧挤出位置*/
		}

		/*直接设置主体样式*/
		.main{
			width: 100%;
			min-height: 650px;
			background-color: wheat;
			float: left;
		}

		.left{
			width: 200px;
			min-height: 650px;
			background-color: pink;
			float: left;
			margin-left: -100%;		/*因为父级“挤出了”左边的空格，所以左边区域刚好挤进去*/
			position: relative;
			left: -200px;
		}

		.right{
			width: 200px;
			min-height: 650px;
			background-color: pink;
			margin-left: -200px;	/*因为父级“挤出了”右边的空格，所以右边区域刚好挤进去*/
			float: left;
			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>

运行实例 »

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

与双飞翼不同的是圣杯的两侧布局是由父级元素挤出来的，相对来说，省了主体元素的外壳布局

}UL0BCH8G9`W$1M]@2`RW8G.png

这段类容不是一般的少，虽然多，理解起来并不难，但是写起来还是会有点懵，总体来说还是自己没有完全吃透的原因。对于布局的技术，还是得多写多练，不是说听懂了就可以的。主要是margin和padding布局以及定位布局之间的关联性，无他，唯手熟尔。

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

【8/10】---HTML初体验之html组成部分和样式属性搭配----2018/8/11--14:12

2018-08-11 17:49:16