Blogger Information
Blog 24
fans 0
comment 0
visits 16304
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
浮动与经典布局的-2018年8月17日
鱼越龙门的博客
Original
853 people have browsed it

今天学习了浮动和经典布局的方式,尤其要注意双飞翼布局和圣杯布局的布局方式

代码:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>QQkefu固定</title>
	<style>
	 ul,li{
	 	margin:0;
	 	padding: 0;
	 }
		.box{
			width: 100px;
			height: 100px;
			position: fixed;
			right: 100px;
			bottom: 100px;
			/*border:1px solid red;*/
		}
		.box ul{
			list-style: none;
		}
		.box ul li a{
			text-decoration-line: none;
			
		}
		.close{
			position: absolute;
			right:0;
			top:0;
		}
	</style>
</head>
<body>
	<div class="box">
	<span class="close" onclick="this.parentNode.style.display='none'">X</span>
	<br>
		<ul>
			<li><a href=""><img src="1.jpg" width="20px" height="20px" align="absmiddle" alt="QQ"> QQ1</a></li>
			<li><a href=""><img src="1.jpg" width="20px" height="20px" align="absmiddle" alt="QQ"> QQ2</a></list>
		</ul>
	</div>
</body>
</html>

运行实例 »

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

代码二:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图文混排</title>
	<style>
		h2,p{margin:0;}
		.box{
			width: 600px;
			background-color: #ccc;
			font-size: 1rem;
			color:#555;
			border-radius: 1rem;
			padding: 20px;
		}
		.box h2{
			text-align: center;
			margin-bottom: 20px;
		}
		.box img{
			width: 250px;
			float:left;
			margin-right: 20px;
			margin-bottom:20px;
		}
		.box p{
			text-indent: 2rem;
			line-height: 1.5rem;
		}
	</style>
</head>
<body>
<div class="box">
	<h2><<荷花>></h2>
	<img src="2.jpg" alt="">
	<p>荷花(Lotus flower)属山龙眼目,莲科,是莲属二种植物的通称。又名莲花、水芙蓉等。是莲属多年生水生草本花卉。地下茎长而肥厚,有长节,叶盾圆形。花期6至9月,单生于花梗顶端,花瓣多数,嵌生在花托穴内,有红、粉红、白、紫等色,或有彩纹、镶边。坚果椭圆形,种子成卵形。荷花种类很多,分观赏和食用两大类。原产亚洲热带和温带地区,中国早在周朝就有栽培记载。荷花全身皆宝,藕和莲子能食用,莲子、根茎、藕节、荷叶、花及种子的胚芽等都可入。其出污泥而不染之品格恒为世人称颂。“接天莲叶无穷碧,映日荷花别样红”就是对荷花之美的真实写照。荷花“中通外直,不蔓不枝,出淤泥而不染,濯清涟而不妖”的高尚品格,历来为古往今来诗人墨客歌咏绘画的题材之一。</p>
</div>
</body>
</html>

运行实例 »

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

代码三:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>双飞翼布局</title>
	<style>
          .header,.footer{
          	width: 100%;
          	height: 60px;
          	background-color: #ccc;
          }
          .footer{
          	clear: both;
          }
          .content{
          	width: 1000px;
          	min-height: 100%;
          	margin:auto;
          	text-align: center;
          	line-height: 60px;
          	background-color: blue;
          }
        .container{
        	width: 1000px;
        	margin:auto;
        	overflow: hidden;
        	background-color: red;
        }
        .wrap{
        	width: 100%;
        	background-color: gray;
        	float: left;

        }
        .main{
        	min-height: 600px;
        	margin: 0 200px;
        	background-color: wheat;
        }
        .left{
        	width: 200px;
        	min-height: 600px;
        	float: left;
        	background-color: yellow;
        	margin-left: -100%

        }
        .right{
        	width: 200px;
        	min-height: 600px;
        	float: left;
        	background-color: pink;
        	margin-left:-200px;
        }
	</style>
</head>
<body>
	<div class="header"><div class="content">网站头部</div></div>
	<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>

运行实例 »

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

代码四:

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
	<style>
		.header,.footer{
			width: 100%;
			height: 60px;
			background-color: lightgray;
		}
		.content{
			width: 1000px;
			min-height: 100%;
			background-color:gray;
			margin:auto;
			text-align: center;
			line-height: 60px;
		}
		.container{
			width: 600px;
			margin:auto;
			overflow: hidden;
			padding: 0 200px;
			background-color: yellow;
		}
		.main{
			width: 100%;
			min-height: 650px;
			background-color: #6CF;
			float: left;
		}
		.left{
			width: 200px;
			min-height: 650px;
			background-color: #FD6FCF;
			float: left;
			margin-left:-100%;
			position: relative;
			left: -200px;
		}
		.right{
			width: 200px;
			min-height: 650px;
			background-color: #FC0107;
			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>

运行实例 »

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

 

作业五

圣杯布局和双飞翼布局解决的问题是一样的,就是两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。

双飞翼布局和圣杯的区别是双飞翼的兼容性更好

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