融合门户
小明：嘿，小李，我正在尝试构建一个服务大厅门户的演示页面，但我不确定从哪里开始。
小李：嗨，小明！这听起来很有趣。首先，你需要明确页面的基本结构。我们可以使用HTML来搭建框架。
小明：好的，那我们应该如何开始呢？
小李：我们先从基本的HTML文件开始。你可以创建一个简单的HTML文件，例如：
<html>
<head>
<title>服务大厅门户演示</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>欢迎来到服务大厅门户</h1>
</header>
<nav>
<a href="#服务介绍">服务介绍</a>
<a href="#在线预约">在线预约</a>
<a href="#联系我们">联系我们</a>
</nav>
<main>
<section id="服务介绍">
<p>这里是关于服务大厅的详细介绍...</p>
</section>
<section id="在线预约">
<p>这里是在线预约的说明...</p>
</section>
<section id="联系我们">
<p>这里是联系方式...</p>
</section>
</main>
<footer>
<p>版权所有 ? 2023 服务大厅</p>
</footer>
</body>
</html>
小明：看起来不错！接下来我们需要让它看起来更美观，对吧？
小李：没错，这就是CSS的用武之地。我们可以创建一个style.css文件，并添加一些基本样式：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #4CAF50;
color: white;
text-align: center;
padding: 1em;
}
nav {
display: flex;
justify-content: space-around;
background-color: #333;
}
nav a {
color: white;
text-decoration: none;
padding: 14px 16px;
}
nav a:hover {
background-color: #ddd;
color: black;
}
main {
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
小明：太棒了！最后一步是让页面更加互动，对吗？
小李：当然，我们可以使用JavaScript来添加一些交互性。比如，当用户点击链接时，可以平滑滚动到相应部分：
document.querySelectorAll('nav a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
小明：哇，这真是太酷了！感谢你的指导，我现在对如何构建这个服务大厅门户的演示页面有了清晰的认识。
