html css网页制作成品家乡保定
时间: 2024-12-26 14:14:29 浏览: 19
### 制作家乡保定的网页成品示例
#### 使用 HTML 和 CSS 构建首页布局
为了创建一个展示家乡保定特色的网站,可以采用以下结构来构建页面:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>欢迎来到美丽的古城——保定</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
<h1>走进保定</h1>
<nav>
<!-- 导航菜单 -->
<ul id="menu">
<li><a href="#introduction">简介</a></li>
<li><a href="#history">历史沿革</a></li>
<li><a href="#attractions">景点推荐</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="banner">
<!-- 图片轮播区 -->
<div id="slider"></div>
</section>
<article id="content">
<section id="introduction">
<h2>城市介绍</h2>
<p>保定位于河北省中部偏西地区...</p>
</section>
<section id="history">
<h2>历史文化</h2>
<p>作为一座拥有两千多年悠久历史的文化名城...</p>
</section>
<section id="attractions">
<h2>旅游胜地</h2>
<p>这里有着丰富的旅游资源,如直隶总督署、古莲花池等。</p>
</section>
</article>
</main>
<footer>
<form action="#" method="post">
<!-- 留言板表单 -->
<fieldset>
<legend>游客留言板</legend>
<label for="name">姓名:</label>
<input type="text" name="visitorName" required />
<br/>
<label for="message">留言内容:</label>
<textarea rows="4" cols="50" name="comment" form="usrform"
placeholder="写下您对这座城市的印象吧..."></textarea>
<button type="submit">提交</button>
</fieldset>
</form>
<small>©版权所有 2023年 | 设计者:XXX大学信息技术系学生团队</small>
</footer>
<script src="scripts.js"></script>
</body>
</html>
```
#### 添加样式美化界面
通过编写 `styles.css` 文件中的 CSS 规则集定义视觉效果:
```css
/* styles.css */
* {
margin: 0;
padding: 0;
}
.header h1,
.footer small {
text-align: center;
font-family: 'Arial', sans-serif;
}
#menu li {
list-style-type: none;
float: left;
margin-right: 1em;
}
#menu a {
color: black;
text-decoration: none;
}
#slider img {
width: 100%;
height: auto;
}
```
此代码片段展示了如何利用基本标签和属性组合成具有功能性的静态页面框架[^1]。
阅读全文