HTML + CSS 连载 | - 网易云音乐 ITEM

作者：System 时间：2024年08月17日分类：所有,css 字数：1514

由于原代码较长，以下仅展示核心部分，包括HTML结构和CSS样式的应用。




<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云音乐 - 歌单</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="item">
        <div class="cover">
            <img src="cover.jpg" alt="歌单封面">
        </div>
        <div class="info">
            <div class="title">
                <a href="https://music.163.com/playlist?id=313662571" target="_blank">
                    周杰伦 - 精选歌曲
                </a>
            </div>
            <div class="creator">
                <a href="https://music.163.com/user/home?id=132868885" target="_blank">
                    网易云音乐用户
                </a>
            </div>
            <div class="description">
                周杰伦精选歌曲，包含热爱的歌曲。
            </div>
        </div>
    </div>
</body>
</html>




/* style.css */
.item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
 
.cover img {
    width: 120px;
    height: 120px;
    object-fit: cover;
}
 
.info {
    margin-left: 15px;
    flex: 1;
}
 
.title, .creator, .description {
    margin-bottom: 5px;
}
 
.title a, .creator a {
    color: #333;
    text-decoration: none;
}
 
.creator a:hover, .title a:hover {
    text-decoration: underline;
}

以上代码展示了如何使用HTML和CSS创建一个简单的网易云音乐歌单项目的基本结构和样式。这个示例教学有效地展示了HTML和CSS的基本用法，并且为进一步学习网页设计与开发奠定了基础。

HTML + CSS 连载 | - 网易云音乐 ITEM

评论已关闭

推荐阅读