绝对浏览器窗口定位positio:FIXED;

下拉后出现返回顶部按钮

图片是我们美工给做的。55*55px,中间缝隙3px。

css:

html,body {
height:100%
}
html,body,form,input,span,p,img,ul,ol,li,dl,dt,dd {
margin:0;
padding:0;
border:0
}
ul,ol {
list-style:none
}
body {
background:#fff;
font:12px/1.5 arial,sans-serif;
text-align:center;
height:3000px;
}
a {
text-decoration:none
}
a:hover {
text-decoration:underline
}

#moquu_top,#moquu_f1,#moquu_f2,#moquu_f3,#moquu_f4 {
z-index:2;
width:55px;
height:55px;
right:50%;
position:fixed;
cursor:pointer;
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))
}

#moquu_f1 {
top:360px;
_margin-top:360px
}
#moquu_f1 a {
background:url(../images/fbtn.png) -3px -1px;
right:0;
float:left;
width:55px;
height:55px;
text-indent:-9999px
}
#moquu_f1 a:hover {
background:url(../images/fbtn.png) -58px -1px
}
#moquu_f2 {
top:422px;
_margin-top:422px
}
#moquu_f2 a {
background:url(../images/fbtn.png) -3px -59px;
width:55px;
height:55px;
right:0;
float:left;
text-indent:-9999px
}
#moquu_f2 a:hover {
background:url(../images/fbtn.png) -58px -59px
}
#moquu_f3 {
top:484px;
_margin-top:484px
}
#moquu_f3 a {
background:url(../images/fbtn.png) -3px -117px;
width:55px;
height:55px;
right:0;
float:left;
text-indent:-9999px
}
#moquu_f3 a:hover {
background:url(../images/fbtn.png) -58px -117px
}
#moquu_f4 {
top:546px;
_margin-top:484px
}
#moquu_f4 a {
background:url(../images/fbtn.png) -3px -175px;
width:55px;
height:55px;
right:0;
float:left;
text-indent:-9999px
}
#moquu_f4 a:hover {
background:url(../images/fbtn.png) -175px -175px
}

#moquu_top {
top:608px;
_margin-top:608px;
background:url(../images/fbtn.png) -3px -231px;
width:55px;
height:55px
}

#moquu_top:hover {
background:url(../images/fbtn.png) -62px -231px
}
.moquu_f1,.moquu_f2 {
position:relative;
z-index:2
}
.moquu_f1 a:hover .moquu_f1h,.moquu_f2 a:hover .moquu_f2h {
display:block
}

body:

<div id="moquu_f1" class="moquu_f1"><a href="javascript:void(0)"> <div class="moquu_f1h"></div></a></div>
<div id="moquu_f2" class="moquu_f2"><a href="javascript:void(0)"> <div class="moquu_f2h"></div></a></div>
<div id="moquu_f3"><a href="javascript:void(0)" class='moquu_f3'> </a></div>
<div id="moquu_f4"><a href="javascript:void(0)" class='moquu_f3'> </a></div>
<a id="moquu_top" href="javascript:void(0)"></a>

哦对了。JS两个 jquery1.5.1min&jquery

CSS了一个浮动导航条的更多相关文章

  1. 三角形变形记之纯css实现的分布导航条效果

    三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...

  2. 使用css3和伪元素制作的一个立体导航条

    使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...

  3. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  4. css实现京东顶部导航条

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  5. Css实现一个菜单导航

    提要:使用大div定位设置为relative,子div设置为absolute实现菜单下拉 实现代码: <!DOCTYPE html> <html lang="en" ...

  6. css ul li 制作导航条

    <html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...

  7. 使用css实现移动端导航条滚动

    <div class="tab"> <div class="table-item"> <span class="tab- ...

  8. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  9. Bootstrap每天必学之导航条

    http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...

随机推荐

  1. Windows 7的系统还原,你用了吗?

    在Windows XP时代可能人们最常用的系统还原工具就是Ghost,一来因为Ghost的还原非常彻底,二来由于备份Windows XP所占用的硬盘空间并不是很大,所以习惯于安装完操作系统以后就把系统 ...

  2. [Leetcode][Python]22: Generate Parentheses

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 22: Generate Parentheseshttps://oj.leet ...

  3. 轻奢当道业绩逆势增长 Kate Spade联手韩国衣恋开拓中国市场_商场报道_中国时尚品牌网

    轻奢当道业绩逆势增长 Kate Spade联手韩国衣恋开拓中国市场_商场报道_中国时尚品牌网 轻奢当道业绩逆势增长 Kate Spade联手韩国衣恋开拓中国市场

  4. Trailing Zeroes (III)(lightoj 二分好题)

    1138 - Trailing Zeroes (III)   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit:  ...

  5. Ubuntu启动、停止、重新启动MySQL,查看MySQL错误日志、中文编码错误

    1)启动: sudo /etc/init.d/mysql start 2)停止: sudo /etc/init.d/mysql stop 3)重新启动: sudo /etc/init.d/mysql ...

  6. WinForm中快捷键与组合按键的设置方法

    每个窗体都有这样3个事件:KeyDown.KeyPress.KeyUp,KeyDown和KeyPress都是按键按下事件,但KeyDown用的是KeyCode跟键盘各个按键相对应,它对应Keys枚举, ...

  7. BZOJ 1565: [NOI2009]植物大战僵尸( 最小割 )

    先拓扑排序搞出合法的, 然后就是最大权闭合图模型了.... --------------------------------------------------------------------- ...

  8. HTML中小问题

    1.a标签不添加href这个属性时,不会出现鼠标变成手型~

  9. php以fastCGI的方式运行在iis下,遇到的文件系统权限问题及解决方法

    今天准备将一个php demo放在IIS下运行,网站在IIS下的配置是这样的: 应用程序池是集成模式下的.net framework 2.0(2.0或4.0没什么关系,因为php以fastCGI的方式 ...

  10. 求模和求余(附加C语言实现)

    求模和求余的总体计算步骤如下: 1.求整数商  c = a/b 2.计算模或者余数 r = a - c*b 求模和求余的第一步不同,求余在取c的值时向0方向舍入;取模在计算c的值时向无穷小方向舍入. ...