网页侧边浮动条的实现

我们看到的浮动条一直固定在浏览器的某个位置，这需要用到定位。

position有相对定位relative，绝对定位absolut，而我们所用到的是相对浏览器定位 fix值。

而浮动栏里的背景图，需要一点一点移动雪碧图调到合适位置。这就需要熟练使用bacground position属性

background-position（位置坐标、偏移量）

①指定位置 center/left/right top/center/bottom只写一个属性值时另一个默认居中

②填写坐标位置：background-position：50px 100px;(水平位置，垂直位置)（像素或百分比）

只写一个属性值是默认写的为水平方向，垂直居中

当使用像素时：代表图片的左上角往各个方向移动的实际距离，水平方向：正数右移负数左移

水平方向正数下移负数上移，------左负右正，上负下正

下面做一个左侧浮动条

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><meta name="keywords" content=""/>    <meta name="description" content=""/><style type="text/css">#float_left{width: 40px;height: 245px;position: fixed;top: 30%;left: 0px;}
#float_left ul li{list-style: none;width: 40px;height: 40px;background-image: url(../img/lyx.png);background-repeat: no-repeat;border-bottom: 1px solid white;cursor: pointer;transition: all 0.5s ease;
}
#float_left .li1{background-position: 0px -209px;
}
#float_left .li2{background-position: -42px -168px;
}
#float_left .li3{background-position: 0px -126px;
}
#float_left .li4{background-position: -42px -84px;
}
#float_left .li5 {background-position: -41px 0px;
}
#float_left .li6{border-bottom: none;background-position: 0px -42px;
}
#float_left .div1{width: 0px;height: 40px;background-color: #F6A702;margin-left: 40px;overflow: hidden;color: white;text-align: center;line-height: 40px;
}
#float_left .li2:hover{background-position: 0px -168px;
}
#float_left .li3:hover{background-position: -42px -126px;
}
#float_left .li4:hover{background-position: 0px -84px;
}
#float_left .li5:hover{background-position: 0px 0px;
}
#float_left .li6:hover{background-position:-41px -42px ;
}
#float_left li:hover .div1{width: 80px;
}</style></head><body><div id="float_left"><ul><li class="li1"></li><li class="li2"><div class="div1">意见反馈</div>        </li><li class="li3"><div class="div1">就业薪资</div></li><li class="li4"><div class="div1">公司介绍</div></li><li class="li5"><div class="div1">常见问题</div></li><li class="li6"><div class="div1">QQ客服</div>      </li></ul></div></body>
</html>

效果图如下：

当然做完不要忘记加上hover事件，提升用户的体验~

转载于:https://www.cnblogs.com/cherishli/p/6539477.html

网页侧边浮动条的实现相关推荐

Internet Download Manager（IDM）网页下载浮动条不出现的问题记录
Internet Download Manager(IDM)网页下载浮动条不出现的问题记录浏览器版本:谷歌浏览器78.0.3904.97(正式版本) (64 位) IDM版本:6.31 Build ...
IDM浮动条无法弹出怎么办？
自动下载网页资源,是IDM的一大亮点.我们在网站上播放视频时,会自动弹出对应的下载浮动条.但有些用户在使用IDM时,却找不到这些浮动条,这是什么原因呢?今天,我就教大家如何解决这一问题. 软件版本 ...
IDM - 如何去除浏览器下载浮动条？
如果有安装过 IDM 的同学,一定会遇到这个问题,当然这个问题不是因为浏览器插件上的 IDM 引起的,而是桌面上的 IDM 引起这个问题,是不是很烦,今天就教大家怎么去除这个浮动条~ 打开 IDM,点 ...
iOS-仿支付宝加载web网页添加进度条
代码地址如下: http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条 ...
android仿微信图片上传进度,Android开发之模仿微信打开网页的进度条效果(高仿)...
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果",你会看到有很多类似的文章,不过他们有个共同点,就是实 ...
android仿微信进度条,Android开发之模仿微信打开网页的进度条效果(高仿)
一,为什么说是真正的高仿? 阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 "仿微信打开网页的进度条效果" ,你会看到有很多类似的文章,不过他们有个共同点,就是 ...
解决在线视频（如b站等）中没有IDM下载浮动条问题
解决在线视频(如b站等)中没有IDM下载浮动条问题 Internet Download Manager是一个多线程下载器,使用IDM下载可以提高5倍下载速度,IDM的使用需要注册,小编在使用时间到期时 ...
标准网页两侧浮动广告代码支持FF及IE
点击这里使用RSS订阅本Blog:网页两侧浮动广告代码经测试支持IE.Firefox等浏览器 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
浏览器B站播放时，IDM没有显示下载浮动条
IDM下载安装之后,不能下载b站视频只需对IDM进行设置即可 1.打开IDM: 2.点击选项: 3.点击自定义浏览器中的IDM 下载浮动条: 4.添加M4S文件类型: 5.和第4步一样,添加XS文件 ...

网页侧边浮动条的实现

网页侧边浮动条的实现相关推荐

最新文章

热门文章