关于css的布局

最新推荐文章于 2024-05-14 18:25:49 发布

十年树木_2015

最新推荐文章于 2024-05-14 18:25:49 发布

阅读量347

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/qq_30337695/article/details/51857434

版权

css 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1、淘宝网的圣杯布局：

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>圣杯布局</title>
	<style type="text/css">
	body{
		padding: 0px 200px 0px 100px;
		min-width: 600px; 		/* 设置页面最小宽度，防止缩小浏览器div错位 */
	}
	.middle{
		width: 100%;
		height: 200px;
		background: red;
		float: left;
		word-break: break-all;  /* 自动换行 */
	}
	.left{
		width: 100px;
		height: 200px;
		background: blue;
		float: left;
		margin-left: -100%;
		position: relative;
    	left: -100px;
	}
	.right{
		width: 200px;
		height: 200px;
		background: green;
		float: left;
		margin-left: -200px;
		position: relative;
    	left: 200px;
	}
	</style>
</head>

<body>
<div class="middle">
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
</div>
<div class="left"></div>
<div class="right"></div>
</body>
<script type="text/javascript">
</script>
</html>

2、双飞翼布局，起源淘宝网

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>双飞翼布局</title>
	<style type="text/css">
	body{
		min-width: 600px; 		/* 设置页面最小宽度，防止缩小浏览器div错位 */
	}
	.middle{
		width: 100%;
		height: 200px;
		background: red;
		float: left;
	}
	.inner {
		margin: 0px 200px 0px 100px;
		word-break: break-all;  /* 自动换行 */
	}
	.left{
		width: 100px;
		height: 200px;
		background: blue;
		float: left;
		margin-left: -100%;
	}
	.right{
		width: 200px;
		height: 200px;
		background: green;
		float: left;
		margin-left: -200px;
	}
	</style>
</head>

<body>
<div class="middle">
	<div class="inner"> <!-- 双飞翼布局 内部添加了一个盒子 -->
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
		my name is andy
	</div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
<script type="text/javascript">
</script>
</html>

3、logo的优化与seo：

上面的双飞翼布局，在左侧显示logo：代码：