网页侧边浮动条的实现
生活随笔
收集整理的這篇文章主要介紹了
网页侧边浮动条的实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
我們看到的浮動條一直固定在瀏覽器的某個位置，這需要用到定位。
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
總結
以上是生活随笔為你收集整理的网页侧边浮动条的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C# 导出dataGridView中的值
- 下一篇： AtCoder - 2153 An Or