css
visible:表示该层时可见的
hidden:该层被隐藏，是不可见的
inherit:表示子层或子层元素会继承父类或父类中元素的可见性
auto浏览器默认值crosshair:+精确定位default正常选择箭头
e-resize:箭头朝右help:帮助选择move移动ne-resize:箭头朝右上方new-resize箭头朝左上方n-resi\e手型text文本选择w-resize:箭头朝左wait等待
固定定位布局
indext.html
<!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=gb2312" />
<title>固定定位布局</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">标题</div>
<div id="content">
<div id="nav">左导航</div>
<div id ="main">内容</div>
<div id="nav2">右导航</div>
</div>
<div id="footer">版权</div>
</body>
</html>
style.css
*{
margin:0;
padding:inherit;
}
#header{
width:760px;
height:60px;
background:red;
margin:0 auto;
margin-bottom:10px;
}
#content{
width:760px;
border:1px solid black;
margin:0 auto;
position:relative;
}
#nav{
width:100px;
height:300px;
background:yellow;
}
#main{
width:560px;
height:300px;
background:blue;
position:absolute;
top:0px;
left:100px;
}
#nav2{
width:100px;
height:300px;
background:yellow;
position:absolute;
top:0;
left:660px;
}
#footer{
width:760px;
height:60px;
background:green;
margin:0 auto;
margin-top:10px;
}
固定浮动布局
indext.html
<!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=gb2312" />
<title>固定浮动布局</title>
<link href="style.css" rel="stylesheet" tyle="text/css" />
</head>
<body>
<div id="header"><h1>标题</h1></div>
<div id="content">
<div id="nav">左导航</div>
<div id="main">内容</div>
<div id="nav2">右导航</div>
</div>
<div id="footer">版权</div>
</body>
</html>
style.css
*{
margin:0;
padding:inherit;
}
body{
margin-top:10px;
}
#header{
width:760px;
height:60px;
background:red;
margin:0 auto;
margin-bottom:10px;
}
#header h1{
font-size:20px;
color:white;
font-weight:bolder;
text-align:center;
line-height:60px;
}
#content{
width:760px;
margin:0 auto;
}
#nav{
width:100px;
height:300px;
background:yellow;
float:left;
margin-bottom:10px;
}
#main{
width:560px;
height:300px;
background:blue;
float:left;
margin-bottom:10px;
}
#nav2{
width:100px;
height:300px;
background:yellow;
float:right;
margin-bottom:10px;
}
#footer{
clear:both;
width:760px;
height:60px;
background:green;
margin:0 auto;
}
流体布局
indext.html
<!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=gb2312" />
<title>无标题文档</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">标题</div>
<div id="nav">左导航</div>
<div id="main">内容</div>
<div id="nav2">右导航</div>
<div id="footer">版权</div>
</body>
</html>
style.css
*{
margin:0;
padding:0;
}
body{
margin:10px;
}
#header{
border:1px solid blue;
height:60px;
text-align:center;
line-height:60px;
background:#CCFFFF;
margin-bottom:10px;
}
#nav{
width:20%;
height:300px;
background:red;
float:left;
margin-bottom:10px;
margin-right:5%;
}
#main{
width:50%;
height:300px;
background:yellow;
float:left;
margin-bottom:10px;
}
#nav2{
width:20%;
height:300px;
background:green;
float:right;
}
#footer{
clear:both;
height:60px;
background:blue;
}