HTML和CSS实现垂直水平居中表单及美化

使用HTML和CSS实现垂直水平居中表单及美化

本文将教你如何使用HTML和CSS创建一个美观的网页，其中包含一个标题为'xxxxxx'的表单，该表单在页面中垂直和水平居中，并包含以下元素：

标题为'请选择最新数字'的下拉列表，提供0-9的选项
一个好看的提交按钮和一个生成按钮并排显示
一个好看的且不可编辑的文本域

以下是用HTML和CSS实现的代码：

<!DOCTYPE html>
<html>
<head>
	<title>表单美化与居中</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			background-color: #f2f2f2;
		}

		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}

		h1 {
			font-size: 36px;
			margin: 0;
			text-align: center;
			color: #333;
		}

		form {
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: #fff;
			padding: 20px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
			border-radius: 5px;
		}

		select {
			font-size: 18px;
			padding: 10px;
			border: none;
			background-color: #f2f2f2;
			border-radius: 5px;
			margin-bottom: 20px;
			width: 100%;
			max-width: 300px;
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			background-image: url('data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E');
			background-repeat: no-repeat;
			background-position: right 10px center;
		}

		input[type='submit'] {
			font-size: 18px;
			padding: 10px 20px;
			background-color: #333;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}

		input[type='submit']:hover {
			background-color: #555;
		}

		input[type='button'] {
			font-size: 18px;
			padding: 10px 20px;
			background-color: #333;
			color: #fff;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			transition: background-color 0.3s ease;
			margin-left: 10px;
		}

		input[type='button']:hover {
			background-color: #555;
		}

		textarea {
			font-size: 18px;
			padding: 10px;
			border: none;
			background-color: #f2f2f2;
			border-radius: 5px;
			width: 100%;
			max-width: 300px;
			height: 100px;
			resize: none;
			color: #666;
		}

		textarea[readonly] {
			background-color: #ddd;
			color: #333;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div class='container'>
		<h1>My Page</h1>
		<form>
			<h2>xxxxxx</h2>
			<select>
				<option value='0'>0</option>
				<option value='1'>1</option>
				<option value='2'>2</option>
				<option value='3'>3</option>
				<option value='4'>4</option>
				<option value='5'>5</option>
				<option value='6'>6</option>
				<option value='7'>7</option>
				<option value='8'>8</option>
				<option value='9'>9</option>
			</select>
			<div>
				<input type='submit' value='提交'>
				<input type='button' value='生成'>
			</div>
			<textarea readonly>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, quam sed tincidunt lacinia, justo dolor ultrices est, eu molestie est velit sed dolor. Donec non nunc euismod, consectetur ipsum vel, euismod ex. Sed nec lectus vel magna hendrerit fermentum. Donec euismod molestie quam, nec suscipit nibh varius id. Nullam euismod sapien in nulla sagittis, at varius lectus tincidunt. Nunc commodo massa sit amet velit bibendum, ac ullamcorper neque bibendum. Curabitur euismod, nunc sit amet eleifend pulvinar, dui mi tincidunt mauris, quis tristique quam justo a nunc. Aenean sed odio in elit facilisis varius vel eget nibh. Sed euismod, quam sed tincidunt lacinia, justo dolor ultrices est, eu molestie est velit sed dolor. Donec non nunc euismod, consectetur ipsum vel, euismod ex. Sed nec lectus vel magna hendrerit fermentum. Donec euismod molestie quam, nec suscipit nibh varius id. Nullam euismod sapien in nulla sagittis, at varius lectus tincidunt. Nunc commodo massa sit amet velit bibendum, ac ullamcorper neque bibendum. Curabitur euismod, nunc sit amet eleifend pulvinar, dui mi tincidunt mauris, quis tristique quam justo a nunc. Aenean sed odio in elit facilisis varius vel eget nibh.</textarea>
		</form>
	</div>
</body>
</html>

这段代码创建了一个简单的网页，并在其中添加了一个表单。表单中的元素都经过了样式美化，并且表单在页面中实现了垂直和水平居中。你可以根据自己的需要修改表单标题、下拉列表选项以及文本域内容。