CSS了一个浮动导航条
绝对浏览器窗口定位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了一个浮动导航条的更多相关文章
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- 使用css3和伪元素制作的一个立体导航条
使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...
- css制作漂亮彩带导航条菜单
点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...
- css实现京东顶部导航条
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- Css实现一个菜单导航
提要:使用大div定位设置为relative,子div设置为absolute实现菜单下拉 实现代码: <!DOCTYPE html> <html lang="en" ...
- css ul li 制作导航条
<html> <head> <style> .test ul{list-style:none;} .test li{float:left; width:100px; ...
- 使用css实现移动端导航条滚动
<div class="tab"> <div class="table-item"> <span class="tab- ...
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- Bootstrap每天必学之导航条
http://www.jb51.net/article/75534.htm Bootstrap每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...
随机推荐
- Windows 7的系统还原,你用了吗?
在Windows XP时代可能人们最常用的系统还原工具就是Ghost,一来因为Ghost的还原非常彻底,二来由于备份Windows XP所占用的硬盘空间并不是很大,所以习惯于安装完操作系统以后就把系统 ...
- [Leetcode][Python]22: Generate Parentheses
# -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 22: Generate Parentheseshttps://oj.leet ...
- 轻奢当道业绩逆势增长 Kate Spade联手韩国衣恋开拓中国市场_商场报道_中国时尚品牌网
轻奢当道业绩逆势增长 Kate Spade联手韩国衣恋开拓中国市场_商场报道_中国时尚品牌网 轻奢当道业绩逆势增长 Kate Spade联手韩国衣恋开拓中国市场
- Trailing Zeroes (III)(lightoj 二分好题)
1138 - Trailing Zeroes (III) PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: ...
- Ubuntu启动、停止、重新启动MySQL,查看MySQL错误日志、中文编码错误
1)启动: sudo /etc/init.d/mysql start 2)停止: sudo /etc/init.d/mysql stop 3)重新启动: sudo /etc/init.d/mysql ...
- WinForm中快捷键与组合按键的设置方法
每个窗体都有这样3个事件:KeyDown.KeyPress.KeyUp,KeyDown和KeyPress都是按键按下事件,但KeyDown用的是KeyCode跟键盘各个按键相对应,它对应Keys枚举, ...
- BZOJ 1565: [NOI2009]植物大战僵尸( 最小割 )
先拓扑排序搞出合法的, 然后就是最大权闭合图模型了.... --------------------------------------------------------------------- ...
- HTML中小问题
1.a标签不添加href这个属性时,不会出现鼠标变成手型~
- php以fastCGI的方式运行在iis下,遇到的文件系统权限问题及解决方法
今天准备将一个php demo放在IIS下运行,网站在IIS下的配置是这样的: 应用程序池是集成模式下的.net framework 2.0(2.0或4.0没什么关系,因为php以fastCGI的方式 ...
- 求模和求余(附加C语言实现)
求模和求余的总体计算步骤如下: 1.求整数商 c = a/b 2.计算模或者余数 r = a - c*b 求模和求余的第一步不同,求余在取c的值时向0方向舍入;取模在计算c的值时向无穷小方向舍入. ...