复杂一点的生日HTML网页设计框架
时间: 2024-07-06 18:00:48 浏览: 121
创建一个复杂的生日HTML网页设计,你可以考虑使用Bootstrap、HTML5和CSS3等现代前端技术,这些框架和语言提供了丰富的布局、样式和交互元素。以下是一个基本的设计框架:
1. **HTML结构**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Happy Birthday</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css"> <!-- 自定义样式文件 -->
</head>
<body>
<header>
<nav class="navbar navbar-expand-lg bg-primary text-white">
<a class="navbar-brand" href="#">Happy Birthday</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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Actions
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Make a wish</a>
<a class="dropdown-item" href="#">Send gifts</a>
</div>
</li>
</ul>
</div>
</nav>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-md-6 mt-5">
<h1 class="text-center">Happy <span id="birthDay">Birthday</span>!</h1>
<img id="avatar" src="avatar.jpg" alt="Birthday Person Avatar">
</div>
<div class="col-md-6">
<div class="card">
<h2 class="card-header">Celebration Details</h2>
<div class="card-body">
<p>Date: <span id="date"></span></p>
<p>Location: <span id="location"></span></p>
<button class="btn btn-primary" id="wishButton">Make a wish</button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<p>© 2023 Your Name. All rights reserved.</p>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="scripts.js"></script> <!-- 自定义脚本文件 -->
</body>
</html>
```