让IE6支持Fixed
做个底部导航
像同学网的导航那样的 大家都可能用到 可以模仿下
aspx文件
aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="buttom_position.aspx.cs"
Inherits="buttom_position" %>
<!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 runat="server">
<title>无标题页</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body class="home">
<form id="form1" runat="server">
<div id="tongxue">
<ul style="list-style:none">
<li style="width:100px; height:100px;">
<div>
<img src="zoomimage/images/bw2.jpg" style="width:100px; height:100px;" />
</div>
<div style="position: relative; left:90px; top:-100px; ">
<img src="zoomimage/images/ajax_small.gif" onclick="alert()"/></div>
</li>
<li style="width:100px; height:100px;">
<div>
<img src="zoomimage/images/bw2.jpg" style="width:100px; height:100px;" />
</div>
<div style="position: relative; left:90px; top:-100px; ">
<img src="zoomimage/images/ajax_small.gif" /></div>
</li>
</ul>
<ul id="txweblist" class="clearfix">
<li class="" style="position:relative" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
</ul>
</div>
<!--presence-->
<div id="presence">
<div class="innerPresence">
<div class="presence_logo">
<a class="presence_logo_btn" href="javascript:void(0);" onclick="presence.appToggle();">
</a>
</div>
</div>
</div>
</form>
</body>
</html>
css 文件
css
/* CSS Document */
/*common*/
* {
margin:0px;
padding:0px;
}
html {
_overflow:hidden
}
body {
font-family:Tahoma, SimSun;
font-size:12px;
color:#333;
margin:0;
padding:0;
_height:100%;
_overflow:hidden;
_position:relative;
}
#tongxue {
_height:100%;
_overflow:auto;
_position:relative;
}
/*presence*/
#presence {
position:fixed;
_position:absolute;
bottom:0;
left:10px;
right:10px;
_right:30px;
z-index:500;
background:transparent url('http://site.tongxueimg.com/v5/build/images/presence/bar_bg.gif?v=5') repeat-x scroll 0 0;
height:26px;
}
.innerPresence {
background:transparent url('http://site.tongxueimg.com/v5/build/images/presence/bar_bg.gif?v=5') repeat-x scroll 0 0;
height:26px;
}
/*logo*/
.presence_logo {
float:left;
border-right:1px solid #027F78;
border-left:1px solid #027F78;
border-bottom:1px solid #027F78;
position:relative;
background:#22ac38 url('http://site.tongxueimg.com/v4/def5/images/presence-btn-logoico.gif?v=5') no-repeat scroll 0 0;
}
.presence_logo_btn {
padding-left:37px;
display:block;
height:24px;
line-height:24px;
margin:1px 0 0;
width:63px;
text-align:left;
color:#ffffff;
}
源码下载
像同学网的导航那样的 大家都可能用到 可以模仿下
aspx文件
aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="buttom_position.aspx.cs"
Inherits="buttom_position" %>
<!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 runat="server">
<title>无标题页</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body class="home">
<form id="form1" runat="server">
<div id="tongxue">
<ul style="list-style:none">
<li style="width:100px; height:100px;">
<div>
<img src="zoomimage/images/bw2.jpg" style="width:100px; height:100px;" />
</div>
<div style="position: relative; left:90px; top:-100px; ">
<img src="zoomimage/images/ajax_small.gif" onclick="alert()"/></div>
</li>
<li style="width:100px; height:100px;">
<div>
<img src="zoomimage/images/bw2.jpg" style="width:100px; height:100px;" />
</div>
<div style="position: relative; left:90px; top:-100px; ">
<img src="zoomimage/images/ajax_small.gif" /></div>
</li>
</ul>
<ul id="txweblist" class="clearfix">
<li class="" style="position:relative" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
<li class="" >aaa<br /></li>
</ul>
</div>
<!--presence-->
<div id="presence">
<div class="innerPresence">
<div class="presence_logo">
<a class="presence_logo_btn" href="javascript:void(0);" onclick="presence.appToggle();">
</a>
</div>
</div>
</div>
</form>
</body>
</html>
css/* CSS Document */
/*common*/
* {
margin:0px;
padding:0px;
}
html {
_overflow:hidden
}
body {
font-family:Tahoma, SimSun;
font-size:12px;
color:#333;
margin:0;
padding:0;
_height:100%;
_overflow:hidden;
_position:relative;
}
#tongxue {
_height:100%;
_overflow:auto;
_position:relative;
}
/*presence*/
#presence {
position:fixed;
_position:absolute;
bottom:0;
left:10px;
right:10px;
_right:30px;
z-index:500;
background:transparent url('http://site.tongxueimg.com/v5/build/images/presence/bar_bg.gif?v=5') repeat-x scroll 0 0;
height:26px;
}
.innerPresence {
background:transparent url('http://site.tongxueimg.com/v5/build/images/presence/bar_bg.gif?v=5') repeat-x scroll 0 0;
height:26px;
}
/*logo*/
.presence_logo {
float:left;
border-right:1px solid #027F78;
border-left:1px solid #027F78;
border-bottom:1px solid #027F78;
position:relative;
background:#22ac38 url('http://site.tongxueimg.com/v4/def5/images/presence-btn-logoico.gif?v=5') no-repeat scroll 0 0;
}
.presence_logo_btn {
padding-left:37px;
display:block;
height:24px;
line-height:24px;
margin:1px 0 0;
width:63px;
text-align:left;
color:#ffffff;
}
