用HTML和CSS做一个复杂的关于安徽旅游景点的网页
时间: 2024-06-08 12:07:15 浏览: 25
好的,以下是一个简单的示例,它包含一些安徽的旅游景点和相关信息。你可以根据自己的需求进行修改和扩展。
HTML代码:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>安徽旅游景点</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #0072c6;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f3f3f3;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #0072c6;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
section {
margin: 20px;
}
article {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
margin-bottom: 20px;
padding: 20px;
}
h1 {
font-size: 24px;
margin: 0 0 10px 0;
}
h2 {
font-size: 18px;
margin: 0 0 5px 0;
}
p {
line-height: 1.5em;
margin: 0 0 10px 0;
}
img {
max-width: 100%;
}
footer {
background-color: #ccc;
color: #333;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>安徽旅游景点</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">黄山</a></li>
<li><a href="#">徽州古城</a></li>
<li><a href="#">宏村</a></li>
<li><a href="#">九华山</a></li>
</ul>
</nav>
<section>
<article>
<h1>黄山</h1>
<img src="https://img1.qunarzz.com/travel/d4/1810/b4/cf2c1d3f4b5d9d5c.jpg_r_720x480x95_0708ce30.jpg" alt="黄山">
<p>黄山位于安徽省南部,是中国著名的风景名胜区之一。她以奇松、怪石、云海、温泉而著名于世界。这里的云海、日出、晚霞、冬雪、春雨、秋枫都是黄山的六大奇观。</p>
<h2>交通</h2>
<p>黄山机场距离市区约50公里,有航班飞往国内多个城市;黄山火车站有多趟高速列车直达上海、南京、合肥等城市;市区有多条公交线路和出租车可前往黄山风景区。</p>
<h2>门票</h2>
<p>黄山风景区门票分为旺季和淡季,旺季门票价格较高。具体门票价格和开放时间请参考官方网站。</p>
</article>
<article>
<h1>徽州古城</h1>
<img src="https://img1.qunarzz.com/travel/d3/1708/8d/1f2ce4e9a2a9c2c0.jpg_r_720x480x95_c8f8d3dd.jpg" alt="徽州古城">
<p>徽州古城位于安徽省黄山市徽州区,是中国四大古民居之一,也是国家AAAAA级旅游景区。这里保留了许多明清时期的古建筑、街巷、民俗等文化遗产。</p>
<h2>交通</h2>
<p>徽州古城距离黄山市区约50公里,市区有多条公交线路和出租车可前往;也可在黄山市火车站乘坐前往徽州的班车。</p>
<h2>门票</h2>
<p>徽州古城门票价格为80元/人,学生票价格为40元/人。具体门票价格和开放时间请参考官方网站。</p>
</article>
<article>
<h1>宏村</h1>
<img src="https://img1.qunarzz.com/travel/d7/1709/f3/7fcb4b5a1a3a9520.jpg_r_720x480x95_f6cf6d84.jpg" alt="宏村">
<p>宏村位于安徽省黄山市屯溪区,是中国四大古民居之一,也是国家AAAAA级旅游景区。她以其典型的南方水乡建筑风格、古老的民俗文化、美丽的自然风景而著名。</p>
<h2>交通</h2>
<p>宏村距离黄山市区约70公里,市区有多条公交线路和出租车可前往;也可在黄山市火车站、汽车站乘坐前往宏村的班车。</p>
<h2>门票</h2>
<p>宏村门票价格为104元/人,学生票价格为52元/人。具体门票价格和开放时间请参考官方网站。</p>
</article>
<article>
<h1>九华山</h1>
<img src="https://img1.qunarzz.com/travel/d6/201407/02/0a54d644b879a0f5.jpg_r_720x480x95_a6f5a7bf.jpg" alt="九华山">
<p>九华山位于安徽省池州市青阳县,是中国著名的道教名山之一。她以奇峰、怪石、云海、温泉而著名于世界。这里的云海、日出、晚霞、冬雪、春雨、秋枫都是九华山的六大奇观。</p>
<h2>交通</h2>
<p>九华山距离池州市区约60公里,市区有多条公交线路和出租车可前往;也可在池州市火车站、汽车站乘坐前往九华山的班车。</p>
<h2>门票</h2>
<p>九华山门票价格为130元/人,学生票价格为65元/人。具体门票价格和开放时间请参考官方网站。</p>
</article>
</section>
<footer>
<p>版权所有 © 2021 安徽旅游局</p>
</footer>
</body>
</html>
```
CSS代码:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #0072c6;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f3f3f3;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #0072c6;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
section {
margin: 20px;
}
article {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
margin-bottom: 20px;
padding: 20px;
}
h1 {
font-size: 24px;
margin: 0 0 10px 0;
}
h2 {
font-size: 18px;
margin: 0 0 5px 0;
}
p {
line-height: 1.5em;
margin: 0 0 10px 0;
}
img {
max-width: 100%;
}
footer {
background-color: #ccc;
color: #333;
padding: 20px;
text-align: center;
}
```
在这个示例中,我们使用HTML和CSS创建了一个简单的安徽旅游景点网页。该网页包括一个页面标题,一个导航栏,四个景点文章,以及一个页脚。每个景点文章都包括景点名称、一张图片、景点介绍、交通信息和门票信息。导航栏包括首页和四个景点链接。
相关推荐
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![md](https://img-home.csdnimg.cn/images/20210720083646.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)