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每天必学之导航条,本文向大家讲解了多种多样的导航条,以及导航条中元素的实现方法,感兴趣的小伙伴们可以参考一 ...
随机推荐
- Task和backStack(本篇章核心)
对Task和backStack的认识过程 1.由demo测试得到的关系图: 1.一个task中可以有多个app的Activity, 由于一个app可以对应一个或多个process, 2.所以一个ta ...
- QT中代码中与设计器中控件信号与SLOT连接(原来还可以这样连接)
双击testqt.ui 托一个push button到窗体中,双击,可以输入字符 按F4或 menu->edit->edit signals/slots 定义SLOT 选择已定义好的SLO ...
- 改进的延时函数Delay(使用MsgWaitForMultipleObjects等待消息或超时的到来)
解决上一节中延时函数占CPU使用率(达50%)的第二种方法是利用消息机制,通过API函数MsgWaitForMultipleObjects等待消息或超时的到来,从而避免使用循环检测使CPU占用率过高. ...
- python 类型转换函数
python提供了一些可将某个值从一种类型转换为另一种类型的内置函数. 1. int函数可以把任何可以转换为整型的值转换为整型.int可以将浮点数转换为整数,但不会做四舍五入操作,而是直接丢弃小数部分 ...
- BoundsChecker使用
转载:http://www.cnitblog.com/qiuyangzh/archive/2005/07/14/975.html 1 前言 我在本文中具体介绍了測试工具NuMega Devpart ...
- RDIFramework.NET(.NET快速信息化系统开发框架) Web版介绍
RDIFramework.NET(.NET快速信息化系统开发框架) Web版介绍 B/S结构(Browser/Server,浏览器/服务器模式),是WEB兴起后的一种网络结构模式,WEB浏览器是客户 ...
- win8.1 安装webaccess遇到的写访问权限错误
大学的时候闲暇时间都用来玩游戏了,现在工作了,就把工作中遇到的问题和学习心得跟大家共享下,若有不对的地方欢迎指出,谢谢! 前几天突然想换用vs2013开发,就重装了win8.1系统,在新系统上安装we ...
- 简单的Cookie登录
登录页前台代码 <form id="form1" action ="" method="post"> <input typ ...
- SQL学习之汇总数据之聚集函数
一. 1.我们经常需要汇总数据而不用把他们实际检索出来,为此SQL提供了专门的函数,以便于分析数据和报表生成,这些函数的功能有: (1)确定表中行数(或者满足单个条件或多个条件或包含某个特定值的行数) ...
- English - every和each的用法和区别
两者都有“每个”的意思,但用法不同: (1)each具有名词和形容词的功能,every只有形容词的功能. (2)each指两个或两个以上的人或事物中的“每个”:every是指三个以上的人或事物的“全体 ...