【html+css练习】小白使用html+css模拟音乐播放器构造了网页音乐播放器--1

纯html+css构造网页音乐播放器

此处参照各大音乐播放器

这个页面使用了1天的时间进行构造,由于对各语法还不是很熟悉,所以用的时间比较久,且很多地方可能写得也不是很好,后面我会持续更新我的音乐播放器,如果有大神可以指教,同样感激不尽!

此音乐播放器仅完成了三分之二左右,且对javascript语言并不是很熟悉,所以没有能让页面 “动起来”
,后期相关的页面操作会使用typescript编程语言进行完善,同时请各位大佬多多指教!

以下是目前完成的样式,后期随着对语言的熟悉会对此页面进行重构,请各位多多指教!!
Drogon音乐

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>DraGon Music</title>
    <link rel="ICON NAME" href="./logo.png" type="image/x-icon" />
    <link rel="stylesheet" href="./style.css" />
</head>

<body>
    <!-- 导航栏 -->
    <header class="mod_header">
        <div class="dragonmusic_inner">
            <h1 class="dragonmusic_title">
                <a href="#"><img src="./dragon.png" alt="DraGon音乐" class="DraGon_music_logo" /></a>
            </h1>
            <div class="mod_top_nav">
                <span class="top_nav__item"><a href="#" class="top_nav" id="hall">音乐馆</a></span>
                <span class="top_nav__item"><a href="#" class="top_nav">我的音乐</a></span>
                <span class="top_nav__item"><a href="#" class="top_nav">客户端</a></span>
                <span class="top_nav__item"><a href="#" class="top_nav">开放平台</a></span>
                <span class="top_nav__item"><a href="#" class="top_nav">VIP</a></span>
                <label id="placeholder">
                    <input class="search_input__input" type="text" placeholder="搜索音乐、MV、歌单、用户" />
                    <button class="search_input__btn" type="submit"><img src="./search.png" alt="查询"
                             class="img_search"></button>
                </label>
                <div class="top">
                    <button class="top_login" type="submit">登录</button>
                    <button class="top_register top_login" type="submit">注册</button>
                </div>
            </div>
            <div class="top_subnav__item mod_top_nav">
                <hr class="dividing">
                <a href="#" class="mod_index top_nav"><span>首页</span></a>
                <a href="#" class="mod_index top_nav"><span>歌手</span></a>
                <a href="#" class="mod_index top_nav"><span>新碟</span></a>
                <a href="#" class="mod_index top_nav"><span>排行榜</span></a>
                <a href="#" class="mod_index top_nav"><span>分类歌单</span></a>
                <a href="#" class="mod_index top_nav"><span>电台</span></a>
                <a href="#" class="mod_index top_nav"><span>MV</span></a>
                <a href="#" class="mod_index top_nav"><span>数字专辑</span></a>
                <a href="#" class="mod_index top_nav"><span>票务</span></a>
            </div>
        </div>
    </header>

    <!-- 内容 -->
    <main class="text_subject">
        <!-- 歌单推荐模块 -->
        <div class="index__subject">
            <div class="index__tit">
                <h2 class="index__tit_sing" id="song">
                    <b class="icon_txt_sing">歌单推荐</b>
                </h2>
            </div>
            <section class="mod_index_tab">
                <a href="#" class="mod_index top_nav"><span>为你推荐</span></a>
                <a href="#" class="mod_index top_nav"><span>情歌</span></a>
                <a href="#" class="mod_index top_nav"><span>伤感</span></a>
                <a href="#" class="mod_index top_nav"><span>网络情歌</span></a>
                <a href="#" class="mod_index top_nav"><span>官方歌单</span></a>
                <a href="#" class="mod_index top_nav"><span>经典</span></a>
            </section>
            <nav class="mod_index_tab" id="song_recommendation">

                <img src
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Warolitbos

如果有帮助,请我喝咖啡!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值