小米与Q音问题复盘23.10

首先写一下对于在先完成官网复盘后再去写这两个网页的心得： 在官网复盘完成后，整体来说让我对于页面仿写的一些基本操作比较熟练了，所以在这两个网页仿写的过程中除了个别bug，整体还是比较流畅的，所以速度会比以前快很多

但是（划重点） 上次官网中还是有遗留问题的，以及一些知识盲点，所以在这次的小米和q音仿写过程中也有补充到很多知识点，填补了一些以前不会或者模糊的一些漏洞，我将会在这篇博客中对其进行复盘

---

Q音

第一：关于布局问题

之前仿写网页的时候，只关注它此刻的位置，也不考虑它的适配问题，一顿定位边距宽高瞎写，也没有结构可言，所以每次看到一放大缩小就乱套的网页时非常头疼，所以再次去回顾视频所学，并在q音中进行了运用，终于像了那么点意思

首先 效果如下图：

思路大概就是：

（方法不唯一）

1. 在你想写一个部分的时候，先给浏览器整个这块部分设置一个大的div，让它横向占满整个屏幕，如我写的allheader部分
2. 接着在你的这个大div里再放一个div并设置它的最大宽度（我是这样设置的），作为你写内容的部分，并且记得把它设置横向居中，如我写的header部分

.allheader{
    width: auto;
    height: 141.67px;
    /* background-color: brown; */

}
.header{
    max-width:1220px;
    margin: 0 auto;
    height: 141.67px;
    /* background-color: aquamarine; */
}

然后就完成啦

第二：q音中的hover套hover

即

这部分我原来是想直接再往下写一个li的，然后用定位把它移到旁边，然后再单独hover，但是实际操作的时候并不尽如人意，不是定位不合适就是hover后显不出来

所以我最后选择，在li里写一个行内span标签，

<div class="money">充值<span class="three"></span>
                    <ul style="background-color: white; color: black ; list-style: none;" >
                        <li style="border: 0.5px solid #b1b1b1;">购买月币</li>
                        <li class="money-left" style="border: 0.5px solid #b1b1b1;height: 40px; ">充值饭票 <span  style="border: 1px solid #b1b1b1;">网银支付</span></li>
                    </ul>
                </div>

.money span{
    display: none;
    width: 83px;
    height: 40px;
    position: relative;
    bottom: 40px;
    left: 82px;
}
.money-left:hover span{
    display: block;
    color: black;
}
.money-left span:hover{
    display: inline-block;
    background-color: #2bc17c;
    color: white;
}

第三：关于三角形书写

html里就是直接在你想要放三角的地方放个空span就行

整体带hover变换就是

.money .three{
    display: inline-block;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-top: 5px solid black;
    position: relative;
    top:2px;
    left: 15px;
}
.money:hover .three {
    border: 5px solid transparent;
    border-bottom: 5px solid white;
    position: relative;
    top: -1px;
}

第四：绝对定位

相对定位直接调的话，会占你的空间，然后把你这行别的挤下去，所以这个用绝对定位比较好，直接脱离图层，不占地方

第五：关于图片hover变颜色

跟官网最后导航栏透明度设置刚好相反（具体情况具体分析）

.foot2 li img{
    filter:grayscale(100%)
    opacity(0.6)
}
.foot2 li:hover img{
    filter: none;
    opacity: 1;
}

小米商城

第一：新学的用css来实现过渡效果（Transition属性）

【CSS transition（过渡效果）详解 - CSDN App】t.csdnimg.cn/jkZyM

效果：

最简单的就是这样的

 transition: all 1s;

我是从csdn上学的，其实还有一些更加具体的设置，不过我就简单写了一个这个

第二：

1.用表格，不要用列表了

不然它会因为浮动变成这样（东西一多就用列表说的就是我T T）

2.这个一碰就浮起来＋阴影的效果我用的是这个

.navbox:hover{
     box-shadow: 0 1px 10px black;
     margin-top: -7px;

其实还有个方法是用transform属性

transform扩展：（别看我搜了好多，其实我也没有实战过）

变形函数【css常用的属性 - CSDN App】t.csdnimg.cn/FxATt

【transform属性、transition属性和animation属性的介绍 - CSDN App】blog.csdn.net/qq_44329870...

【transform三大属性 rotate、scale、translate - CSDN App】t.csdnimg.cn/05Umg

第三：之前z-index的疑惑点（重点）

之前在写网页的时候用z-index这个属性的时候，十次里面总有九次不管用的，这次写小米的时候也遇到了同样的问题，总有二级菜单被盖住挡在下面，设置了好几次z-index不是不管用，就是会牵出来别的bug

所以我去寻求了学长（李工）帮忙TT，终于发现了问题所在！

即： 当你的二级菜单或者其他被挡住的话，你设置那个小的层级z-index是没有用的，因为你再设置他都是儿子（或孙子）的，怎么也比不过下面的父亲（爷爷）的兄弟，所以还是会被盖住。

正确做法是： 给你这个儿子（孙子）的父亲（爷爷）（就是外面最大的那个），给他设置z-index，让它整体大于下面的兄弟，就不会被盖住了

ok结束

---