search

博客列表 >20180817固定定位、浮动冲突、圣杯布局和双飞翼布局

20180817固定定位、浮动冲突、圣杯布局和双飞翼布局

乂汁的blog
乂汁的blog原创
2018年08月20日 19:31:44946浏览

一、概述

本课主要讲述了固定定位、浮动、浮动冲突和解决方式、绝对定位三列布局（为了引导圣杯和双飞翼）、圣杯三列布局和双飞翼三列布局。对对选择器能够熟练使用，对相对定位、绝对定位、浮动加强巩固。

二、作业内容

  1. QQ联系我们-固定定位练习

    实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQ联系我们</title>
	<style type="text/css">
		body{
			margin: 0;
			height: 2000px;
		}
		.main a img{
			width: 20px;
			position:relative; 
			top:2.5px;	/*让图片对齐文字*/		
		}
		.qqborder img{
			width: 30px;
			position:relative; 
			left:2.5px;
			top:10px;
					
		}
		.qqborder {
			width: 200px;
			height: 250px;
			background-color: lightblue;
			display: table-cell;
			vertical-align: middle;/*垂直居中，tablecell要写在父级容器里面*/
			position: fixed;
			bottom: 0;
			right: 0;

		}
		.main{
			width: 190px;
			height: 180px;
			background-color: white;
			border-style: 3px solid lightblue;
			margin: auto;

		}
		

	</style>
</head>
<body>
<div class="qq">
	<div class="qqborder">

		<img src="image/qq1.jpg"> <h3 style="display: inline;color: white;">CONTACT US</h3>
		
		<br><br>
		<div class="main">
		在线kf01：<a href="https://qq.com"><img src="image/qq1.jpg">在线交谈</a><br><br>
		在线kf02：<a href="https://qq.com"><img src="image/qq1.jpg">在线交谈</a><br><br>
		在线kf03：<a href="https://qq.com"><img src="image/qq1.jpg">在线交谈</a><br><br>
		在线kf04：<a href="https://qq.com"><img src="image/qq1.jpg">在线交谈</a><br><br>
	    </div>

	</div>
</div>
	
	
</body>
</html>

    运行实例 »

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

    结果图：hwqq.png

  2. 图文混排



    实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图文混排</title>
	<style type="text/css">
		.car img{
		width: 300px;
		float: left;
		margin-right: 1rem;
		margin-bottom: 1rem;
		}
		.car h2{
			text-align: center;
		}
		.car{
			width: 600px;
			height: 400px;
			background-color: #efefef;
			border-radius: 1rem;
			font-size: 1rem;
			padding: 20px;
		}
		.car p{
			text-indent: 2rem;
            line-height: 1.5rem;
		}
		.car h4{
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="car">
		<h2>5款实力派SUV即将来袭</h2>
		<img src="image/car.png">
		<h4 >雷克萨斯UX<br>
		上市时间：2018年8月</h4>
        <p>
新车特点：大尺寸悬浮式中控屏、Dynamic Force系列2.0L直列四缸发动机、Direct Shift CVT变速箱、最大热效率41%

据了解，雷克萨斯UX将于8月31日开幕的成都车展国内首发。新车早在2018日内瓦车展全球首发，是雷克萨斯首款基于GA-C平台打造的车型，定位豪华入门级SUV，未来竞争对手为奔驰GLA、奥迪Q2、宝马X2等车型。雷克萨斯UX沿用了概念车设计元素，前脸家族式纺锤形进气格栅搭配非对称式菱形头灯组，内嵌贯穿式的7型装饰条，格栅中央的车标在黑得发亮的中网内。
	</p>
	</div>
</body>
</html>

    运行实例 »

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

    结果图：

    hwtwhp.png

  3. 绝对定位布局

    实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>绝对定位三列布局</title>
	<style type="text/css">
		.head, .foot{
			width: 100%;
			height: 60px;
			margin-bottom: 10px;
			margin-top: 10px;
			/*background-color: #efefef;*/
		}
		.content{
			width: 1000px;
			min-height: 100%;
			background-color: grey;
			margin: auto;
			text-align: center;
			line-height: 60px;
		}
		.main{
			/*定位父级*/
			position: relative;
			width: 1000px;
			height: 450px;
			margin: auto;
			background-color: wheat;
		}
		.left{
			position: absolute;
			top: 0;
			left: 0;
			width: 200px;
			min-height:100%;
			background-color: lightgreen; 
		}
		.right{
			position: absolute;
			top: 0;
			right: 0;
			width: 200px;
			min-height:100%;
			background-color: lightgreen; 
		}
		.center{
			margin: 0 210px;
			background-color: lightblue;
			min-height: 100%;
		}
	</style>
</head>
<body>
	<div class="head">
		<div class="content">头</div>
	</div>


	<div class="main">
		<div class="left">左</div>
		<div class="center">中</div>
		<div class="right">右</div>
	</div>
	<div class="foot">
		<div class="content">底</div>
	</div>
</body>
</html>

    运行实例 »

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

    结果图：

    hw1.png

  4. 双飞翼布局

    实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼三列布局</title>
	<style type="text/css">
		.head, .foot{
			width: 100%;
			height: 60px;
			/*margin-bottom: 10px;
			margin-top: 10px;*/
			/*background-color: #efefef;*/
		}
		.content{
			width: 1000px;
			min-height: 100%;
			background-color: grey;
			margin: auto;
			text-align: center;
			line-height: 60px;

		}
		.footer {
            /*底部二边不能有浮动元素*/
            clear: both;
        }
		.container{
			width: 1000px;
			margin:auto;
			background-color: blue;
			overflow: hidden;/*这里不懂*/
		}
		.wrap{
			width: 100%;/*(1000px)*/
			background-color: cyan;
			float: left;
		}
		.main{
			background-color: wheat;
			min-height: 450px;
			margin: 0 210px;/*给左右出空间*/
		}
		.left{
			width: 200px;
			min-height:450px;
			background-color: lightblue;
			float: left;
			margin-left: -100%;
		}
		.right{
			width: 200px;
			min-height:450px;
			background-color: yellow;
			float: left;
			margin-left:-200px;
		}
	</style>
</head>
<body>
	<div class="head">
		<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="foot">
		<div class="content">底</div>
	</div>
</body>
</html>

    运行实例 »

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

    结果图：

    2.png

  5. 圣杯布局

    实例

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯三列布局</title>
	<style type="text/css">
		.head, .foot{
			width: 100%;
			height: 60px;
			
			background-color: #efefef;
		}
		
		.content{
			width: 1000px;
			min-height: 100%;
			background-color: grey;
			margin: auto;
			text-align: center;
			line-height: 60px;
		}
		.foot{
			clear: both;
		}

		.container{
			width: 600px;

			margin: auto;
			background-color: yellow;
		}
		.container .main{
			
			width: 100%;
			min-height: 450px;
			background-color: wheat;
			float: left;

		}
		.container .left{
			background-color: green;
			width: 200px;
			min-height: 450px;
			float: left;
			margin-left: -100%;
			position: relative;
			left: -200px;
			
		}
		.container .right{
			background-color: lightblue;
			width: 200px;
			min-height: 450px;
			float: left;
			margin-left: -200px;
			position: relative;
			right: -200px;

		}

	</style>
</head>
<body>
	<div class="head">
		<div class="content">头</div>
	</div>
	<div class="container">
		
		<div class="main">主体</div>

		<div class="left">左</div>
		
		<div class="right">右</div>
	</div>
	<div class="foot">
		<div class="content">底</div>
	</div>
</body>
</html>

    运行实例 »

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

    结果图：

    3.png

三、总结分析。

1、固定定位、浮动、浮动冲突和解决方式、

2、绝对定位三列布局（为了引导圣杯和双飞翼）、圣杯三列布局和双飞翼三列布局。

      重点注意：.foot{clear: both;}

3、对对选择器能够熟练使用，对相对定位、绝对定位、浮动加强巩固。

4、.head, .foot{}要写逗号。

5、圣杯和双飞翼区别（手写)

sx.jpg

上一条：box、element alignment、position（8月16日作业）下一条：盒模型 定位 0816
固定定位、浮动冲突、绝对定位布局、圣杯布局和双飞翼布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多