QQ音乐仿写

框架

分为导航盒子（歌单推荐新歌首发精彩推荐新碟首发排行榜 MV）foot

   <ul class="gai">
                <li class="box1"> 音乐馆</li>
                <li class="box2">我的音乐</liclass=>
                <li class="box3">
                    客户端
                    <img src="https://y.qq.com/mediastyle/yqq/extra/mark_1.png?max_age=2592000" width="37" height="14">
                </li>
                <li class="box4">开放平台</li>
                <li class="box5">VIP</li>
            </ul>

搜索内容

  <input type="text" placeholder="搜索音乐、歌单、MV、用户"><img class="w" src="./搜索.png" width="16"
                    height="16"></input>

placeholder是搜索框内的词

歌单推荐等

几个盒子用flex布局

    justify-content: space-between;

将盒子平均

后面的几个盒子都是这个思路

排行榜

一个精灵图当背景超出的部分用overflow:hidden隐藏部分，然后调整精灵图的位置来切换不同的背景

.next7child {
    width: 1200px;
    height: 570px;
    /* background-color: aqua; */
    margin-top: 53px;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.next7child1 {
    width: 224px;
    height: 567px;
    /* background-color: #999999; */
    overflow: hidden;
}

.next7child2 {
    width: 224px;
    height: 567px;
    /* background-color: #999999; */
    overflow: hidden;
}

.next7child3 {
    width: 224px;
    height: 567px;
    /* background-color: #999999; */
    overflow: hidden;


}

.next7child4 {
    width: 224px;
    height: 567px;
    /* background-color: #999999; */
    overflow: hidden;
}

.next7child5 {
    width: 224px;
    height: 567px;
    /* background-color: #999999; */
    overflow: hidden;
}

.next7child3 img {
    position: relative;
    left: -224px;
}

.next7child4 img {
    position: relative;
    left: -448px;
}

.next7child5 img {
    position: relative;
    left: -672px;
}

foot

最值得一说的就是最后精灵图的hover

    <div class="next9child3"><img src="./footer@2x.39e8338d.png"><img src="./footer@2x.39e8338d.png">
                    </div>

.next9child3 img:last-child {
    width: 750px;
    height: 100px;
    position: relative;
    top: -155px;
    left: -175px;
}

.next9child3:hover>img:last-child {
    display: block;
}

.next9child3>img:last-child {
    display: none;
}

总结:QQ网页制作需要想好大概布局然后再细节化，其中的二级菜单可根据之前的小米制造，根据HTML和css写的QQ音乐网站不是很齐全更多的需要js去补充