小米官网首页标题制作持续更新中

以你之姓@ 2024-04-08 09:54 95阅读 0赞

对于小米官网商城的网页设计，我将以导航，主题，和结尾三部分陆续发布

关于导航栏，说难也不难，就是移入出现移除没有要费力一点

![9825888b2c8e429ab1fb075af746f392.png][]

下面是HTML代码

其中移入下拉是用hover写的，对于全部的css代码，如下：

*{
                margin: 0;
                padding: 0;
                list-style: none;
                text-decoration: none;
            }
            .header{
                width: 100%;
                height: 40px;
                background-color: #333;
                line-height: 40px;
                
            }
           #n{
               width: 1226px;
               margin: 0 auto;
           }
            .left{
                float: left;
          
            }
               
            .right{
                float: right;
               
               
            }
            .left>li{
                float: left;
            }
            .right>li{
                float: left;
            }
            #n li{
                float: left;
                position: relative;
                height: 40px;
            }
            li a{
                color: #b0b0b0;
                font-size: 12px;
            }
            #n span{
                color: #424242;
                margin: 0 3.6px;
                font-size: 12px;
            }
             a:hover{
                color: #fff;

购物车的样式：

/*购物车样式*/
            .gouwuche{
                position: relative;
                width: 120px;
                height: 40px;
                background-color: #424242;
                margin-left: 25px;
                text-align: center;
                
        
               
            }
            .gouwuche:hover{
                background-color: #fff;
              
              
    
            }
            .gouwuche:hover>a{
                color: #ff6700;
            }
            .icon-gouwuche{
                background-color: #fff;
                border: 1px solid #b3b1b1;
    
               
            }
            .xiala{
               
                position: absolute;
                right: 0;
                top: 40px;
                width: 316px;
                /*隐藏的高度设置为0*/
                height: 0;
                line-height: 100px;
               
                background-color: #fff;
                box-shadow: 0 2px 10px rgba(0,0,0,.15);
                color: #424242;
                font-size: 12px;
                transition: all .3s;
                overflow: hidden;
            }
            .gouwuche:hover> .xiala{
                
                
                height: 100px;
            }

下载APP下拉界面二维码，其中用到了定位

/* 二维码 */
            .erweima{
                position: absolute;
                z-index: 999;
                top: 40px;
                left: 50%;
                margin-left: -62px;
                width: 124px;
                height:0;
                overflow: hidden;
                background-color: #fff;
                box-shadow: 0 1px 5px #aaa;
                transition: all .3s;
            }
            .erweima>img{
                display: block;
                width: 90px;
                margin: 18px auto 12px;
               
            }
            .erweima>p{
                color: #333;
                font-size: 14px;
                line-height: 1;
                text-align: center;
      }
      .left>li:hover>.erweima{
          height: 148px;

还有下拉页面的三角形：

/* 三角形 */
      .sanjiaoxing{
          display: none;
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -8px;
          width: 0;
          height: 0;
          border-bottom: 8px solid #fff;
          border-left: 8px solid transparent;
          /* 透明 */
          border-right: 8px solid transparent;
      }
      .left>li:hover>.sanjiaoxing{
          display: block;
      }

最后的样子就是这样

![8c51206344e44eaba01e2f18341bb006.png][]

购物车

![314afad898764aa29a6ec227e0b7ec3d.png][]

下一篇博客会持续更新下面的内容，敬请期待！！！

[9825888b2c8e429ab1fb075af746f392.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/1981b76a4d34423bbd34d522d80d2446.png
[8c51206344e44eaba01e2f18341bb006.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/b936e71c997c4b59bfbfb6a62e9cbae4.png
[314afad898764aa29a6ec227e0b7ec3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/5dcea213ea5b4a55bde41e607a78f300.png