📌  相关文章
📜  如何使用 HTML 和 CSS 向图像添加登录表单？(1)

📅  最后修改于: 2023-12-03 15:08:19.337000             🧑  作者: Mango

如何使用 HTML 和 CSS 向图像添加登录表单？

HTML 和 CSS 是网页设计的重要组成部分，可以组合实现各种样式和页面元素。本文将教您如何使用 HTML 和 CSS 向图像添加登录表单。

准备工作

在开始之前，您需要具备一定的 HTML 和 CSS 基础知识，了解如何创建 HTML 页面和样式表。

创建 HTML 文件

首先，我们需要创建一个 HTML 页面。打开文本编辑器，输入以下代码：

<!DOCTYPE html>
<html>
<head>
	<title>Login Form</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="login-container">
		<img src="image.jpg" alt="Background Image">
		<form>
			<label for="username">Username:</label>
			<input type="text" id="username" name="username">
			<label for="password">Password:</label>
			<input type="password" id="password" name="password">
			<input type="submit" value="Login">
		</form>
	</div>
</body>
</html>

首先，我们使用 <!DOCTYPE html> 定义文档类型为 HTML。然后，我们使用 <html> 元素包含整个 HTML 页面。

在 <head> 元素中，我们使用 <title> 元素定义网页标题，并使用 <link> 元素将样式表链接到 HTML 页面。

在 <body> 元素中，我们创建了一个容器 <div> 元素，并添加了一个背景图像 <img> 元素。接着，我们添加了一个登录表单 <form> 元素，包括用户名和密码的输入字段 <input> 元素。

创建 CSS 样式表

现在，我们需要创建一个 CSS 样式表，为表单和背景图像添加样式。在同一文件夹下创建一个名为 style.css 的文件，输入以下代码：

.login-container {
	position: relative;
	width: 50%;
	margin: auto;
}

img {
	width: 100%;
	height: auto;
}

form {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 20px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	border-radius: 5px;
}

form label {
	display: block;
	font-weight: bold;
	margin-bottom: 10px;
}

form input {
	display: block;
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
	border: none;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

form input[type="submit"] {
	background-color: #4CAF50;
	color: #fff;
	cursor: pointer;
}

form input[type="submit"]:hover {
	background-color: #3e8e41;
}

我们首先为登录表单容器 .login-container 添加了一些样式，使其水平居中。随后，我们为背景图像 <img> 元素添加了一个宽度为 100% 的样式，使其填充整个容器。

然后，我们为登录表单 <form> 元素添加了一些样式，包括绝对定位，使其距离容器顶部和左侧各偏移 50%，并使用 transform 属性将其居中。我们还为该元素添加了一些边框、填充和阴影。

接下来，我们为表单中的标签元素 <label> 和输入元素 <input> 添加了一些样式，使其更具可读性和美观性。最后，我们为提交按钮 <input type="submit"> 添加了一个样式，使其在悬停时改变背景颜色。

预览

现在，我们可以打开浏览器，在 URL 地址栏输入 HTML 文件的路径，预览结果：

login-form-with-image

如图所示，我们成功地在图像上添加了登录表单，并通过 CSS 样式表为之添加了样式。