我需要一个用HTML5加css3加js制作一个杭州的休闲娱乐的网页代码
时间: 2024-03-14 20:46:45 浏览: 20
好的,以下是一个简单的例子,你可以根据自己的需求进行修改和完善。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>杭州休闲娱乐网站</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>杭州休闲娱乐网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>热门活动</h2>
<div class="activity">
<img src="images/activity1.jpg" alt="活动1">
<h3>活动1</h3>
<p>活动1的简介</p>
<a href="#">了解更多</a>
</div>
<div class="activity">
<img src="images/activity2.jpg" alt="活动2">
<h3>活动2</h3>
<p>活动2的简介</p>
<a href="#">了解更多</a>
</div>
<div class="activity">
<img src="images/activity3.jpg" alt="活动3">
<h3>活动3</h3>
<p>活动3的简介</p>
<a href="#">了解更多</a>
</div>
</section>
<section>
<h2>推荐场所</h2>
<div class="place">
<img src="images/place1.jpg" alt="场所1">
<h3>场所1</h3>
<p>场所1的简介</p>
<a href="#">了解更多</a>
</div>
<div class="place">
<img src="images/place2.jpg" alt="场所2">
<h3>场所2</h3>
<p>场所2的简介</p>
<a href="#">了解更多</a>
</div>
<div class="place">
<img src="images/place3.jpg" alt="场所3">
<h3>场所3</h3>
<p>场所3的简介</p>
<a href="#">了解更多</a>
</div>
</section>
</main>
<footer>
<p>版权所有 © 2021 杭州休闲娱乐网站</p>
</footer>
</body>
</html>
```
CSS代码:
```css
/* 全局样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
}
/* 头部样式 */
header {
background-color: #f5f5f5;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
h1 {
font-size: 32px;
font-weight: bold;
color: #333;
}
nav {
display: inline-block;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav ul li a {
color: #333;
text-decoration: none;
}
nav ul li a:hover {
color: #ff6600;
}
/* 内容样式 */
main {
padding: 20px;
}
section {
margin-bottom: 40px;
}
h2 {
font-size: 24px;
font-weight: bold;
color: #333;
margin-bottom: 20px;
}
.activity, .place {
display: inline-block;
margin-right: 20px;
vertical-align: top;
width: 30%;
}
.activity img, .place img {
width: 100%;
height: auto;
}
.activity h3, .place h3 {
font-size: 18px;
font-weight: bold;
color: #333;
margin-top: 10px;
margin-bottom: 5px;
}
.activity p, .place p {
font-size: 14px;
line-height: 1.5;
color: #666;
margin-bottom: 10px;
}
.activity a, .place a {
display: inline-block;
font-size: 14px;
color: #ff6600;
text-decoration: none;
margin-top: 10px;
}
.activity a:hover, .place a:hover {
color: #333;
}
/* 底部样式 */
footer {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
font-size: 14px;
color: #666;
}
```
JavaScript代码:
```javascript
// 暂无JavaScript代码
```