旅游网页代码 html

作者：未來的款姐＂发布日期:2025-10-27 浏览:67

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游网页示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }
        header {
            background-color: #4CAF50;
            color: white;
            padding: 10px 0;
            text-align: center;
        }
        nav {
            display: flex;
            justify-content: center;
            background-color: #333;
        }
        nav a {
            color: white;
            padding: 14px 20px;
            text-decoration: none;
            text-align: center;
        }
        nav a:hover {
            background-color: #ddd;
            color: black;
        }
        .container {
            padding: 20px;
        }
        .destination {
            background-color: white;
            margin: 10px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 0;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <header>
        <h1>欢迎来到旅游天堂</h1>
    </header>
    <nav>
        <a href="#home">首页</a>
        <a href="#destinations">目的地</a>
        <a href="#about">关于我们</a>
        <a href="#contact">联系我们</a>
    </nav>
    <div class="container">
        <div class="destination">
            <h2>热门旅游景点</h2>
            <p>探索世界各地的美景，体验不同的文化和风景。</p>
        </div>
        <div class="destination">
            <h2>特别推荐</h2>
            <p>我们精心挑选的旅游线路，带给你不一样的旅行体验。</p>
        </div>
    </div>
    <footer>
        <p>&copy; 2023 旅游天堂. 保留所有权利.</p>
    </footer>
</body>
</html>

解释说明：

HTML 结构:
- <!DOCTYPE html>: 声明文档类型为 HTML5。
- <html lang="zh-CN">: 设置页面语言为简体中文。
- <head>: 包含元数据、标题和样式信息。
- <body>: 页面的主要内容。
头部 (<header>) 和导航栏 (<nav>):
- 使用了简单的头部和导航栏，导航栏包含四个链接（首页、目的地、关于我们、联系我们）。
主要内容区 (<div class="container">):
- 包含两个 div，分别展示了热门旅游景点和特别推荐的内容。
页脚 (<footer>):
- 固定在页面底部，显示版权信息。
CSS 样式:
- 使用内联样式定义了页面的基本布局和样式，包括字体、背景颜色、边距、内边距等。

这个示例代码展示了一个简单的旅游网页结构，可以根据需要进一步扩展和美化。

上一篇：html文字加粗

下一篇：html介绍