使用html帮我设计一个关于广州旅游的网站
时间: 2024-03-01 08:53:22 浏览: 15
好的,以下是一个简单的关于广州旅游的网站设计示例:
```
<!DOCTYPE html>
<html>
<head>
<title>广州旅游指南</title>
<style>
/* 导航栏样式 */
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
/* 标题样式 */
h1 {
text-align: center;
margin-top: 50px;
}
/* 特色景点样式 */
.spot {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
.spot .item {
margin: 20px;
text-align: center;
}
.spot img {
width: 200px;
height: 150px;
object-fit: cover;
border-radius: 10px;
}
.spot h3 {
margin-top: 10px;
}
/* 旅游路线样式 */
.route {
margin-top: 50px;
}
.route h2 {
text-align: center;
}
.route ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.route li {
margin: 20px;
text-align: center;
}
.route img {
width: 200px;
height: 150px;
object-fit: cover;
border-radius: 10px;
}
.route h3 {
margin-top: 10px;
}
/* 联系表单样式 */
form {
margin-top: 50px;
text-align: center;
}
input[type=text], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #333;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav>
<a href="#">首页</a>
<a href="#">特色景点</a>
<a href="#">旅游路线</a>
<a href="#">联系我们</a>
</nav>
<!-- 标题 -->
<h1>广州旅游指南</h1>
<!-- 特色景点 -->
<div class="spot">
<div class="item">
<img src="img/spot1.jpg" alt="珠江夜游">
<h3>珠江夜游</h3>
</div>
<div class="item">
<img src="img/spot2.jpg" alt="白云山">
<h3>白云山</h3>
</div>
<div class="item">
<img src="img/spot3.jpg" alt="陈家祠">
<h3>陈家祠</h3>
</div>
<div class="item">
<img src="img/spot4.jpg" alt="沙面">
<h3>沙面</h3>
</div>
<div class="item">
<img src="img/spot5.jpg" alt="上下九步行街">
<h3>上下九步行街</h3>
</div>
<div class="item">
<img src="img/spot6.jpg" alt="黄埔军校">
<h3>黄埔军校</h3>
</div>
</div>
<!-- 旅游路线 -->
<div class="route">
<h2>旅游路线推荐</h2>
<ul>
<li>
<img src="img/route1.jpg" alt="珠江夜游">
<h3>珠江夜游</h3>
</li>
<li>
<img src="img/route2.jpg" alt="白云山">
<h3>白云山</h3>
</li>
<li>
<img src="img/route3.jpg" alt="陈家祠">
<h3>陈家祠</h3>
</li>
<li>
<img src="img/route4.jpg" alt="沙面">
<h3>沙面</h3>
</li>
<li>
<img src="img/route5.jpg" alt="上下九步行街">
<h3>上下九步行街</h3>
</li>
<li>
<img src="img/route6.jpg" alt="黄埔军校">
<h3>黄埔军校</h3>
</li>
</ul>
</div>
<!-- 联系表单 -->
<div class="form">
<h2>联系我们</h2>
<form>
<label for="name">姓名</label>
<input type="text" id="name" name="name" placeholder="请输入你的姓名">
<label for="email">电子邮件</label>
<input type="text" id="email" name="email" placeholder="请输入你的电子邮件">
<label for="message">留言</label>
<textarea id="message" name="message" placeholder="请输入你的留言"></textarea>
<input type="submit" value="提交">
</form>
</div>
</body>
</html>
```
你可以将这段代码保存为一个 `.html` 文件,并在浏览器中打开它,就可以看到一个简单的关于广州旅游的网站了。请注意,这只是一个示例,你可以根据自己的需要进行修改和扩展。如果需要更多的页面和功能,可以添加更多的HTML代码和CSS样式。