登录  /  注册
博主信息
博文 128
粉丝 9
评论 5
访问量 230836
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
【案例】css滑动门技术实现原理及应用场景
 一纸荒凉* Armani
原创
1033人浏览过

滑动门出现的背景

制作网页时,为了美观,常常需要为网页元素设置特殊形状的背景,比如微信导航栏,有凸起和凹下去的感觉,最大的问题是里面的字数不一样多,咋办?

为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。

核心技术

核心技术就是利用CSS精灵(主要是背景位置)和盒子padding撑开宽度, 以便能适应不同字数的导航栏。

一般的经典布局都是这样的:

  1. <li>
  2. <a href="#">
  3. <span>导航栏内容</span>
  4. </a>
  5. </li>
  1. a {
  2. padding-left: 16px;
  3. height: 33px;
  4. float: left;
  5. line-height: 33px;
  6. margin:0 10px;
  7. background: url(https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/lTcb_ve.png) no-repeat left ;
  8. }
  9. span {
  10. padding-right: 16px;
  11. height: 33px; display: inline-block;
  12. color:#fff;
  13. background: url(https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/lTcb_ve.png) no-repeat right ;
  14. text-decoration: none;
  15. }
  16. li a:hover, li a:hover span {
  17. background-image:url(https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png);
  18. }

总结:

  1. a 设置 背景左侧,padding撑开合适宽度。
  2. span 设置背景右侧, padding撑开合适宽度 剩下由文字继续撑开宽度。
  3. 之所以a包含span就是因为 整个导航都是可以点击的。

仿微信导航栏

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <style type="text/css">
  7. * {
  8. margin: 0;
  9. padding: 0;
  10. }
  11. ul {
  12. list-style: none;
  13. }
  14. body {
  15. background: url(https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3S9sFMD.jpg) repeat-x;
  16. }
  17. .nav {
  18. height: 75px;
  19. }
  20. .nav li {
  21. float: left;
  22. margin: 0 10px;
  23. padding-top: 21px;
  24. }
  25. .nav li a {
  26. display: block;
  27. background: url(https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/lTcb_ve.png) no-repeat;
  28. color: #fff;
  29. font-size: 14px;
  30. line-height: 33px;
  31. padding-left: 15px;
  32. text-decoration: none;
  33. }
  34. .nav li a:hover {
  35. background-image: url(https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png);
  36. }
  37. .nav li a:hover span {
  38. /* 鼠标经过a a里面的span 也要变换背景 */
  39. background-image: url(https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png);
  40. }
  41. .nav li a span {
  42. display: block;
  43. line-height: 33px;
  44. background: url(https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/lTcb_ve.png) no-repeat right center;
  45. padding-right: 15px;
  46. }
  47. </style>
  48. </head>
  49. <body>
  50. <div class="nav">
  51. <ul>
  52. <li>
  53. <a href="#">
  54. <span>首页</span>
  55. </a>
  56. </li>
  57. <li>
  58. <a href="#">
  59. <span>帮助与反馈</span>
  60. </a>
  61. </li>
  62. <li>
  63. <a href="#">
  64. <span>公众平台</span>
  65. </a>
  66. </li>
  67. <li>
  68. <a href="#">
  69. <span>开发平台</span>
  70. </a>
  71. </li>
  72. <li>
  73. <a href="#">
  74. <span>表情开发平台</span>
  75. </a>
  76. </li>
  77. </ul>
  78. </div>
  79. </body>
  80. </html>

注:滑动门技术的关键在于不要给中间的盒子指定宽度,其宽度由内部的内容撑开。

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学