老程序员博客

编程生涯的最后一舞

当前位置：首页 > 技术 > 正文内容

基于HTML与CSS的广西旅游信息展示网站设计与实现

访客 技术 2026年6月1日 1

本项目是一个面向初学者的静态网页设计案例，主题为"广西旅游"，适用于高校前端课程的期末作业或个人作品展示。整个网站采用纯HTML和CSS技术构建，未引入JavaScript，便于新手理解与修改，同时完整呈现了前端布局的核心知识点。

一、项目概述

该网页以学生家乡——广西壮族自治区为背景，重点介绍桂林等地的自然风光与人文特色。页面结构清晰，包含头部横幅、导航菜单、内容区域和页脚部分，整体使用

标签进行模块化布局，并通过CSS控制样式，实现了居中显示、浮动排列、背景设置、边距调整等基础但关键的前端技能。

二、页面布局与功能特点

  • 响应式容器：外层包裹
    ，宽度固定为1200px，通过margin: 0 auto实现水平居中。
  • 导航栏设计：使用无序列表
      构建水平导航，每个
    • 项浮动左对齐，链接在鼠标悬停时显示下划线并变色，增强交互体验。
    • 图文混排内容区：主内容分为左右两栏，左侧展示景点图片，右侧配以文字说明，利用float属性实现并列布局。
    • 多媒体嵌入：页面中插入MP4格式视频，支持浏览器原生播放控制，提升信息传达效果。
    • 多页面结构：项目包含首页、景点介绍、美食推荐、出行路线、留言表单等多个子页面，通过超链接相互跳转，形成完整的网站架构。

    三、核心代码实现

    1. HTML 结构示例（index.html）

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <title>魅力广西 - 旅游指南</title>
    <link rel="stylesheet" href="css/styles.css" />
</head>
<body>
    <div class="container">
        <!-- 横幅区域 -->
        <header class="banner">
            <img src="images/banner.jpg" alt="广西美景">
        </header>

        <!-- 导航菜单 -->
        <nav class="navigation">
            <ul>
                <li><a href="index.html">主页</a></li>
                <li><a href="scenic.html">景点一览</a></li>
                <li><a href="cuisine.html">地道风味</a></li>
                <li><a href="travel.html">行程建议</a></li>
                <li><a href="contact.html">互动留言</a></li>
            </ul>
        </nav>

        <hr>

        <!-- 主体内容 -->
        <main class="content-area">
            <section class="image-gallery">
                <img src="images/tu1.png" alt="漓江">
                <img src="images/tu2.png" alt="象鼻山">
                <img src="images/tu3.png" alt="龙脊梯田">
                <img src="images/tu4.png" alt="阳朔西街">
            </section>

            <section class="intro-text">
                <h2>—— 广西旅游概览 ——</h2>
                <p>
                    桂林山水甲天下，自古以来便是中外游客向往的旅游胜地。这里四季如春，冬无严寒，夏无酷暑，
                    是全年皆宜的度假目的地。漓江泛舟、遇龙河漂流、探访少数民族村寨……每一处都令人流连忘返。
                </p>
                <p>
                    推荐必游景点包括：漓江精华段、兴坪古镇、银子岩溶洞、十里画廊骑行道、訾洲公园观象鼻山全景。
                    若时间充裕，可前往龙脊梯田感受壮族农耕文化。
                </p>
            </section>

            <!-- 视频播放器 -->
            <div class="video-container">
                <video width="900" controls>
                    <source src="video/shipin.mp4" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
            </div>
        </main>

        <hr>

        <!-- 页脚信息 -->
        <footer class="page-footer">
            <h3>欢迎探索壮美广西！</h3>
        </footer>
    </div>
</body>
</html>

    2. CSS 样式定义（styles.css）

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "宋体", sans-serif;
    font-size: 12px;
    color: #000;
    line-height: 20px;
}

.container {
    width: 1200px;
    margin: 0 auto;
    border: 1px solid #666;
    padding: 0 10px;
}

.banner img {
    width: 100%;
    display: block;
}

.navigation {
    width: 100%;
    height: 36px;
    background-color: #779aae;
    margin-top: 10px;
}

.navigation ul {
    list-style: none;
    margin-left: 400px;
}

.navigation li {
    float: left;
    width: 150px;
    text-align: center;
    line-height: 36px;
    font-weight: bold;
}

.navigation a {
    text-decoration: none;
    color: #fff;
    display: block;
}

.navigation a:hover {
    text-decoration: underline;
    color: #000;
}

.content-area {
    margin-top: 20px;
}

.image-gallery {
    width: 1180px;
    margin: 0 auto;
    overflow: hidden;
}

.image-gallery img {
    width: 250px;
    margin: 10px 14px;
    border: 1px solid #666;
    float: left;
}

.intro-text {
    width: 1180px;
    margin: 20px auto;
    background: #e9f4fa;
    padding: 30px;
    font-size: 12px;
    line-height: 30px;
}

.intro-text h2 {
    text-align: center;
    padding-bottom: 20px;
    font-family: "微软雅黑";
}

.video-container {
    text-align: center;
    margin: 30px 0;
}

.page-footer {
    width: 100%;
    background: #779aae;
    text-align: center;
    color: #fff;
    line-height: 40px;
}

    四、学习价值与扩展建议

    该项目全面涵盖了Web前端开发的基础知识：

    • 使用语义化标签组织页面结构
    • 掌握盒模型、浮动、定位等布局技巧
    • 熟练运用CSS选择器与常用属性
    • 实现基本的用户交互效果（如hover状态）
    • 嵌入图像、音频、视频等多媒体资源
    • 构建多层级页面导航体系

    后续可在此基础上添加如下功能以提升复杂度：

    • 加入JavaScript实现轮播图或动态菜单展开
    • 使用表格展示酒店价格或交通时刻表
    • 设计留言表单并连接后端处理程序
    • 优化移动端适配，实现响应式布局
    标签: HTMLcss
返回列表

上一篇：使用Alembic管理SQLAlchemy数据库模式版本

下一篇：基于博客园awescnb插件的Geek皮肤公众号卡片实现方案

相关文章

Linux crontab 详解

1) crontab 是什么cron 是 Linux 的定时任务守护进程；crontab 是用来编辑/查看“按时间周期执行命令”的表（cron table）。常见两类：用户 crontab：每个用户一份（crontab -e 编辑）系统级 crontab / cron.d：可指定执行用户（/etc/crontab、/etc/cron.d/*）2) crontab 时间...

富文本里可以允许的 HTML 属性

一、所有标签默认允许的安全属性（极少）class        （可选）id           （通常建议禁用）title️ 注意：id 容易被滥用做锚点注入，很多系统直接禁用class 允许的话最好只允许固定前缀（如 editor-*）二、a 标签允许属性<a href="" t...

Mac 安装 Node.js 指南

方法一：通过官网安装包（最简单，适合初学者）如果你只是想快速安装并开始使用，这是最直接的方法。访问 Node.js 官网。页面会显示两个版本：LTS (Recommended For Most Users)：长期支持版，最稳定。建议选这个。Current：最新特性版，包含最新功能但可能不够稳定。下载 .pkg 安装包并运行。按照安装向导点击“下一步”即可完成。方法二：使用 Homebrew 安装（...

Dom\HTML_NO_DEFAULT_NS 的副作用：自动加闭合标签

在使用Dom\HTMLDocument时，Dom\HTML_NO_DEFAULT_NS 将禁止在解析过程中设置元素的命名空间, 此设置是为了与DOMDocument向后兼容而存在的。当使用它时，已知的一个副作用就是：自动加闭合标签例如 </img> 为什么会这样？当你使用：Dom\HTML_NO_DEFAULT_NS文档会变成 无命名空间模式，此时内部更接近 XML...

Laravel 事件和监听器创建

在 Laravel 中，使用 Artisan 命令创建 Events（事件） 和 Listeners（监听器） 是非常高效的。你可以通过以下几种方式来实现：1. 手动创建单个 Event如果你只想创建一个事件类，可以使用 make:event 命令：Bashphp artisan make:event UserRegistered执行后，文件将生成在 app/Even...

自定义域名解析神器 dnsmasq

什么是 dnsmasq？dnsmasq 是一个轻量级、功能强大的网络服务工具，专为小型和中等规模网络设计。它是一个综合的网络基础设施解决方案[1]。dnsmasq 能做什么？功能说明应用场景DNS 转发与缓存将 DNS 查询转发到上游服务器（ISP、Google DNS 等），并在本地缓存结果加快 DNS 查询速度，减少外部 DNS 流量本地 DNS解析本地网络设备的主机名，无需编辑&n...

发表评论

访客

◎欢迎参与讨论，请在这里发表您的看法和观点。

Copyright © agingcoder.cn

Powered By Z-BlogPHP. Theme by TOYEAN.