帮我用html写一个运动的静态网站
时间: 2023-08-28 12:11:09 浏览: 40
好的,以下是一个简单的运动主题的静态网站的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Sports Website</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #555;
color: #fff;
padding: 10px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: bold;
padding: 5px;
transition: all .3s ease;
}
nav a:hover {
background-color: #fff;
color: #333;
border-radius: 5px;
}
.banner {
background-image: url('https://images.unsplash.com/photo-1579546923635-4cddf1a6b239?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60');
background-size: cover;
background-position: center;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 32px;
font-weight: bold;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
}
.card {
background-color: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,.3);
padding: 20px;
margin-bottom: 20px;
flex-basis: calc(33.33% - 20px);
}
h2 {
font-size: 24px;
font-weight: bold;
margin-top: 0;
margin-bottom: 10px;
}
.para {
margin: 0;
padding: 0;
line-height: 1.5;
}
.btn {
background-color: #333;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: all .3s ease;
}
.btn:hover {
background-color: #fff;
color: #333;
border: 1px solid #333;
}
.footer {
background-color: #555;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header class="header">
<h1>Sports Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section class="banner">
<h2>Find Your Passion for Sports</h2>
</section>
<div class="container">
<div class="card">
<h2>Tennis Lessons</h2>
<p class="para">Learn tennis from the experts. Our coaches have years of experience and can help you improve your game.</p>
<button class="btn">Learn More</button>
</div>
<div class="card">
<h2>Running Club</h2>
<p class="para">Join our running club and meet other runners in your area. We have group runs every week and organize races throughout the year.</p>
<button class="btn">Learn More</button>
</div>
<div class="card">
<h2>Basketball Camp</h2>
<p class="para">Sign up for our basketball camp and learn from some of the best coaches in the country. Improve your skills and have fun.</p>
<button class="btn">Learn More</button>
</div>
</div>
<footer class="footer">
<p>Copyright © Sports Website</p>
</footer>
</body>
</html>
```
这个示例包含了一个简单的头部和导航栏,一个横幅图片,以及三个卡片式的内容块。在这个示例中,我们使用了CSS来添加样式,包括颜色、字体、布局等。您可以根据自己的需要进行更改和定制。