仓库链接:https://github.com/MengFanjun020906/HTML_SX

主页歌曲推荐

昨天做完了一大半了，今天要做中间的分类图片，原理其实和上面的banner很像，就不过多叙述了，但是这里面的父子级别关系很多，要注意在css中的写法。

html

今天才学到html和css是可以分开的，之前几篇文章的html和css都比较乱，现在把它写的简单一点。

    <div class="story">
            <div class="story-title">
                <span class="left">他们把故事唱成了歌曲</span>
                
                <button class="fa fa-play"> 播放全部</button>
            </div>
        <div class="story-box">
            <div class="item">

                <img class="cover" src="img/song/917.jpg" alt="">
                <div class="info">
                    <div class="title">
                        <span>就忘了吧(DJ版)</span>
                        <span>-DJ蛇哥</span>
                    </div>
                    <div class="ps">
                        <span>SQ</span>
                        <span>永远记得你穿豆豆鞋的样子</span>
                    </div>
                </div>
                <img class="play" src="img/_play.png" alt="">
            </div>
            <div class="item">

                <img class="cover" src="img/song/980.jpg" alt="">
                <div class="info">
                    <div class="title">
                        <span>ヨアソビ</span>
                        <span>-YOASOBI</span>
                    </div>
                    <div class="ps">
                        <span>SQ</span>
                        <span>将小说故事音乐化</span>
                    </div>
                </div>
                <img class="play" src="img/_play.png" alt="">
            </div>
            <div class="item">

                <img class="cover" src="img/song/903.jpg" alt="">
                <div class="info">
                    <div class="title">
                        <span>像风一样</span>
                        <span>-薛之谦</span>
                    </div>
                    <div class="ps">
                        <span>SQ</span>
                        <span>希望你像风一样自由</span>
                    </div>
                </div>
                <img class="play" src="img/_play.png" alt="">
            </div>
        </div>

css

.story>.story-title {
    
    
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    align-items: center;
    color: #504e4a;

}

.story>.story-title>.fa-play {
    
    
    font-size: 12px;
    color: #999;
    border-radius: 5px;
    border: 1;
    background-color: white;
    border-color: gray;
    padding: 4px;

}

.story-box {
    
    
    margin-top: 10px;
    flex-direction: column;
}

.story-box>.item>.cover {
    
    
    width: 60px;
    height: 60px;
    border-radius: 5px;
}

.story-box>.item>.play {
    
    
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 15px;
    margin-left: 50px;

}

.story-box>.item {
    
    
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.story-box>.item>.info {
    
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 54px;
    margin-left: 7px;
    /* border: 1px solid red; */
    width: 220px;

}

.story-box>.item>.info>.title>span:nth-child(1) {
    
    
    font-size: 15px;
}

.story-box>.item>.info>.title>span:nth-child(2) {
    
    
    font-size: 12px;
    color: gray;
}

.story-box>.item>.info>.ps {
    
    
    display: flex;
    align-items: center;
}

.story-box>.item>.info>.ps>span:nth-child(1) {
    
    
    font-size: 12px;
    color: red;
    border: 1px solid red;
    width: 34px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 6px;
    margin-right: 10px;
}

.story-box>.item>.info>.ps>span:nth-child(2) {
    
    
    font-size: 12px;
    color: gray;
}

最终的实现效果是这样的
在这里插入图片描述

下面是发现页的所有代码了

Find.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Find</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="css/find.css">
</head>
<body>
    <div class="search">
        <i class="fa fa-microphone  fa-lg"></i>
        <input type="text" placeholder="搜夜曲">
        <img src="img/song/615.jpg" class="search_input" alt="">

    </div>

    <div class="banner">

        <img src="img/ad/811.jpg" alt="">
        <div class="pointer">
            <span></span>
            <span></span>
            <span class="active"></span>
            <span></span>
        </div>
    </div>
    <div class="category">
        <div class="item">
            <i class="fa fa-calendar"></i>
            <span>每日推荐</span>
        </div>
        <div class="item">
            <i class="fa fa-headphones"></i>
            <span>歌单</span>
        </div>
        <div class="item">
            <i class="fa fa-trophy"></i>
            <span>排行榜</span>
        </div>
        <div class="item">
            <i class="fa fa-bullhorn"></i>
            <span>电台</span>
        </div>
        <div class="item">
            <i class="fa fa-caret-square-o-right"></i>
            <span>直播</span>
        </div>
        <div class="item">
            <i class="fa fa-heart"></i>
            <span>火前留名</span>
        </div>
        <div class="item">
            <i class="fa fa-comments"></i>
            <span>畅聊</span>
        </div>
    </div>
    <div class="choice">
        <div class="choice-title">
            <span class="left">你的精选歌单</span>
            <button class="right">查看更多</button>
        </div>
        <div class="choice-box">
            <div class="item">
                <img src="img/sheet/100.jpeg" alt="">
                <span>成功人士都在听的歌曲，来看看吧～</span>
            </div>
            <div class="item">
                <img src="img/sheet/10.jpg" alt="">
                <span>暮然回首，那人却在灯火阑珊处</span>
            </div>
            <div class="item">
                <img src="img/sheet/20.jpg" alt="">
                <span>温馨的歌曲，适合在家听</span>
            </div>
            <div class="item">
                <img src="img/sheet/30.jpg" alt="">
                <span>抖音热门歌曲循环</span>
            </div>
            <div class="item">
                <img src="img/sheet/40.jpg" alt="">
                <span>学习/工作/无聊/必备歌曲</span>
            </div>
            <div class="item">
                <img src="img/sheet/50.jpg" alt="">
                <span>乘风破浪会有时，直挂云帆济沧海/span>
            </div>
            <div class="item">
                <img src="img/sheet/60.jpg" alt="">
                <span>赛车爱好者必听歌曲</span>
            </div>
        </div>
    </div>
    <div class="story">
            <div class="story-title">
                <span class="left">他们把故事唱成了歌曲</span>
                
                <button class="fa fa-play"> 播放全部</button>
            </div>
        <div class="story-box">
            <div class="item">

                <img class="cover" src="img/song/917.jpg" alt="">
                <div class="info">
                    <div class="title">
                        <span>就忘了吧(DJ版)</span>
                        <span>-DJ蛇哥</span>
                    </div>
                    <div class="ps">
                        <span>SQ</span>
                        <span>永远记得你穿豆豆鞋的样子</span>
                    </div>
                </div>
                <img class="play" src="img/_play.png" alt="">
            </div>
            <div class="item">

                <img class="cover" src="img/song/980.jpg" alt="">
                <div class="info">
                    <div class="title">
                        <span>ヨアソビ</span>
                        <span>-YOASOBI</span>
                    </div>
                    <div class="ps">
                        <span>SQ</span>
                        <span>将小说故事音乐化</span>
                    </div>
                </div>
                <img class="play" src="img/_play.png" alt="">
            </div>
            <div class="item">

                <img class="cover" src="img/song/903.jpg" alt="">
                <div class="info">
                    <div class="title">
                        <span>像风一样</span>
                        <span>-薛之谦</span>
                    </div>
                    <div class="ps">
                        <span>SQ</span>
                        <span>希望你像风一样自由</span>
                    </div>
                </div>
                <img class="play" src="img/_play.png" alt="">
            </div>
        </div>
        <div class="tab-bar">
            <div class="item active">
                <i class="fa fa-globe"></i>
                <span>发现</span>
            </div>
            <div class="item">
                <i class="fa fa-video-camera"></i>
                <span>视频</span>
            </div>
            <div class="item">
                <i class="fa fa-music"></i>
                <span>我的</span>
            </div>
            <div class="item">
                <i class="fa fa-users"></i>
                <span>云村</span>
            </div>
            <div class="item">
                <i class="fa fa-user"></i>
                <span>账号</span>
            </div>
        </div>
        <br> <br><br><br><br><br>

</body>

</html>

Find.css

.search>img {
    
    
    width: 30px;
    height: 30px;
    border: 3px solid gray;
    border-radius: 18px;
    margin-left: 10px;
}

.search {
    
    
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
    top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: white;
    z-index: 999;
    /* border: 1px solid red; */

}

.search>input {
    
    

    /* 搜索放大镜图标 */
    background-image: url("img/search.png");
    background-size: 16px 16px;
    /* background-position: center; */

    background-position-x: 11px;
    background-position-y: 7px;
    background-repeat: no-repeat;
    background-color: #f2f2f2;
    justify-content: space-evenly;

    border: none;
    height: 28px;
    width: 240px;
    border-radius: 14px;
    /* 搜夜曲的位置通过padding判断 */
    padding-left: 30px;
    margin-left: 10px;
}

.search>fa fa-microphone {
    
    
    width: 20px;
    height: 20px;

}

.tab-bar {
    
    
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    height: 80px;
    /* border: 1px solid red; */
    display: flex;
    justify-content: space-evenly;
}

.tab-bar>.item {
    
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tab-bar>.item>i {
    
    
    font-size: 30px;
}

.tab-bar>.item>span {
    
    
    margin-top: 6px;
    font-size: 14px;
}

.tab-bar>.active {
    
    
    color: red;
}

.banner {
    
    
    margin-top: 60px;
    position: relative;
    z-index: 2;
}

.banner>img {
    
    
    width: 100%;
    border-radius: 6px;


}

.banner>.pointer {
    
    
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 12px;
    left: 0;
    right: 0;

}

.banner>.pointer>span {
    
    
    width: 10px;
    height: 10px;
    background-color: gray;
    margin-left: 10px;
    border-radius: 5px;
    margin-right: 4px;
}

.banner>.pointer>.active {
    
    
    background-color: red;
}

.choice {
    
    

    margin-top: 10px;
}

.choice>.choice-title {
    
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    color: #504e4a;

}

.choice>.choice-title>.right {
    
    
    font-size: 12px;
    color: #999;
    border-radius: 5px;
    border: 1;
    background-color: white;
    border-color: gray;

}

.choice-box {
    
    
    display: flex;
    /* 设置图像可以滚动显示 */
    overflow: scroll;
}

/* 清除滚动条 */
.choice-box::-webkit-scrollbar {
    
    
    display: none;
}

.choice-box>.item>span {
    
    
    font-size: 12px;
    /* 让文本只显示2行,并且超出的部分显示... */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-wrap: break-word;
}

.choice-box>.item {
    
    
    display: flex;
    flex-direction: column;
    width: 80px;
    margin-right: 10px;
}

.choice-box>.item>img {
    
    
    width: 80px;
    border-radius: 8px;
    margin-bottom: 6px;
}

.choice-box>.item>span {
    
    
    font-size: 12px;
}

.category {
    
    
    /* position: absolute; */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    height: 80px;
    display: flex;
    justify-content: space-evenly;

}

.category>.item {
    
    
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    margin-bottom: 5px;
    /* border: 1px solid red; */
    align-items: center;
    justify-content: center;
    margin-left: 3px;
}

.category>.item>span {
    
    
    font-size: 10px;

}

.category>.item>i {
    
    

    color: white;
    font-size: 20px;
    border: 12px solid red;
    border-radius: 70px;
    background-color: red;

}

.story>.story-title {
    
    
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    align-items: center;
    color: #504e4a;

}

.story>.story-title>.fa-play {
    
    
    font-size: 12px;
    color: #999;
    border-radius: 5px;
    border: 1;
    background-color: white;
    border-color: gray;
    padding: 4px;

}

.story-box {
    
    
    margin-top: 10px;
    flex-direction: column;
}

.story-box>.item>.cover {
    
    
    width: 60px;
    height: 60px;
    border-radius: 5px;
}

.story-box>.item>.play {
    
    
    width: 30px;
    height: 30px;
    background-color: red;
    border-radius: 15px;
    margin-left: 50px;

}

.story-box>.item {
    
    
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.story-box>.item>.info {
    
    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 54px;
    margin-left: 7px;
    /* border: 1px solid red; */
    width: 220px;

}

.story-box>.item>.info>.title>span:nth-child(1) {
    
    
    font-size: 15px;
}

.story-box>.item>.info>.title>span:nth-child(2) {
    
    
    font-size: 12px;
    color: gray;
}

.story-box>.item>.info>.ps {
    
    
    display: flex;
    align-items: center;
}

.story-box>.item>.info>.ps>span:nth-child(1) {
    
    
    font-size: 12px;
    color: red;
    border: 1px solid red;
    width: 34px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 6px;
    margin-right: 10px;
}

.story-box>.item>.info>.ps>span:nth-child(2) {
    
    
    font-size: 12px;
    color: gray;
}

HTML+CSS实训——Day04——仿网易云音乐的发现页界面(完成)

主页歌曲推荐

html

css

Find.html

Find.css

猜你喜欢