右侧悬浮菜单悬浮窗 css+html css自动判断PC显示手机端隐藏

感觉还不错,只是部署到博客不太搭配(颜色太鲜艳了),用css加了个设备判断,电脑端显示、手机端隐藏。1221px 界点

来源:https://www.zmki.cn/5002.html

预览:

200106085321.png

html代码:

  1. <!--右侧浮动 开始-->
  2. <div class="wapnone">
  3. <div class="elevator_item mobile-hide" id="elevator_item">
  4. <a class="hd-time-limited mobile-hide" href="http://dg99.cn" target="_blank" rel="nofollow"></a>
  5. <a target="_blank" class="feedback graHover mobile-hide" style="background-color: #1e6be3;color:#fff;" href="http://img.zmki.cn" rel="nofollow">在线图床</a><a target="_blank" class="feedback graHover mobile-hide" style="background-color: #ffd900;color:#383838;" href="http://www.dg99.cn" target="_blank" rel="nofollow">业务平台</a>
  6. <a target="_blank" class="feedback graHover mobile-hide" style="background-color: #fa3c63;color:#fff;" href="https://www.zmki.cn" rel="nofollow">积分获取</a><a target="_blank" class="feedback graHover mobile-hide" style="background-color: #1e6be3;color:#fff;" href="https://www.zmki.cn" rel="nofollow">积分素材</a><div class="feedback medium mobile-hide">官方客服
  7. <div class="lf-box mobile-hide"><ul class="sp-list mobile-hide"><li><span>官方客服:20838641</span><a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=20838641" target="_self" class="btn-addGroup graHover" rel="nofollow">一键联系</a></li><li class="spl-li clearfix mobile-hide"><div class="fl mobile-hide"><span>微信公众号</span><img src="https://a-oss.zmki.cn/2019/03/05/5c7de96bd4328.png" alt=""></div><div class="fr mobile-hide"><span>微信公众号</span><img src="https://a-oss.zmki.cn/2019/03/05/5c7de96bd4328.png" alt=""></div></li></ul></div></div>
  8. </div>
  9. <!--右侧浮动 结束-->

css样式:

  1. <!--右侧悬浮菜单 開始-->
  2. <style>
  3. /*footer*/
  4. .elevator_item .hd-time-limited {
  5. display: block;
  6. position: fixed;
  7. right: 10.6px;
  8. bottom: 450px;
  9. width: 40px;
  10. height: 140px;
  11. background: url(https://www.6fwq.com/wp-content/uploads/2019/01/time-limited.png) no-repeat center;
  12. animation: vip-199-180510 2.4s infinite;
  13. margin-top: 10px;
  14. }
  15. @keyframes vip-199-180510 {
  16. 0% {
  17. bottom: 442px;
  18. }
  19. 50% {
  20. bottom: 450px;
  21. }
  22. 100% {
  23. bottom: 442px;
  24. }
  25. }
  26. .aj-popbox .hd-time-limited .close-btn {
  27. width: 38px;
  28. height: 38px;
  29. right: 28px;
  30. top: 30px;
  31. line-height: 38px;
  32. text-align: center
  33. }
  34. .aj-popbox .hd-time-limited .close-btn i {
  35. font-size: 24px;
  36. color: #fff
  37. }
  38. .aj-popbox .hd-time-limited .timer {
  39. margin: 296px auto 0;
  40. width: 234px;
  41. font-size: 30px;
  42. color: #000;
  43. line-height: 48px;
  44. padding-left: 10px;
  45. letter-spacing: 13px;
  46. font-weight: bold
  47. }
  48. .aj-popbox .hd-time-limited .go-hd:hover {
  49. transform: scale(.95) translateY(2px)
  50. }
  51. .elevator_item {
  52. position: fixed;
  53. right: 12px;
  54. bottom: 195px;
  55. z-index: 11
  56. }
  57. .elevator_item .feedback {
  58. width: 36px;
  59. height: 40px;
  60. background-color: #fff;
  61. color: #fa3c64;
  62. font-size: 12px;
  63. padding: 5px 6px;
  64. display: block;
  65. border-radius: 5px;
  66. text-align: center;
  67. margin-top: 10px;
  68. box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  69. cursor: pointer
  70. }
  71. .elevator_item .advice,
  72. .elevator_item .add,
  73. .elevator_item .return {
  74. color: #383838;
  75. line-height: 30px
  76. }
  77. .elevator_item .advice i {
  78. font-size: 28px
  79. }
  80. .elevator_item .add i,
  81. .elevator_item .return i {
  82. font-size: 20px
  83. }
  84. .elevator_item .medium {
  85. position: relative;
  86. background-color: #fa3c64;
  87. color: #fff
  88. }
  89. .elevator_item .medium .lf-box {
  90. display: none;
  91. position: absolute;
  92. right: 41px;
  93. top: -90px;
  94. width: 370px;
  95. height: 280px;
  96. padding-right: 10px
  97. }
  98. .elevator_item .medium .sp-list {
  99. width: 360px;
  100. height: 280px;
  101. border-radius: 5px;
  102. background-color: #fff;
  103. box-shadow: 0 1px 2px rgba(0, 0, 0, .35)
  104. }
  105. .elevator_item .medium .sp-list li:first-child {
  106. height: 70px;
  107. border-bottom: 1px solid #e5e5e5;
  108. padding: 20px 50px
  109. }
  110. .elevator_item .medium li:first-child span {
  111. font-size: 14px;
  112. color: #383838;float: left;
  113. line-height: 30px
  114. }
  115. .elevator_item .medium .btn-addGroup {
  116. width: 90px;
  117. height: 30px;
  118. border-radius: 5px;
  119. background: #fa3c64;
  120. color: #fff;
  121. line-height: 30px;
  122. text-align: center;
  123. float: left;
  124. margin-left: 14px
  125. }
  126. .elevator_item .medium .spl-li {
  127. padding: 22px 34px 0
  128. }
  129. .elevator_item .medium .spl-li span {
  130. display: block;
  131. font-size: 14px;
  132. color: #383838;
  133. margin-bottom: 8px
  134. }
  135. .elevator_item .medium .spl-li img {
  136. width: 130px
  137. }
  138. .elevator_item .add {
  139. position: relative
  140. }
  141. .elevator_item .add .lf-box {
  142. display: none;
  143. position: absolute;
  144. right: 31px;
  145. top: -32px;
  146. width: 178px;
  147. height: 104px;
  148. padding-right: 10px
  149. }
  150. .elevator_item .add .sp-list {
  151. width: 168px;
  152. height: 104px;
  153. border-radius: 5px;
  154. background-color: #fff;
  155. box-shadow: 0 1px 2px rgba(100, 25, 25, 0.35)
  156. }
  157. .elevator_item .add .sp-list li {
  158. line-height: 52px;
  159. font-size: 14px;
  160. color: #383838;
  161. text-align: left
  162. }
  163. .elevator_item .add .sp-list li a {
  164. display: block;
  165. height: 52px;
  166. width: 100%
  167. }
  168. .elevator_item .add .sp-list li:hover a {
  169. color: #fa3c64
  170. }
  171. .elevator_item .add .sp-list li:hover i {
  172. color: #fa3c64
  173. }
  174. .elevator_item .add .sp-list li:first-child {
  175. border-bottom: 1px solid #e5e5e5
  176. }
  177. .elevator_item .add .sp-list i {
  178. color: #d8d8d8;
  179. font-size: 28px;
  180. margin-left: 16px;
  181. margin-right: 14px;
  182. vertical-align: middle
  183. }
  184. .elevator_item .add:hover>i,
  185. .elevator_item .return:hover>i {
  186. color: #fa3c64
  187. }
  188. .elevator_item .feedback:hover .lf-box {
  189. display: block
  190. }
  191. .fl {
  192. float: left
  193. }
  194. .fr {
  195. float: right
  196. }
  197. .graHover {
  198. position: relative;
  199. overflow: hidden
  200. }
  201. .graHover:before {
  202. display: none;
  203. position: absolute;
  204. top: 0;
  205. left: 0;
  206. content: '';
  207. width: 100%;
  208. height: 100%;
  209. background-color: rgba(255, 255, 255, .2)
  210. }
  211. .graHover:hover:before {
  212. display: block
  213. }
  214. .clearfix {
  215. *zoom: 1
  216. }
  217. .clearfix:after {
  218. visibility: hidden;
  219. display: block;
  220. font-size: 0;
  221. content: " ";
  222. clear: both;
  223. height: 0
  224. }
  225. @media screen and (max-width: 1221px) { .wapnone{display:none; }
  226. </style>
  227. <!--右侧悬浮菜单 結束-->
文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/142
0 评论
6.9k

发表评论

!