css

最新推荐文章于 2025-11-05 20:48:02 发布

最新推荐文章于 2025-11-05 20:48:02 发布 · 70 阅读

文章标签：

本文深入探讨了网页布局的三种常见方式：固定定位布局、固定浮动布局与流体布局，详细解释了每种布局的特点、实现方式及应用场景。

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>
</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>

<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>

<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;
}