CSS页面布局与定位

ToOak · Aug 22, 2016 · 92d92d3 · 92d92d3
1 parent 9aecf23
commit 92d92d3
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 0 deletions.
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,72 @@
+@charset "utf-8";
+/* CSS Document */
+
+#layout{
+	background-color:#cccccc;
+	border:2px solid #333333;
+	/*	width:80%; 		/* 一列宽度自适应 */
+	/*	一列宽度固定	*/
+	width:300px;
+	height:30px;
+	/* 当margin使用两个参数，第一个上下边距，第二个左右边距，此处设计呈现出居中状态 */
+	margin:0px auto;
+}
+
+/*
+	两列 左列固定 右列宽度自适应
+	若使二列固定宽度居中可在外层套一个div
+*/
+#left_2{
+	background-color:#cccccc;
+	border:2px solid #333333;
+	/* width:20%; */
+	width:100px;
+	height:30px;
+	float:left;
+}
+#right_2{
+	background-color:#cccccc;
+	border:2px solid #333333;
+	height:30px;
+	/* width:70%;
+	float:left; */
+}
+
+/*
+	三列浮动 中间列自适应
+	absolute通过z-index属性设置其重叠的顺序 大值对象层级位于小值对象之上
+*/
+#left_3{
+	background-color:#cccccc;
+	border:2px solid #333333;
+	width:100px;
+	height:100%;  /* 高度自适应 */
+	position:absolute;
+	top:68px;
+	left:0px;
+	z-index:1;
+}
+#right_3{
+	background-color:#cccccc;
+	border:2px solid #333333;
+	width:100px;
+	height:300px;
+	position:absolute;
+	top:68px;
+	right:0px;
+}
+#center_3{
+	background-color:#cccccc;
+	border:2px solid #333333;
+	height:300px;
+	margin-left:104px;
+	margin-right:104px;
+}
+body{
+	margin:0px;
+	padding:0px;
+}
+/* 用于高度自适应 */
+html,body{
+	height:100%;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<link rel="stylesheet" rev="stylesheet" href="css/index.css" type="text/css" />
+<title>CSS页面布局与定位</title>
+</head>
+<body>
+	<div id="layout">一列固定宽度</div>
+    <div id="left_2">左列</div>
+    <div id="right_2">右列</div>
+    <div id="left_3">左列</div>
+    <div id="center_3">中列</div>
+    <div id="right_3">右列</div>
+</body>
+</html>