📌  相关文章
📜  使用 HTMLCSS 创建在线支付 UI 设计(1)

📅  最后修改于: 2023-12-03 14:49:40.539000             🧑  作者: Mango

使用 HTML/CSS 创建在线支付 UI 设计

简介

这篇文章将向大家介绍如何使用 HTML/CSS 创建一个简单的在线支付 UI 设计。我们将按照以下步骤进行：

  1. 分析设计
  2. 编写 HTML 结构
  3. 添加 CSS 样式
  4. 添加表单验证功能
分析设计

在开始编写代码之前，我们需要先了解我们即将创建的 UI 设计。

在这个在线支付 UI 设计中，我们需要有以下元素：

  • 一个表单，包含输入框、下拉框和按钮
  • 一个背景图片

我们的设计如下：

Pay UI Design

编写 HTML 结构

接下来，我们需要将我们的设计转换为 HTML 结构。代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>在线支付</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="background"></div>
	<div class="container">
		<h1>在线支付</h1>
		<form method="post" action="#">
			<label for="cardnumber">信用卡号:</label>
			<input type="text" id="cardnumber" name="cardnumber" placeholder="请输入信用卡号" required>
			
			<label for="name">持卡人姓名:</label>
			<input type="text" id="name" name="name" placeholder="请输入持卡人姓名" required>
			
			<label for="expiration">有效期:</label>
			<select id="expiration" name="expiration" required>
				<option value="01/21">01/21</option>
				<option value="02/21">02/21</option>
				<option value="03/21">03/21</option>
				<option value="04/21">04/21</option>
				<option value="05/21">05/21</option>
				<option value="06/21">06/21</option>
				<option value="07/21">07/21</option>
				<option value="08/21">08/21</option>
				<option value="09/21">09/21</option>
				<option value="10/21">10/21</option>
				<option value="11/21">11/21</option>
				<option value="12/21">12/21</option>
			</select>
			
			<label for="cvv">CVV:</label>
			<input type="text" id="cvv" name="cvv" placeholder="请输入 CVV" required>
			
			<input type="submit" value="支付">
		</form>
	</div>
</body>
</html>

在这个 HTML 文件中，我们有一个 div 元素作为背景图片，和一个包含表单和标题的容器。表单包含输入框、下拉框和按钮。

添加 CSS 样式

一旦我们编写了 HTML 结构，我们就可以开始添加样式了。我们使用 CSS 来为我们的页面添加样式。

body {
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}

.container {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.85);
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0px 0px 10px 0px #ccc;
}

h1 {
	text-align: center;
}

form {
	text-align: center;
}

label {
	display: block;
	margin: 10px 0;
}

input[type="text"], select {
	display: block;
	width: 100%;
	padding: 10px 16px;
	margin-bottom: 20px;
	border: none;
	border-radius: 5px;
	background-color: #f1f1f1;
}

input[type="submit"] {
	background-color: #4CAF50;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

input[type="submit"]:hover {
	background-color: #45a049;
}

.background {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(bg.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

在这个 CSS 样式表中，我们设置了页面的样式，包括容器的位置、背景颜色、字体样式等等。我们还为输入框和按钮添加样式。

添加表单验证功能

最后，我们将使用 JavaScript 添加表单验证功能。我们将确保表单中的所有输入都已被填写，以及要求信用卡号和 CVV 只包含数字。

var form = document.querySelector('form');
var cardNumber = document.querySelector('#cardnumber');
var cvv = document.querySelector('#cvv');

form.addEventListener('submit', function(event) {
	if (!cardNumber.value.match(/^\d{16}$/)) {
		alert('信用卡号必须为 16 个数字');
		event.preventDefault();
	}
	
	if (!cvv.value.match(/^\d{3}$/)) {
		alert('CVV 必须为 3 个数字');
		event.preventDefault();
	}
});

在这个 JavaScript 代码片段中，我们选择表单中的信用卡号输入框和 CVV 输入框，并为表单添加了一个事件监听器。事件监听器将检查输入框中的值是否符合要求，如果不符合，则会显示一条错误消息并阻止表单提交。

总结

在这篇文章中，我们学习了如何使用 HTML/CSS 创建一个简单的在线支付 UI 设计。我们创建了一个包含输入框、下拉框和按钮的表单，使用 CSS 为页面添加样式，再使用 JavaScript 为表单添加验证功能。希望这篇文章对您有所帮助！