HTML+CSS练习 酷我音乐移动端

已于 2024-05-31 01:28:51 修改
阅读量240 收藏
点赞数 1
分类专栏： 前端 文章标签： html css 前端
于 2024-05-04 21:07:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/okstudy/article/details/138449796
版权

 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">

    <title>Document</title>
</head>
<body>
    <header>
        <div class="left"></div>
        <div class="right">
            <a href="">下载app</a>
        </div>
    </header>
    
    <a href="">
        <div class="search">
            <span class="iconfont icon-sousuo"></span>
            <div class="text">搜索你想听的歌曲</div>
        </div>
    </a>
    
    <div class="banner">
        <ul>
            <li><a href=""><img src="./assets/banner01.jpeg" alt=""></a></li>
        </ul>
    </div>

    <div class="rank">
        <div class="title">酷我排行榜</div>
        <a href="">
            <div class="more">更多<span class="iconfont icon-right"></span></div>
        </a>
    </div>
    
    <div class="content">
        <ul>
            <li>
                <div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div>
                <div class="text">
                    <a href="">
                        <div class="first">
                            酷我热歌榜<span class="iconfont icon-right"></span>
                        </div>
                    </a>
                    <a href="">1.悬溺 - 葛东琪</a>
                    <a href="">2.可能 - 程响</a>
                    <a href="">2.可能 - 程响</a>
                </div>
            </li>
            <li>
                <div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div>
                <div class="text">
                    <a href="">
                        <div class="first">
                            酷我热歌榜<span class="iconfont icon-right"></span>
                        </div>
                    </a>
                    <a href="">1.悬溺 - 葛东琪</a>
                    <a href="">2.可能 - 程响</a>
                    <a href="">2.可能 - 程响</a>
                </div>
            </li>
            <li>
                <div class="pic"><img src="./assets/icon_rank_hot.png" alt=""></div>
                <div class="text">
                    <a href="">
                        <div class="first">
                            酷我热歌榜<span class="iconfont icon-right"></span>
                        </div>
                    </a>
                    <a href="">1.悬溺 - 葛东琪</a>
                    <a href="">2.可能 - 程响</a>
                    <a href="">2.可能 - 程响</a>
                </div>
            </li>
        </ul>
    </div>


    <div class="rank">
        <div class="title">推荐歌单</div>
        <a href="">
            <div class="more">更多<span class="iconfont icon-right"></span></div>
        </a>
    </div>

    <div class="content-2">
        <ul>
            <li>
                <div class="pic">
                    <img src="" alt="">
                    <div class="cover">3621.3w</div>
                </div>
                <div class="text">经典老歌大放送！一人一首代表作！</div>
            </li>
            <li>
                <div class="pic">
                    <img src="" alt="">
                    <div class="cover">3621.3w</div>
                </div>
                <div class="text">经典老歌大放送！一人一首代表作！</div>
            </li>
            <li>
                <div class="pic">
                    <img src="" alt="">
                    <div class="cover">3621.3w</div>
                </div>
                <div class="text">经典老歌大放送！一人一首代表作！</div>
            </li>
            <li>
                <div class="pic">
                    <img src="" alt="">
                    <div class="cover">3621.3w</div>
                </div>
                <div class="text">经典老歌大放送！一人一首代表作！</div>
            </li>
            <li>
                <div class="pic">
                    <img src="" alt="">
                    <div class="cover">3621.3w</div>
                </div>
                <div class="text">经典老歌大放送！一人一首代表作！</div>
            </li>
            <li>
                <div class="pic">
                    <img src="" alt="">
                    <div class="cover">3621.3w</div>
                </div>
                <div class="text">经典老歌大放送！一人一首代表作！</div>
            </li>
        </ul>
        
    </div>


    <div class="download">
        <div class="inside">
            <div class="pic"><img src="./assets/logo.png" alt=""></div>
            <p>安装酷我音乐 发现更多好音乐</p>
            <span class="iconfont icon-right"></span>
        </div>
    </div>
</body>
</html>

index.less 

// out: ../css/

@import "./base.less";

@fs: 3.75vw;

body{
    background-color: #f9fafb;
}

header{
    
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: (50 / @fs);
    padding: 0 (15 / @fs);
    background-color: #fff;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    .left{
        width: (235 / @fs);
        height: (50 / @fs);
        background-color: aqua;
        background: url(../assets/head.png);
        background-size: contain;
        background-repeat: no-repeat;
    }
    .right{
            width: (80 / @fs);
            height: (30 / @fs);
        a{
            display: block;
            width: (80 / @fs);
            height: (30 / @fs);
            background-color: #ffe31b;
            border-radius: (15 / @fs);
            text-align: center;
            line-height:(30 / @fs);
        }
    }
}

.search{ 
    margin: (10 / @fs);
    margin-top: (65 / @fs);

    height: (30 / @fs);
    background-color: #f2f4f5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f2f4f5;
    border-radius:(32 / @fs);
    .icon-sousuo{
        width: (17 / @fs);
        height: (17 / @fs);
        font-size: (17 / @fs);
        color: #a1a4b3;
        position: absolute;
        left: 28%;
    
    }
    .text{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: (30 / @fs);
    font-size: (15 / @fs);
    text-align: center;
    line-height:  (15 / @fs);
    color: #a1a4b3;
    }
}


.banner{
    margin:(10 / @fs) 0  ;
    padding: 0 (10 / @fs);
    height: (102 / @fs);
    ul{
        li{
            height: (102 / @fs);
            img{
                border-radius: (5 / @fs);
                width: 100%;
                height:  100%;
                object-fit: cover;
            }
        }
    }
}

.rank{
    height: (28 / @fs);
    // background-color: red;
    margin-bottom: (13 / @fs);
    padding: 0 (13 / @fs);
    display: flex;
    justify-content: space-between;
    .title{
        font-size: (20 / @fs);
        font-weight: 700;
        color: #262338;
    }
    .more{
        color: #a1a4b3;
        line-height: (28 / @fs);
    }
}

.content{
    ul{
        li{
            height:(105 / @fs);
            background-color: #fff;
            margin: (13 / @fs) ;
            border-radius: (10 / @fs);
            display: flex;
            
            .pic{
                margin-right: (15 / @fs);
                img{
                    width: (105 / @fs);
                    height:(105 / @fs);
                    border-radius: (10 / @fs);
                }
            }
            .text{
                
                a{
                    .first{
                        
                        display: block;
                        font-size:  (18 / @fs) ;
                        color: #262338;
                        // background-color: red;
                        
                        padding-top: (5 / @fs);
                    }
                    display: block;
                    color: #a1a4b3;
                    margin: (4 / @fs) 0;
                    font-size:  (12 / @fs) ;
                    // background-color: aqua;
                }
            }
        }
    }
}



.content-2{
    
    margin-left:  (8 / @fs) ;
    // background-color: pink;
    margin: (13 / @fs) ;
    ul{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        li{
                
        width:(105 / @fs) ;
        height:(154 / @fs) ;
        // background-color: red;
        border-radius: (10 / @fs);
        margin-bottom: (18 / @fs) ;
            .pic{
                width:(105 / @fs) ;
                height:(105 / @fs) ;
                // background-color: aqua;
                border-radius: (10 / @fs);

                
                position: relative;
                img{
                    background: url(../assets/song01.jpeg);
                    background-size: contain;
                    background-repeat: no-repeat;
                    width: 100%;
                    height:  100%;
                    object-fit: cover;
                    border-radius: (10 / @fs);
                }
                
                .cover{
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width:(58 / @fs) ;
                    height:(28 / @fs) ;
                    background-color: rgba(0, 0, 0, .3);
                    border-radius: 0 (10 / @fs) 0 (10 / @fs);
                    font-size: (12 / @fs) ;
                    color: #fff;
                    line-height:(28 / @fs) ;
                    text-align: center;
                }
            }
        
            .text{
                margin-top: (7 / @fs);
                color: #262338;
                font-size: (13 / @fs);
                font-weight: 400;
                line-height: (13 / @fs);
            }
        }
    }
}

.download{
    position: fixed;
    left: 0;
    bottom: (28 / @fs);
    height: (45 / @fs);
    width:  (375 / @fs);
    // background-color: #a02f2f;
    .inside{
        width: (311 / @fs);
        height: (45 / @fs);
        background-color: #fff;
        margin: 0 (28 / @fs);
        border-radius: (20 / @fs);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .pic{
            height: (37 / @fs);
            width:  (37 / @fs);
            margin: (20 / @fs);;
            margin-right: (10 / @fs);
            // background-color: #531616;
            img{
                height: (37 / @fs);
                width: (37 / @fs);
            }
        }
    
        p{
            font-weight: 700;
            color: #333;
            flex: 1;
            font-size: (15 / @fs);;
        }
        .iconfont{
            height: (27 / @fs);
            width:  (27 / @fs);
            color: #333;
            background-color: rgba(0, 0, 0, .05);
            border-radius: 50%;
            font-size:  (20 / @fs);
            font-weight: 700;
            line-height: (27 / @fs);
            text-align: center;
            margin-right: (10 / @fs);
        }
    }
}

base.less

// out: false
*,
::after,
::before {
  box-sizing: border-box;
}

body,
ul,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}

body {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    PingFangSC-Regular,
    "PingFang SC",
    "Microsoft YaHei",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
  font-size: 14px;
  color: #333;
}

img {
  vertical-align: bottom;
}

ul {
  list-style-type: none;
}

a {
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
}

okstudy
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
酷我音乐盒html代码,【Duilib基础篇】：我是这样开发酷我音乐盒的!
weixin_39540178的博客
06-05 759
在开始介绍之前，我们先来看一些常用软件的界面：左上-微信PC版;右上-酷我音乐盒;右下-百度杀毒;左下-爱奇艺上面列举的软件，相信大家都用过，在使用的过程中可能会因为其精美酷炫(比如换色，换肤，透明等效果)的界面而赞叹。当然了，界面的美观很大程度上和美工有直接的关系，不过本文所要介绍的可不是美工，而是一个开源的界面库 ——Duilib。在被广泛使用的同时，其知名度却并不是很高。一提到UI库，很多人...
HTML+CSS素材包，移动端流失布局代码资料
02-16
HTML和CSS是构建网页设计的基础，移动端流失布局则是现代网页设计中不可或缺的一部分，尤其是在响应式设计领域。这个素材包提供了一系列关于移动端流失布局的代码资料，帮助开发者更好地理解和实现这种布局方式。 ...
酷我音乐播放（html、css）
weixin_52120405的博客
03-07 1393
HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="music.css"> </head> <body> <div class="nav"> <div class
酷我音乐盒html代码,酷我皮肤 手机酷我音乐盒皮肤储存在哪
weixin_33095355的博客
06-05 534
酷我音乐皮肤，跪CSS布局HTML小编今天和大家分享原图。到网上去下载新的皮肤，却不知道下载到那个地方。也不知道下载后怎么安安装后位置skin/默认皮肤文件夹。右键击桌面音乐盒，打开属性，起始位置看音乐盒装在磁盘那个位置，然后按位置找到kwmusic/skin再打开skin文件夹，找到默认皮肤文件夹，默认位置c/programfiles/kwmusic/skin 。酷我音乐盒皮肤怎么使用？？？以下...
HTML5+CSS3案例三：酷我音乐
zhaoyang_m的博客
07-23 393
链接：https://pan.baidu.com/s/18yHl9czZRXDRlYjEtnDVSw?
在HTML中添加背景音乐
热门推荐
qq_36765367的博客
09-23 16万+
方法一：在源代码中编写以下几句代码将能实现在HTML网页内添加背景音乐； <audio autoplay="autoplay" controls="controls"loop="loop" preload="auto" src="http://demo.mimvp.com/html5/take_you_fly.mp3"> 你的浏览器版本太低，不支持audi
酷我音乐盒html代码,享受音乐 酷我音乐盒独家秘籍偷偷报
weixin_42394088的博客
06-05 576
一键复制歌词/快速搜索同类歌曲酷我音乐盒是目前网上最火爆的一款音乐播放器，KTV点播、榜单家族、图片秀和音频指纹等独家功能着实赚足了眼球，也拥有了一大批忠实粉丝，时下身为“酷粉”可是一件很时髦的事情哦。不过你真正了解酷我音乐盒多少呢？下面这些独家秘籍你又用过几个，不妨一起来看看吧。一、 一键复制歌词很多歌曲的歌词都写得相当棒，如果想要把歌词完整保存下来，一般大家都会通过百度来搜索歌词。不过网页上直...
html5+css3+js移动端带歌词音乐播放器代码.zip
11-03
在这个“html5+css3+js移动端带歌词音乐播放器代码.zip”压缩包中，我们可以看到一个利用这三种技术实现的移动端音乐播放器，具备显示歌词的功能。 首先，HTML5（HyperText Markup Language第五版）是网页内容的...
酷我音乐移动端Web网页设计
06-05
在本资源中，我们主要探讨的是“酷我音乐移动端Web网页设计”，这涉及到网页开发中的关键技术，包括HTML、CSS以及vw布局。vw布局是移动优先设计理念的重要体现，它使得网页设计能够更好地适应不同屏幕尺寸的设备，...
html+css 移动端商城网页设计实现
04-27
在本文中，我们将深入探讨如何使用HTML5和CSS来实现移动端商城网页的设计。移动商城网站是现代电子商务不可或缺的一部分，它们提供了便捷的购物体验，让用户在手机和平板电脑上也能轻松浏览和购买商品。我们将逐一...
音乐播放器源代码（仿酷我音乐）
05-23
界面模仿了酷我音乐，实现了音乐的播放、暂停、上一首、下一首、三种播放模式，本地歌词同步显示。开发环境android4.0。
java swing 仿酷我音乐盒界面源码
10-10
java swing 仿酷我音乐盒界面。
酷我音乐盒html代码,酷我音乐盒 我的音乐独一无二
weixin_28712661的博客
06-05 675
现在人都讲究个性化追求与众不同，在音乐的世界也是如此。虽然听的歌一样，但每个人听歌时的感悟和心情却是不一样的。怎样才能把自己的音乐心情完全展现出来，让自己的音乐世界变得个性十足呢。那不妨来用酷我音乐盒吧，它提供了一系列的个性化功能，可以满足你个性化的音乐需要，让你的音乐世界从此变得独一无二。一、个性化的音乐口味每个人喜欢的歌曲类型都不尽相同，有时连自己也不知道具体喜欢什么样的歌曲，就是盲目地随机地...
酷我音乐盒html代码,酷我音乐盒2018
weixin_34279705的博客
06-05 554
酷我音乐是一款下载量很高的音乐播放器，软件拥有海量曲库，想听就听，一点即播的速度、完美的音画质量和一流的MV、K歌服务，丰富的音画质选择，超高品质试听及下载，还有音乐推荐功能，根据你平时听歌风格，自动收集你或许会喜欢听的音乐，不用再怕没好听的歌啦，完美软件站提供酷我音乐2018旧版下载。酷我音乐盒2018功能介绍1.100万首海量歌曲及MV资源 ，每周更新80张以上国内外音乐专辑2. 一点即播的试...
酷我音乐盒html代码,如何使用酷我音乐盒的界面及标签？
weixin_35902426的博客
06-05 583
如何使用酷我音乐盒的界面及标签？相信还有很多人不熟悉，下面感兴趣的小伙伴就和小编一起来学习一下使用酷我音乐盒的界面及标签的具体方法吧！一、酷我音乐盒界面 1)标签页入口：正在播放、今日推荐、网路曲库、本地曲库;2)操作按钮区域：更换主题换肤、设置、迷你状态、最小化、最大化、关闭按钮3)登陆区域：登陆个人账户，查看最新消息4)歌曲列表区域：默认播放列表、个人收藏播放列表以及添加、删除、查找、播放模式...
自制仿酷我音乐专辑模块源码实现
weixin_30376083的博客
10-28 837
个人完成编写的schoolnet校园网的仿酷我音乐专辑模块中，用户可以收藏音乐专辑、下载专辑歌曲、关注好友音乐方面的最新动态及在线试听音乐，用户有权管理自己的收藏夹。 实现页面效果： patent.jsp音乐专辑详情页面 music.jsp音乐大厅页面 mymusic.jsp我的音乐页面 好友动态页面 后台音乐管理设置： 数据库表原型设...
HTML(27)——渐变
最新发布
m0_74386799的博客
07-08 300
渐变是多个颜色逐渐变化的效果，一般用于设置盒子模型。
用html+css+js写一个移动端登录页面
09-12
要用HTML、CSS和JS编写一个移动端登录页面，首先，我们需要创建一个HTML文件，然后在文件中添加必要的HTML结构和内容。 在HTML文件中，我们可以使用元素设置视口尺寸，以确保页面适应移动设备的屏幕。然后，我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值