CSS实现网页顶端或底部固定层
原创
<!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" />
<title>无标题文档</title>
<style type="text/css">
body
{
margin:0px;
padding:0px;
margin-top:60px;
margin-bottom:60px;
}
#div_nav_zone_top
{
position:absolute;
margin-top:0px;
z-index:3;
width:100%;
height:60px;
margin: 0px auto 0px auto;
top: 0px;
}
#div_nav
{
position:fixed;
width:100%;
background-color:#CCC;
padding:10px;
filter: alpha(opacity=45); opacity:0.45;
color:black;
}
#div_nav_zone_bottom
{
position:absolute;
z-index:3;
width:100%;
height:60px;
margin: 0px auto 0px auto;
bottom: 0px;
}
#div_nav_zone_right
{
position:absolute;
z-index:5;
heigth:1000px;
width:120px;
right:0px;
background-color:#333;
}
#div_ul
{
position:fixed;
height:50px;
}
ul,li
{
margin:0px;
}
li
{
list-style:none;
}
</style>
</head>
<body>
1 <br/>2 <br/>3 <br/>4 <br/>5 <br/>6 <br/>7 <br/>8 <br/>9 <br/>10 <br/>
<p>sd</p>
<p>f</p>
<p>as</p>
<p>df</p>
<p>a</p>
<p>sdf</p>
<p>a</p>
<p>dsf</p>
<p> </p>
<p>ads</p>
<p>f</p>
<p>ads</p>
<p> </p>
<p>ad</p>
<p>sf AS
D
as
d
SA
D
sad
SA
D
a
d
A
D
a </p>
<div id="div_nav_zone_top" >
<div id="div_nav">
该块DIV顶部固定，1.配置文件写到xml里，并添加注释属性。全局变量放到一个专用类里，应用初始化时读取xml，赋值。<br />
1.配置文件写到xml里，并添加注释属性。全局变量放到一个专用类里，应用初始化时读取xml，赋值</div>
</div>
<div id="div_nav_zone_bottom" >
<div id="div_nav">
该块DIV顶部固定，1.配置文件写到xml里，并添加注释属性。全局变量放到一个专用类里，应用初始化时读取xml，赋值。<br />
1.配置文件写到xml里，并添加注释属性。全局变量放到一个专用类里，应用初始化时读取xml，赋值</div>
</div>
<div id="div_nav_zone_right" >
<div id="div_ul">
<ul>
<li>边栏菜单1 </li>
<li>边栏菜单2 </li>
<li>边栏菜单3 </li>
<li>边栏菜单4 </li>
</ul>
</div>
</div>
</body>
</html> </pre> 原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
