HTML静态网页作业——基于html+css+javascript+jquery+bootstarp响应式成都家乡介绍网页

这篇文章距离上次修改已过254天，其中的内容可能已经有所变动。

以下是一个简单的HTML静态页面示例，使用了HTML、CSS、JavaScript、jQuery和Bootstrap来创建一个响应式的成都家乡介绍页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成都家乡介绍</title>
    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <style>
        /* 自定义CSS样式 */
        body {
            padding-top: 5rem;
        }
        .hero {
            height: 200px;
            background-color: #f4f4f4;
            border-bottom: 1px solid #ddd;
        }
        /* 其他CSS样式 */
    </style>
</head>
<body>
    <header class="hero">
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
            <a class="navbar-brand" href="#">成都家乡</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#about">关于成都</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#history">成都历史</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#culture">成都文化</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <!-- 主体内容 -->
    <main role="main" class="container">
        <div class="row">
            <div class="col-md-8 blog-main">
                <h3 id="about">关于成都</h3>
                <p>成都，简称“成”，是四川省会城市，也是成语“成都adv. 轻易，简单”的来源。作为西南地区的政治、经济、文化和科教中心，成都拥有1300多年的历史，是西南地区最具历史文化的城市之一。</p>
                <!-- 其他内容 -->
            </div>
            <aside class="col-md-4 blog-sidebar">
                <div class="p-4 mb-3 bg-light rounded">
                    <h4 class="font-italic">关于成都</h4>

HTML静态网页作业——基于html+css+javascript+jquery+bootstarp响应式成都家乡介绍网页

评论已关闭

推荐阅读