制作一个蔡徐坤html+css偶像界面
时间: 2024-02-16 11:53:07 浏览: 136
使用HTML+CSS技术制作篮球明星介绍网站
5星 · 资源好评率100%
好的,下面是一个简单的蔡徐坤偶像界面的HTML和CSS代码,你可以自己根据需要进行修改:
HTML代码:
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>蔡徐坤偶像界面</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>蔡徐坤偶像界面</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">音乐</a></li>
<li><a href="#">视频</a></li>
</ul>
</nav>
</header>
<section class="profile">
<div class="avatar">
<img src="https://i.loli.net/2021/08/10/W7L9DcK8N4RQw6m.png" alt="蔡徐坤头像">
</div>
<div class="info">
<h2>蔡徐坤</h2>
<p>1998年8月2日出生于湖南省长沙市,中国流行男歌手、演员、舞者、音乐制作人、潮牌设计师、公益慈善大使。</p>
</div>
</section>
<section class="music">
<h2>音乐作品</h2>
<ul>
<li><a href="#">1. Youth</a></li>
<li><a href="#">2. Wait Wait Wait</a></li>
<li><a href="#">3. No Matter</a></li>
<li><a href="#">4. 沸</a></li>
<li><a href="#">5. 1.2</a></li>
</ul>
</section>
<section class="video">
<h2>视频作品</h2>
<ul>
<li><a href="#">1. 蔡徐坤《YOUTH WITH YOU2》THE9成团公演舞台</a></li>
<li><a href="#">2. 蔡徐坤《创造营2019》全场舞台合集</a></li>
<li><a href="#">3. 蔡徐坤《爱情废柴》MV</a></li>
<li><a href="#">4. 蔡徐坤《Lover》现场版</a></li>
<li><a href="#">5. 蔡徐坤《YOUNG》MV</a></li>
</ul>
</section>
<footer>
<p>版权所有 © 蔡徐坤工作室</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
font-family: "Microsoft YaHei", sans-serif;
background-color: #F4F4F4;
}
header {
background-color: #000;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav li {
margin-left: 20px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 18px;
}
.profile {
display: flex;
align-items: center;
margin-top: 50px;
}
.avatar img {
width: 200px;
height: 200px;
border-radius: 50%;
margin-right: 50px;
}
.info h2 {
font-size: 36px;
margin: 0;
margin-bottom: 20px;
}
.info p {
font-size: 18px;
line-height: 1.5;
}
.music ul,
.video ul {
list-style: none;
margin: 0;
padding: 0;
}
.music li,
.video li {
margin-bottom: 20px;
}
.music a,
.video a {
color: #000;
text-decoration: none;
font-size: 18px;
}
.music h2,
.video h2 {
font-size: 36px;
margin: 0;
margin-bottom: 20px;
}
footer {
background-color: #000;
color: #fff;
text-align: center;
padding: 20px;
}
```
你可以将上面的代码复制到你的HTML和CSS文件中,然后保存并打开HTML文件,就可以看到一个简单的蔡徐坤偶像界面了。
阅读全文