Minecraft 官网 - 探索无限可能 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Minecraft 官网</title>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#" class="active">首页</a></li>
      <li><a href="#">新闻</a></li>
      <li><a href="#">更新</a></li>
      <li><a href="#">玩法</a></li>
    </ul>
  </nav>
  <section class="hero">
    <h1>Welcome to Minecraft</h1>
    <p>Experience limitless possibilities in the world of Minecraft.</p>
    <a href="#" class="cta-button">开始冒险</a>
  </section>
  <section class="news">
    <h2>最新消息</h2>
    <div class="news-item">
      <img src="news1.jpg" alt="News 1">
      <h3>标题 1</h3>
      <p>新闻 1 的描述</p>
    </div>
    <div class="news-item">
      <img src="news2.jpg" alt="News 2">
      <h3>标题 2</h3>
      <p>新闻 2 的描述</p>
    </div>
  </section>
  <section class="updates">
    <h2>最新更新</h2>
    <div class="update-item">
      <img src="update1.jpg" alt="Update 1">
      <h3>更新标题 1</h3>
      <p>更新 1 的描述</p>
    </div>
    <div class="update-item">
      <img src="update2.jpg" alt="Update 2">
      <h3>更新标题 2</h3>
      <p>更新 2 的描述</p>
    </div>
  </section>
  <section class="gameplay">
    <h2>玩法</h2>
    <p>了解 Minecraft 的各种玩法和挑战。</p>
    <a href="#" class="cta-button">开始玩耍</a>
  </section>
  <script src="script.js"></script>
</body>
</html>
/* Reset some default styles */
body, ul {
  margin: 0;
  padding: 0;
}
<p>nav {
background-color: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}</p>
<p>nav ul {
display: flex;
justify-content: space-between;
list-style: none;
padding: 10px;
}</p>
<p>nav li {
margin-right: 20px;
}</p>
<p>nav a {
color: white;
text-decoration: none;
transition: color 0.3s ease;
}</p>
<p>nav a:hover {
color: yellow;
}</p>
<p>section.hero {
background-image: url('hero-background.jpg');
background-size: cover;
background-position: center;
height: 600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}</p>
<p>section.hero h1 {
color: white;
}</p>
<p>section.hero p {
color: white;
margin: 20px 0;
}</p>
<p>section.hero .cta-button {
padding: 10px 20px;
background-color: yellow;
color: black;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}</p>
<p>section.hero .cta-button:hover {
background-color: #ffd700;
}</p>
<p>section.news {
padding: 50px;
}</p>
<p>section.news h2 {
text-align: center;
margin-bottom: 30px;
}</p>
<p>section.news .news-item {
display: flex;
margin-bottom: 20px;
}</p>
<p>section.news .news-item img {
width: 300px;
height: 200px;
object-fit: cover;
margin-right: 20px;
}</p>
<p>section.news .news-item h3 {
margin-bottom: 10px;
}</p>
<p>section.updates {
padding: 50px;
background-color: #f1f1f1;
}</p>
<p>section.updates h2 {
text-align: center;
margin-bottom: 30px;
}</p>
<p>section.updates .update-item {
display: flex;
margin-bottom: 20px;
}</p>
<p>section.updates .update-item img {
width: 300px;
height: 200px;
object-fit: cover;
margin-right: 20px;
}</p>
<p>section.updates .update-item h3 {
margin-bottom: 10px;
}</p>
<p>section.gameplay {
background-color: #ddd;
padding: 100px;
text-align: center;
}</p>
<p>section.gameplay h2 {
margin-bottom: 30px;
}</p>
<p>section.gameplay p {
margin-bottom: 20px;
}</p>
<p>.cta-button {
padding: 10px 20px;
background-color: yellow;
color: black;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}</p>
<p>.cta-button:hover {
background-color: #ffd700;
}
// 在导航栏的链接之间切换活动状态
const navLinks = document.querySelectorAll('nav a');
navLinks.forEach(link =&gt; {
link.addEventListener('click', () =&gt; {
navLinks.forEach(link =&gt; link.classList.remove('active'));
link.classList.add('active');
});
});</p>