CSS滑动门与粘性定位

大号在练葵花宝典  金牌会员 | 2024-12-10 22:29:34 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 844|帖子 844|积分 2532

滑动门


大家在网页中常常访问到这样一种导航效果,由于利用频率广泛,以是广大的步伐员给它起了一个名字,叫做滑动门.在学习滑动门之前,起首你要相识什么是滑动门
具体实现

  1. <div class="slide">
  2.   <ul>
  3.     <li>
  4.       <a href="#">手机</a>
  5.       <span class="iconfont icon-jiantou_liebiaoxiangyou"></span>
  6.       <div class="slide-list">小米1</div>
  7.     </li>
  8.     <li>
  9.       <a href="#">电视</a>
  10.       <span class="iconfont icon-jiantou_liebiaoxiangyou"></span>
  11.       <div class="slide-list">小米2</div>
  12.     </li>
  13.   </ul>
  14. </div>
复制代码
  1. *{
  2.   margin: 0;
  3.   padding: 0;
  4. }
  5. .slide {
  6.   width: 234px;
  7.   height: 420px;
  8.   background-color: rgba(105, 101, 101, .6);
  9.   padding: 20px 0;
  10.   position: relative;
  11.   margin: 100px;
  12. }
  13. .slide ul{
  14.   list-style: none;
  15. }
  16. .slide ul li{
  17.   width: 100%;
  18.   height: 42px;
  19.   line-height: 42px;
  20.   text-align: left;
  21.   padding-left: 30px;
  22.   box-sizing: border-box;
  23. }
  24. .slide ul li:hover{
  25.   background:#ff6700;
  26. }
  27. .slide ul li a{
  28.   display: inline-block;
  29.   text-decoration: none;
  30.   color: #fff;
  31. }
  32. .slide-list {
  33.   width: 992px;
  34.   height: 460px;
  35.   background-color: #fff;
  36.   border: 1px solid #e0e0e0;
  37.   border-left: none;
  38.   box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
  39.   box-sizing: border-box;
  40.   position: absolute;
  41.   top: 0;
  42.   left: 234px;
  43.   display: none;
  44. }
  45. .slide li:hover>.slide-list {
  46.   display: block;
  47. }
  48. .iconfont{
  49.   display: inline-block;
  50.   font-size: 24px;
  51.   color: #fff;
  52.   position: absolute;
  53.   right: 10px;
  54. }
复制代码
粘性定位


具体实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   <style>
  8.      * {
  9.       margin: 0;
  10.       padding: 0;
  11.      }
  12.     .ad {
  13.       width: 100%;
  14.       background-color: #ff6524;
  15.      }
  16.     .ad img{
  17.       display: block;
  18.       width: 1190px;
  19.       height: 100px;
  20.       margin: 0 auto;
  21.      }
  22.     .wrap{
  23.       width: 80%;
  24.       margin: 0 auto;
  25.      }
  26.     .head {
  27.       width: 100%;
  28.       height: 50px;
  29.       line-height: 50px;
  30.       position: sticky;
  31.       top: 0px;
  32.      }
  33.     .head ul {
  34.       list-style: none;
  35.      }
  36.     .head ul li {
  37.       float: left;
  38.       padding: 0 10px;
  39.      }
  40.     h3 {
  41.       height: 300px;
  42.      }
  43.   </style>
  44. </head>
  45. <body>
  46.   <div class="container">
  47.     <div class="ad">
  48.       <img src="./ad.png" alt="">
  49.     </div>
  50.     <div class="wrap">
  51.       <div class="head">
  52.         <ul>
  53.           <li>导航1</li>
  54.           <li>导航2</li>
  55.           <li>导航3</li>
  56.           <li>导航4</li>
  57.         </ul>
  58.       </div>
  59.       <div class="body">
  60.         <h3>标题1</h3>
  61.         <h3>标题2</h3>
  62.         <h3>标题3</h3>
  63.         <h3>标题4</h3>
  64.         <h3>标题5</h3>
  65.         <h3>标题6</h3>
  66.         <h3>标题7</h3>
  67.       </div>
  68.     </div>
  69.   </div>
  70. </body>
  71. </html>
复制代码
粘性定位为什么不生效？


  • 父元素不能overflow:hidden或者overflow:auto属性
  • 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
  • 父元素的高度不能低于 sticky 的高度
  • sticky元素仅在其父元素内生效

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

大号在练葵花宝典

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表