制作简单HTML+CSS蔡徐坤界面代码
时间: 2023-11-15 16:06:15 浏览: 149
明星个人网站蔡徐坤网页设计(HTML+CSS)
以下是一个简单的HTML+CSS蔡徐坤界面代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>蔡徐坤界面</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
color: #333;
margin: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
}
nav {
background-color: #fff;
border-bottom: 1px solid #ccc;
padding: 10px;
text-align: center;
}
nav a {
color: #333;
text-decoration: none;
margin: 0 10px;
font-size: 20px;
}
nav a:hover {
color: #f00;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
section {
margin-bottom: 20px;
}
h2 {
font-size: 24px;
margin-bottom: 10px;
}
p {
line-height: 1.5;
margin: 0;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
</style>
</head>
<body>
<header>
<h1>蔡徐坤</h1>
</header>
<nav>
<a href="#">首页</a>
<a href="#">新闻</a>
<a href="#">照片</a>
<a href="#">视频</a>
<a href="#">音乐</a>
</nav>
<main>
<section>
<h2>个人简介</h2>
<p>蔡徐坤,1998年8月2日出生于湖南省长沙市,中国内地男歌手、演员、舞者、主持人。2014年,参加选秀节目《快乐男声》获得全国总冠军。2016年,以练习生身份参加真人秀节目《偶像练习生》。2018年,签约华谊兄弟并正式出道。2019年,参加《偶像练习生》的综艺节目《创造营2019》,获得第一名。</p>
</section>
<section>
<h2>照片</h2>
<img src="https://img1.doubanio.com/view/photo/l/public/p2566878983.webp" alt="蔡徐坤照片">
<img src="https://img3.doubanio.com/view/photo/l/public/p2573930131.webp" alt="蔡徐坤照片">
<img src="https://img2.doubanio.com/view/photo/l/public/p2573929798.webp" alt="蔡徐坤照片">
</section>
<section>
<h2>视频</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/a9oN9eC5HnQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
<section>
<h2>音乐</h2>
<iframe width="560" height="315" src="https://www.youtube.com/embed/1WnEAh9kP3o" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</section>
</main>
</body>
</html>
```
这段代码会创建一个包括蔡徐坤个人简介、照片、视频和音乐的简单网页,其中包括了基本的HTML和CSS元素,包括背景色、字体、颜色、边框、内边距和外边距等。
阅读全文