介绍
在本实验中，你将学习如何将自定义的 Cascading Style Sheets (CSS) 文件集成到你的 captive portal 的 index.html 文件中。虽然一个基础的 HTML 页面是可用的，但应用自定义样式能使其看起来更专业、更具说服力。你将创建一个 style.css 文件，向其中添加样式规则，然后将其链接到你的 HTML 文档，以改变登录页面的外观。
打开你的自定义 Portal 目录
在此步骤中，你将导航到包含你的自定义 portal 文件的目录。你所有的工作，包括创建新文件和编辑现有文件，都将在该目录内完成。
首先，使用 cd (change directory) 命令进入位于你的项目文件夹内的 custom_portal 目录。
cd ~/project/custom_portal
接下来，使用 ls -l 命令列出目录的内容。这将确认你处于正确的位置，并显示我们将要处理的 index.html 文件。
ls -l
你应该会看到以下输出，表明你的 index.html 文件存在：
total 4
-rw-r--r-- 1 labex labex 483 Dec 01 12:00 index.html
创建一个包含 CSS 规则的 'style.css' 文件
在此步骤中，你将创建一个 CSS 文件来定义登录页面的视觉样式。CSS 允许你控制 HTML 元素的布局、颜色、字体和整体外观。
我们将使用 nano 文本编辑器创建一个名为 style.css 的文件。
nano style.css
打开 nano 编辑器后，将以下 CSS 代码复制并粘贴到文件中。这段代码针对各种 HTML 元素，旨在创建一个简洁、现代的登录表单设计。
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
width: 320px;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 6px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
}
button:hover {
background-color: #0056b3;
}
粘贴代码后，按 Ctrl+X，然后按 Y，最后按 Enter 保存文件并退出 nano。
在你的 'index.html' 文件中链接样式表
在此步骤中，你将把新创建的 style.css 文件链接到你的 index.html 文件。仅仅创建样式表是不够的；你必须告知 HTML 文档使用它。这通过在 HTML 的 <head> 部分添加一个 <link> 标签来完成。
使用 nano 编辑器打开 index.html 文件。
nano index.html
导航到文件的 <head> 部分。在闭合的 </head> 标签之前添加以下行：
<link rel="stylesheet" href="style.css" />
你的 index.html 文件现在应该看起来像这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>WiFi Login</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login-container">
<h1>Please Log In to Access the Internet</h1>
<form action="#" method="post">
<p>Username:</p>
<input
type="text"
name="username"
placeholder="Enter your username"
required
/>
<p>Password:</p>
<input
type="password"
name="password"
placeholder="Enter your password"
required
/>
<br /><br />
<button type="submit">Log In</button>
</form>
</div>
</body>
</html>
按 Ctrl+X，Y，然后 Enter 保存更改并退出编辑器。现在你的 HTML 页面已链接到你的样式表，任何渲染该页面的浏览器都将应用 CSS 规则。
使用你的自定义门户发起攻击
在此步骤中，你将预览你已样式化的强制门户页面。我们不会发起完整的网络攻击，而是使用一个简单的 Python Web 服务器在本地托管文件。这能让你准确地看到页面将如何呈现给用户。
确保你仍然在 ~/project/custom_portal 目录下。运行以下命令在端口 8000 上启动一个 Web 服务器。
python3 -m http.server 8000
此命令指示 Python 运行其内置的 http.server 模块，该模块将提供当前目录 (custom_portal) 中的文件。服务器将在你的本地机器上通过端口 8000 访问。
终端将显示一条消息，表明服务器正在运行：
Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/) ...
服务器现已激活。保持此终端运行，然后继续下一步以查看页面。
验证自定义样式是否已应用于登录页面
在最后一步，你将通过在 Web 浏览器中查看登录页面来验证你的 CSS 样式是否已正确应用。
在实验环境的右侧，你将看到一个桌面界面。点击 Web Browser 图标将其打开。
在浏览器的地址栏中，输入以下 URL 并按
Enter：http://127.0.0.1:8000
你现在应该能看到你的自定义登录页面。它应该拥有浅灰色背景、一个带有阴影的居中白色登录框、样式化的输入字段和蓝色的登录按钮，而不是一个朴素、未样式化的页面。这证实了你的 style.css 文件已成功链接并应用。
在验证外观后，返回运行 Python 服务器的终端，然后按 Ctrl+C 停止它。
总结
在此实验中，你成功地通过集成自定义 CSS 样式表来增强了一个基础的强制门户。你学会了如何创建单独的 .css 文件来管理样式，编写 CSS 规则来定位特定的 HTML 元素，以及使用 <link> 标签将样式表链接到 HTML 文档。通过使用本地 Web 服务器预览你的工作，你能够看到你所做样式化的即时效果，将一个朴素的页面转变为一个视觉上吸引人且更具说服力的登录表单。这项技能是 Web 开发的基础，对于创建有效的自定义强制门户至关重要。