HTML静态网页作业——基于html+css+javascript+jquery+bootstarp响应式成都家乡介绍网页
以下是一个简单的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>
评论已关闭