融合门户
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>服务大厅门户与宣传片展示</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
header {
background-color: #007BFF;
color: white;
text-align: center;
padding: 1rem;
}
nav {
background-color: #333;
overflow: hidden;
}
nav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
color: black;
}
.container {
padding: 20px;
}
video {
width: 100%;
max-width: 800px;
border: 1px solid #ccc;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>服务大厅门户</h1>
</header>
<nav>
<a href="#services">服务介绍</a>
<a href="#videos">宣传片</a>
</nav>
<div class="container">
<section id="services">
<h2>我们的服务</h2>
<p>欢迎来到服务大厅门户！我们提供多种便捷服务，包括在线申请、进度查询等。</p>
</section>
<section id="videos">
<h2>宣传片展示</h2>
<video controls>
<source src="example.mp4" type="video/mp4">
您的浏览器不支持视频播放。
</video>
</section>
</div>
</body>
</html>
在上述代码中，我们创建了一个简单的服务大厅门户页面，包含导航栏和两个主要部分：“服务介绍”和“宣传片”。导航栏通过HTML链接实现页面内跳转，而“宣传片”部分使用了HTML5的`<video>`标签来嵌入视频。
为了增强用户体验，可以进一步添加JavaScript功能，例如动态加载视频或根据用户行为调整界面布局。此外，为了提高系统的可扩展性，可以采用后端框架（如Node.js或Django）来管理数据和服务逻辑。
总之，本项目展示了如何结合前端技术和HTML媒体元素来搭建一个功能全面且易于维护的服务大厅门户及宣传片展示平台。
