• 小米商城侧导航栏的实现

    侧导航栏在我们写的时候很常用，很多网站上面都有侧边导航栏的应用，那么如何制作侧边导航栏呢？

    下面看一看我制作的小米商城的侧导航栏。

    看下列代码：

    1. <body>
    2.     <div class="box3-1">
    3.         <ul>
    4.             <li>
    5.                 <a href="#">手机</a>
    6.                 <div class="Sidebar">
    7.                 </div>
    8.             </li>
    9.             <li>
    10.                 <a href="#">电脑</a>
    11.                 <div class="Sidebar">
    12.                 </div>
    13.             </li>
    14.             <li>
    15.                 <a href="#">笔记本 平板</a>
    16.                 <div class="Sidebar">
    17.                 </div>
    18.             </li>
    19.             <li>
    20.                 <a href="#">出行 穿戴</a>
    21.                 <div class="Sidebar">
    22.                 </div>
    23.             </li>
    24.             <li>
    25.                 <a href="#">耳机 音箱</a>
    26.                 <div class="Sidebar">
    27.                 </div>
    28.             </li>
    29.             <li>
    30.                 <a href="#">家电</a>
    31.                 <div class="Sidebar">
    32.                 </div>
    33.             </li>
    34.             <li>
    35.                 <a href="#">智能 路由器</a>
    36.                 <div class="Sidebar">
    37.                 </div>
    38.             </li>
    39.             <li>
    40.                 <a href="#">电源 配件</a>
    41.                 <div class="Sidebar">
    42.                 </div>
    43.             </li>
    44.             <li>
    45.                 <a href="#">健康 儿童</a>
    46.                 <div class="Sidebar">
    47.                 </div>
    48.             </li>
    49.             <li>
    50.                 <a href="#">生活 箱包</a>
    51.                 <div class="Sidebar">
    52.                 </div>
    53.             </li>
    54.         </ul>
    55.     </div>
    56. </body>

    我们实现的思路是先制作一个列表，设置列表的样式，然后在列表里面完成我们需要的内容。

    所涉及到的知识点有定位和格式化文档。

    下面看一下css代码：

    1. <style>
    2.     .box3-1 {
    3.         width: 234px;
    4.         height: 460px;
    5.         background-color: rgba(128, 128, 128, .5);
    6.     }
    7.     /* 制作列表大小和样式 */
    8.     .box3-1 ul {
    9.         height: 418px;
    10.         padding: 20px 0px;
    11.         position: relative;
    12.         border-right: 1px solid #6e6a6a;
    13.     }
    14.  
    15.     .box3-1 li {
    16.         list-style: none;
    17.         padding: 0px 23px 0px 30px;
    18.         height: 42px;
    19.         line-height: 42px;
    20.     }
    21.      
    22.     .box3-1 li>a {
    23.         text-decoration: none;
    24.         color: #ffffff;
    25.         font-size: 14px;
    26.     }
    27.     /* 鼠标移入是背景颜色改变 */
    28.     .box3-1 li:hover {
    29.         background-color: rgb(255, 103, 0);
    30.     }
    31.     /* 下拉框部分 */
    32.     .Sidebar {
    33.         position: absolute;
    34.         left: 236px;
    35.         top: 0px;
    36.         width: 994px;
    37.         height: 460px;
    38.         background-color: rgb(162, 79, 79);
    39.         box-shadow: 0px 0px 5px #b0b0b0;
    40.         /* 将元素隐藏 */
    41.         display: none;
    42.     }
    43.         /* 鼠标移入列表元素出现 */
    44.     .box3-1 li:hover .Sidebar {
    45.         display: block;
    46.     }
    47. </style>

    css代码段如上所示

    我的想法是将下拉框写在列表里面，然后给下拉框绝对定位，给ul相对定位，因为我没有给li设置相对定位，那么下拉框的参照物就是相对定位了的ul，把下拉框的位置定好，然后实现鼠标移入下拉框出现，鼠标移出下拉框消失的问题。

    这里需要注意的知识点是position定位属性。在position:absolute绝对定位。产生top，left等四个属性。通过这四个属性调节位置，在之前的文章中有详细介绍，大家可以看看哦

    具体看以上代码

    页面元素隐藏

    页面元素隐藏的方法：
    1.display:none;
    2. visibility: hidden;visibility 属性规定元素是否可见。默认可见可继承
    3. opacity:0;
    4. position:absolute;left:-10000px;

    看一下运行效果：

     

     这是一个很简单的练习，但是里面的小知识点也不少，大家可以试一试哦。

  • 相关阅读:
    【C++】【STL】【list类的使用】【list类的模拟实现】
    mybatis 自动化处理 mysql 的json类型字段 终极方案
    当商品跨多个分类时，如何精确统计总销售额？
    坏块处理 ORA-01578: ORACLE data block corrupted (file # 3, block # 152588)
    C++：deque的概念以及stack和queue的模拟实现
    Win11怎么设置让CPU性能全开？Win11CPU怎么设置高性能模式？
    卷积运算与卷积核DLC
    智能生活 App 垂直品类- IPC SDK 架构及快速集成配置（安卓版）
    java项目-第161期ssm弹幕视频网站系统_ssm毕业设计_计算机毕业设计
    0基础学习PyFlink——不可以用UDTAF装饰器装饰function的原因分析
  • 原文地址：https://blog.csdn.net/weixin_65607135/article/details/126643900