css+html 云南旅游网站代码
时间: 2024-05-02 11:04:56 浏览: 84
很抱歉,我无法提供完整的云南旅游网站代码。但我可以给你一个简单的 HTML 和 CSS 示例,你可以根据需要进行修改和补充。
HTML:
```
<!DOCTYPE html>
<html>
<head>
<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>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>云南旅游景点</h2>
<ul>
<li>
<img src="img/dianchi.jpg" alt="滇池">
<h3>滇池</h3>
<p>滇池是中国第八大淡水湖,位于昆明市区西南部。</p>
</li>
<li>
<img src="img/shangrila.jpg" alt="香格里拉">
<h3>香格里拉</h3>
<p>香格里拉是云南省迪庆藏族自治州的一个县级市,被誉为“世外桃源”。</p>
</li>
<li>
<img src="img/lijiang.jpg" alt="丽江">
<h3>丽江</h3>
<p>丽江是云南省丽江市下辖的一个市,被誉为“世界文化遗产之城”。</p>
</li>
</ul>
</section>
<section>
<h2>云南旅游攻略</h2>
<p>云南旅游的最佳时间是每年的春季和秋季,此时气候宜人,景色宜人。此外,你还可以尝试云南特色美食,如过桥米线、酸菜鱼等。</p>
</section>
</main>
<footer>
<p>© 2021 云南旅游</p>
</footer>
</body>
</html>
```
CSS:
```
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
}
header h1 {
margin: 0;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
section {
margin-bottom: 30px;
}
section h2 {
margin-top: 0;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin-bottom: 20px;
}
img {
max-width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,.3);
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
```
请注意,这只是一个示例,实际的网站需要更复杂的 HTML 和 CSS 代码。
阅读全文