HTML 多功能页面示例：创建结构化和可导航的网页
以下是一个简单的多功能页面示例，展示了如何使用 HTML 创建一个包含页眉、页脚、导航、内容部分和图片的网页：
<!DOCTYPE html>
<html>
<head>
<title>多功能页面示例</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
font-size: 24px;
font-weight: bold;
}
nav {
background-color: #f1f1f1;
padding: 10px;
font-size: 18px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #333;
text-decoration: none;
padding: 5px;
border-radius: 5px;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #333;
color: #fff;
}
main {
padding: 20px;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
p {
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
}
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #f1f1f1;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 20px;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>多功能页面示例</header>
<nav>
<ul>
<li><a href="#section1">第一部分</a></li>
<li><a href="#section2">第二部分</a></li>
<li><a href="#section3">第三部分</a></li>
<li><a href="#section4">第四部分</a></li>
</ul>
</nav>
<main>
<section id="section1">
<h1>第一部分</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed malesuada enim at purus accumsan, id commodo sapien porta. Nullam nec vulputate libero. Duis ac tristique velit. Morbi sed felis malesuada, varius tortor eu, rhoncus nisi. Ut eget ipsum eu nibh dictum euismod. Phasellus tristique, nulla eget fringilla ullamcorper, felis felis dignissim nisi, in dictum orci urna ut velit.</p>
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品1</td>
<td>$10.00</td>
</tr>
<tr>
<td>商品2</td>
<td>$20.00</td>
</tr>
<tr>
<td>商品3</td>
<td>$30.00</td>
</tr>
</tbody>
</table>
<img src="https://via.placeholder.com/800x400" alt="图片示例">
</section>
<section id="section2">
<h1>第二部分</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed malesuada enim at purus accumsan, id commodo sapien porta. Nullam nec vulputate libero. Duis ac tristique velit. Morbi sed felis malesuada, varius tortor eu, rhoncus nisi. Ut eget ipsum eu nibh dictum euismod. Phasellus tristique, nulla eget fringilla ullamcorper, felis felis dignissim nisi, in dictum orci urna ut velit.</p>
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品4</td>
<td>$40.00</td>
</tr>
<tr>
<td>商品5</td>
<td>$50.00</td>
</tr>
<tr>
<td>商品6</td>
<td>$60.00</td>
</tr>
</tbody>
</table>
<img src="https://via.placeholder.com/800x400" alt="图片示例">
</section>
<section id="section3">
<h1>第三部分</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed malesuada enim at purus accumsan, id commodo sapien porta. Nullam nec vulputate libero. Duis ac tristique velit. Morbi sed felis malesuada, varius tortor eu, rhoncus nisi. Ut eget ipsum eu nibh dictum euismod. Phasellus tristique, nulla eget fringilla ullamcorper, felis felis dignissim nisi, in dictum orci urna ut velit.</p>
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品7</td>
<td>$70.00</td>
</tr>
<tr>
<td>商品8</td>
<td>$80.00</td>
</tr>
<tr>
<td>商品9</td>
<td>$90.00</td>
</tr>
</tbody>
</table>
<img src="https://via.placeholder.com/800x400" alt="图片示例">
</section>
<section id="section4">
<h1>第四部分</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed malesuada enim at purus accumsan, id commodo sapien porta. Nullam nec vulputate libero. Duis ac tristique velit. Morbi sed felis malesuada, varius tortor eu, rhoncus nisi. Ut eget ipsum eu nibh dictum euismod. Phasellus tristique, nulla eget fringilla ullamcorper, felis felis dignissim nisi, in dictum orci urna ut velit.</p>
<table>
<thead>
<tr>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>商品10</td>
<td>$100.00</td>
</tr>
<tr>
<td>商品11</td>
<td>$110.00</td>
</tr>
<tr>
<td>商品12</td>
<td>$120.00</td>
</tr>
</tbody>
</table>
<img src="https://via.placeholder.com/800x400" alt="图片示例">
</section>
</main>
<footer>© 2021 多功能页面示例</footer>
</body>
</html>
该页面包含了一个页头和页脚，一个导航栏，四个部分（section），每个部分包含一个标题、一些文本、一个表格和一张图片。页面使用了 HTML 和 CSS，使用了语义化的标签和样式表来实现易读易懂的代码。导航栏使用了 HTML 的锚点来实现页面内跳转。
使用语义化标签:
header: 用于页眉部分nav: 用于导航栏main: 用于页面主体内容section: 用于页面内容的各个部分footer: 用于页脚
使用样式表:
- 使用 CSS 样式表对页面进行基本的样式设置
- 样式表使用简单的颜色、字体和布局来确保页面整洁易读
使用锚点实现页面内跳转:
- 导航栏中的链接使用
href属性指向页面内部的各个section部分 - 用户点击链接后，页面会自动跳转到相应的
section部分
通过这些技术，可以创建出结构清晰、易于导航的多功能页面。
原文地址: https://www.cveoy.top/t/topic/m0DC 著作权归作者所有。请勿转载和采集!