Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 浮动与经典布局方式-2018年8月17日22时00分
Blogger Information
Blog 8
fans 0
comment 0
visits 4511
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
浮动与经典布局方式-2018年8月17日22时00分
ZeroUp的博客
Original
449 people have browsed it

双飞翼布局(含图文混排及以固定定位布置的QQ客*服)

实例
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动与经典布局方式(双飞翼)</title>
</head>
<style>
	header, footer {
		width: 100%;
		height: 60px;
		background-color: #ccc;
	}
	
	footer {
	        clear: both;
	}

	.content {
		width: 1000px;
		min-height: 100%;
		background-color: #888;
		margin: auto;
		text-align: center;
		line-height: 60px;
	}

	.container {
		width: 1000px;
		margin: auto;
		background-color: wheat;
		overflow: hidden;
	}

	.wrap {
		width: 100%;
		background-color: lightblue;
		float: left;
	}

	.main {
		min-height: 500px;
		margin: 0 200px;
		background-color: cyan;
		float: left;
	}

	.left {
		width: 200px;
		float: left;
		min-height: 500px;
		margin-left: -100%;
		background-color: skyblue;
	}

	.right {
		width: 200px;
		color: white;
		min-height: 500px;
		float: left;
		margin-left: -200px;
		background-color: navy;
	}

	.mixed {
		border-radius: 8px;
		background-color: wheat;
		margin: 0 20px;
		padding: 8px;
	}

	.main h2, .mixed h3 {
		text-align: center;
	}

	.mixed .m_content {
		padding: 0 0.5rem;
		text-indent: 2rem;
	}

	.mixed img {
		float: left;
		margin-right: 15px;
		border-radius: 8px;
	}

	.mixed .m_content p {
		line-height: 1.6rem;
	}
	.fixed_box {
		position: fixed;
		right: 1px;
		bottom: 1px;
		background-color: white;
	}

	.fixed_box span {
		display: block;
		background-color: dodgerblue;
		padding:5px;
	}

	hr {
		margin: 0;
	}

	.fixed_box ul {
		padding: 0;
		text-align: center;
		margin: 0;
	}

	.fixed_box ul li {
		list-style-type: none;
	}

	.fixed_box ul li:before {
		content: url('QQ1.png');
		position: relative;
		top: 3px;
		right: 3px;
	}

	.fixed_box ul li+ li {
		border-top: 2px solid #FA9D4D;
	}

	.fixed_box a {
		color: red;
		text-decoration: none;
		line-height: 30px;
	}

	.fixed_box li:hover {
		background-color: tomato;
	}

	.fixed_box a:hover {
		color: white;
		text-shadow: 1px 1px 1px black;
	}
</style>
<body>
	<!-- 头部 -->
	<header>
		<div class="content">双飞翼布局网站头部</div>
	</header>
	<!-- /头部 -->
	<div class="container">
		<div class="wrap">
			<div class="main">
				<h2>主体内容部分:浮动实现图文混排</h2>
				<div class="mixed">
					<h3>微信后台架构从0到1</h3>
					<img src="http://www.52im.net/data/attachment/forum/201603/24/025849lqewrpixspeslmri.png" alt="">
					<div class="m_content"><p>在微信发布后的4个多月里，我们经历了发布后火爆注册的惊喜，也经历了随后一直不温不火的困惑。这一时期，微信做了很多旨在增加用户好友量，让用户聊得起来的功能。打通腾讯微博私信、群聊、工作邮箱、QQ/邮箱好友推荐等等。对于后台而言，比较重要的变化就是这些功能催生了对异步队列的需求。例如，微博私信需要跟外部门对接，不同系统间的处理耗时和速度不一样，可以通过队列进行缓冲；群聊是耗时操作，消息发到群后，可以通过异步队列来异步完成消息的扩散写等等。</p></div>
				</div>



			</div>
		</div>

		<div class="left">左侧边栏</div>
		<div class="right">右侧边栏</div>
	</div>
	<!-- 底部 -->
	<footer>
		<div class="content">网站底部</div>
	</footer>
	<!-- /底部 -->
	<!-- QQ在线客*服 -->
	<div class="fixed_box">
	<span>QQ在线客*服</span>
	<hr>
		<ul>
			<li><a href="">咨询A</a></li>
			<li><a href="">客*服B</a></li>
			<li><a href="">客*服C</a></li>
			<li><a href="">客*服D</a></li>
			<li><a href="">客*服E</a></li>
		</ul>
	</div>
	<!-- /QQ在线客*服 -->

</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%;
			background-color: #888;
			margin: auto;
			text-align: center;
			line-height: 60px;
		}

		.container {
			width: 600px;
			background-color: wheat;
			overflow: hidden;
			padding: 0 200px;
			margin: auto;
		}

		.container .main {
			min-height: 600px;
			width: 100%;
			float: left;
			background-color: coral;
		}

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

		.container .right {
			width: 200px;
			min-height: 600px;
			float: left;
			margin-left: -200px;
			position: relative;
			left: 200px;
			background-color: yellowgreen;
		}


	</style>
</head>
<body>
	<!-- 头部 -->
	<header>
		<div class="content">圣杯布局网站头部</div>
	</header>
	<!-- /头部 -->
	<!-- 内容部分 -->
	<div class="container">
		<div class="main">主体部分</div>
		<div class="left">左侧边栏</div>
		<div class="right">右侧边栏</div>
	</div>
	<!-- /内容部分 -->
	<!-- 底部 -->
	<footer>
		<div class="content">网站底部</div>
	</footer>
	<!-- /底部 -->
</body>
</html>
运行实例 »
点击 "运行实例" 按钮查看在线实例

手抄部分：

双飞翼与圣杯fixed.jpg

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