用css html帮我制作一个有关于NBA的网站,要求分六个板块,并且给我代码
时间: 2024-02-17 16:05:28 浏览: 101
好的,以下是一个简单的NBA网站的HTML和CSS代码,分成六个板块:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>NBA</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>NBA新闻</h1>
<nav>
<ul>
<li><a href="#news">NBA新闻</a></li>
<li><a href="#games">比赛赛况</a></li>
<li><a href="#teams">球队介绍</a></li>
<li><a href="#players">球员介绍</a></li>
<li><a href="#history">NBA历史</a></li>
<li><a href="#videos">NBA视频</a></li>
</ul>
</nav>
</header>
<main>
<section id="news">
<h2>NBA新闻</h2>
<article>
<h3>标题1</h3>
<p>内容1</p>
</article>
<article>
<h3>标题2</h3>
<p>内容2</p>
</article>
</section>
<section id="games">
<h2>比赛赛况</h2>
<article>
<h3>标题1</h3>
<p>内容1</p>
</article>
<article>
<h3>标题2</h3>
<p>内容2</p>
</article>
</section>
<section id="teams">
<h2>球队介绍</h2>
<article>
<h3>球队1</h3>
<img src="team1.png">
<p>介绍1</p>
</article>
<article>
<h3>球队2</h3>
<img src="team2.png">
<p>介绍2</p>
</article>
</section>
<section id="players">
<h2>球员介绍</h2>
<article>
<h3>球员1</h3>
<img src="player1.png">
<p>介绍1</p>
</article>
<article>
<h3>球员2</h3>
<img src="player2.png">
<p>介绍2</p>
</article>
</section>
<section id="history">
<h2>NBA历史</h2>
<article>
<h3>标题1</h3>
<p>内容1</p>
</article>
<article>
<h3>标题2</h3>
<p>内容2</p>
</article>
</section>
<section id="videos">
<h2>NBA视频</h2>
<article>
<h3>视频1</h3>
<p>描述1</p>
<video src="video1.mp4"></video>
</article>
<article>
<h3>视频2</h3>
<p>描述2</p>
<video src="video2.mp4"></video>
</article>
</section>
</main>
</body>
</html>
```
CSS代码:
```css
/* 全局样式 */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* 页头样式 */
header {
background-color: #333;
color: #fff;
padding: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav ul {
list-style: none;
display: flex;
}
nav ul li {
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
/* 主内容样式 */
main {
padding: 10px;
}
section {
margin-bottom: 30px;
}
section h2 {
font-size: 24px;
margin-bottom: 10px;
}
article {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
article h3 {
font-size: 18px;
margin-top: 0;
}
article p {
margin: 0;
}
article img {
max-width: 100%;
height: auto;
}
article video {
max-width: 100%;
height: auto;
}
```
希望这个简单的示例能够对您有所帮助!