演示网站 音乐App界面HTML+CSS网页代码
编写代码
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>音乐App界面HTML+CSS网页代码</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="./style.css"> </head> <body> <!-- partial:index.partial.html --> <div class="phone"> <header class="header"> <div class="header-logo"> <div> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="header-title"> Home </div> <div class="header-buttons"> <button class="notifications"> <i class="ai-bell"></i> </button> <button class="avatar"> <img src="https://assets.codepen.io/285131/pexels-photo-838875.jpeg" /> </button> </div> </header> <section class="title"> <h1>Listening Everyday</h1> <p>Explore millions of music according to your taste</p> </section> <section class="search"> <div class="search-inner"> <button class="search-button"> <i class="ai-search"></i> </button> <input type="text" class="search-input" placeholder="Search Music" /> </div> </section> <nav class="navigation"> <a href="#" class="navigation-item active">Overview</a> <a href="#" class="navigation-item">Songs</a> <a href="#" class="navigation-item">Albums</a> <a href="#" class="navigation-item">Artists</a> </nav> <section class="playlists"> <article class="card"> <div class="card-inner"> <span class="card-pin"></span> <div class="card-image"> <img src="https://assets.codepen.io/285131/illustration-hand-with-cigarette-icon.jpg" /> </div> <div class="card-content"> <div class="card-meta"> <span class="card-meta-number">20 songs</span> <button class="card-meta-button"> <i class="ai-circle-triangle-right-fill"></i> </button> </div> <h2 class="card-title">Alan Walker</h2> </div> </div> </article> <article class="card"> <div class="card-inner"> <span class="card-pin"></span> <div class="card-image"> <img src="https://assets.codepen.io/285131/hand-drawn-monster-milkshake.jpg" /> </div> <div class="card-content"> <div class="card-meta"> <span class="card-meta-number">20 songs</span> <button class="card-meta-button"> <i class="ai-circle-triangle-right-fill"></i> </button> </div> <h2 class="card-title">Tim Bergling</h2> </div> </div> </article> </section> <section class="currently-playing"> <article class="card horizontal"> <div class="card-inner"> <span class="card-pin simple"></span> <div class="card-image"> <img src="https://assets.codepen.io/285131/pink-pastel-juicy-banana.jpg" /> </div> <div class="card-content"> <div class="card-meta"> <span class="card-meta-artist">Marshmello</span> <button class="card-meta-button" style="opacity: 0;"> <i class="ai-circle-triangle-right-fill"></i> </button> </div> <h2 class="card-title">Hate the Other Side <span class="card-time">3:40</span> </h2> </div> <span class="card-pin simple"></span> </div> </article> </section> <footer class="menu"> <div class="menu-inner"> <a href="#" class="menu-item active"> <i class="ai-home"></i> </a> <a href="#" class="menu-item"> <i class="ai-heart"></i> </a> <a href="#" class="menu-item"> <i class="ai-fire"></i> </a> <a href="#" class="menu-item"> <i class="ai-gear"></i> </a> </div> </footer> </div> <!-- partial --> <script src='https://unpkg.com/akar-icons-fonts'></script> </body> </html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
