写一个网易云首页样式
<!DOCTYPE html>
<html>
<head>
<title>网易云音乐</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
<pre><code> .header {
background-color: #c20c0c;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
}
.header-logo {
font-size: 24px;
font-weight: bold;
}
.header-links {
display: flex;
align-items: center;
}
.header-link {
color: #fff;
font-size: 16px;
margin-right: 20px;
cursor: pointer;
}
.header-link:hover {
text-decoration: underline;
}
.hero {
background-color: #f5f5f5;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-top: 100px;
padding-bottom: 100px;
}
.hero-title {
font-size: 48px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
.hero-subtitle {
font-size: 24px;
margin-bottom: 40px;
text-align: center;
}
.hero-button {
background-color: #c20c0c;
color: #fff;
font-size: 16px;
font-weight: bold;
padding: 10px 20px;
border: none;
border-radius: 20px;
cursor: pointer;
}
.hero-button:hover {
background-color: #9b0b0b;
}
.featured {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
margin-top: 80px;
margin-bottom: 80px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.featured-item {
width: 30%;
margin-bottom: 20px;
padding: 10px;
box-sizing: border-box;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
cursor: pointer;
}
.featured-item:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.featured-item-image {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
border-radius: 5px;
margin-bottom: 10px;
}
.featured-item-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.featured-item-artist {
font-size: 14px;
color: #999;
margin-bottom: 10px;
}
.footer {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
font-size: 14px;
}
.footer-logo {
font-size: 24px;
font-weight: bold;
}
.footer-links {
display: flex;
align-items: center;
}
.footer-link {
color: #fff;
margin-right: 20px;
cursor: pointer;
}
.footer-link:hover {
text-decoration: underline;
}
</style>
</code></pre>
</head>
<body>
<header class="header">
<div class="header-logo">网易云音乐</div>
<div class="header-links">
<div class="header-link">发现音乐</div>
<div class="header-link">我的音乐</div>
<div class="header-link">朋友</div>
<div class="header-link">商城</div>
<div class="header-link">音乐人</div>
<div class="header-link">下载客户端</div>
</div>
</header>
<section class="hero">
<h1 class="hero-title">发现更多音乐</h1>
<p class="hero-subtitle">听你喜欢的音乐，发现你感兴趣的内容</p>
<button class="hero-button">立即体验</button>
</section>
<section class="featured">
<div class="featured-item">
<div class="featured-item-image" style="background-image: url('https://p1.music.126.net/cnKmZ7V3q-3aW8A5jMFQ1Q==/109951165607908323.jpg')"></div>
<div class="featured-item-title">告白气球</div>
<div class="featured-item-artist">周杰伦</div>
</div>
<div class="featured-item">
<div class="featured-item-image" style="background-image: url('https://p1.music.126.net/55z4X9vLdKBNsGyBBs8JFw==/109951165605766089.jpg')"></div>
<div class="featured-item-title">那些年</div>
<div class="featured-item-artist">胡夏</div>
</div>
<div class="featured-item">
<div class="featured-item-image" style="background-image: url('https://p1.music.126.net/tR7n5f5DkV8WwK5m5n7hCg==/109951165607246252.jpg')"></div>
<div class="featured-item-title">世界上最伟大的旅程</div>
<div class="featured-item-artist">凯瑟喵</div>
</div>
<div class="featured-item">
<div class="featured-item-image" style="background-image: url('https://p1.music.126.net/0jzwZ2wF8xvJhD6N7ZLdJQ==/109951165607385351.jpg')"></div>
<div class="featured-item-title">野狼Disco</div>
<div class="featured-item-artist">宝石GemShine</div>
</div>
<div class="featured-item">
<div class="featured-item-image" style="background-image: url('https://p1.music.126.net/7T0uoZQ2Q0K1l9L1OaHJpw==/109951165607385352.jpg')"></div>
<div class="featured-item-title">Glow</div>
<div class="featured-item-artist">Bee</div>
</div>
<div class="featured-item">
<div class="featured-item-image" style="background-image: url('https://p1.music.126.net/nF8V0W9p-zO7tDhFPrPf8Q==/109951165607385478.jpg')"></div>
<div class="featured-item-title">MiM</div>
<div class="featured-item-artist">MIMI</div>
</div>
</section>
<footer class="footer">
<div class="footer-logo">网易云音乐</div>
<div class="footer-links">
<div class="footer-link">关于</div>
<div class="footer-link">服务条款</div>
<div class="footer-link">客户服务</div>
<div class="footer-link">版权投诉指引</div>
<div class="footer-link">意见反馈</div>
</div>
</footer>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/b2zc 著作权归作者所有。请勿转载和采集!