使用html+css写一个TNT时代少年团的主要作品的代码,包括音乐专辑,音乐单曲,综艺节目,杂志写真以及,演唱会记录
时间: 2023-10-10 21:11:33 浏览: 51
以下是一个简单的 HTML+CSS 代码示例,展示了 TNT 时代少年团的主要作品:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TNT时代少年团作品</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #000;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
font-size: 36px;
margin: 0;
}
nav {
background-color: #f2f2f2;
display: flex;
justify-content: center;
padding: 10px;
}
nav a {
color: #000;
margin: 0 20px;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover {
color: #ff0000;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 20px;
}
article {
background-color: #fff;
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
text-align: center;
width: 200px;
}
article img {
width: 100%;
}
article h2 {
font-size: 24px;
margin: 10px 0;
}
article p {
font-size: 14px;
margin: 10px 0;
}
</style>
</head>
<body>
<header>
<h1>TNT时代少年团作品</h1>
</header>
<nav>
<a href="#album">音乐专辑</a>
<a href="#single">音乐单曲</a>
<a href="#variety">综艺节目</a>
<a href="#magazine">杂志写真</a>
<a href="#concert">演唱会记录</a>
</nav>
<section>
<article id="album">
<img src="tnt_album_cover.jpg" alt="TNT时代少年团音乐专辑封面">
<h2>音乐专辑</h2>
<p>《青春有你2》</p>
</article>
<article id="single">
<img src="tnt_single_cover.jpg" alt="TNT时代少年团音乐单曲封面">
<h2>音乐单曲</h2>
<p>《风暴》</p>
</article>
<article id="variety">
<img src="tnt_variety_cover.jpg" alt="TNT时代少年团综艺节目封面">
<h2>综艺节目</h2>
<p>《青春有你2》</p>
</article>
<article id="magazine">
<img src="tnt_magazine_cover.jpg" alt="TNT时代少年团杂志写真封面">
<h2>杂志写真</h2>
<p>《VOGUE Me》</p>
</article>
<article id="concert">
<img src="tnt_concert_cover.jpg" alt="TNT时代少年团演唱会记录封面">
<h2>演唱会记录</h2>
<p>《TNT 1st Concert》</p>
</article>
</section>
</body>
</html>
```
你可以将上述代码保存为一个 `.html` 文件,然后在浏览器中打开该文件,即可看到一个简单的页面,展示了 TNT 时代少年团的主要作品。当你点击导航栏中的不同链接时,页面会滚动到相应的部分。