HTML 代码：创建居中姓名输入框和选择框，并设置淡蓝色背景
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #eaf2f8;
}
<p>.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}</p>
<p>.form {
width: 20%;
background-color: white;
padding: 20px;
border-radius: 10px;
}</p>
<p>select, input[type='text'] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}</p>
<p>input[type='submit'] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style></p>
</head>
<body>
<div class='container'>
<form class='form'>
<input type='text' placeholder='请输入姓名'>
<select>
<option value='孙悟空'>孙悟空</option>
<option value='唐僧'>唐僧</option>
<option value='猪八戒'>猪八戒</option>
<option value='沙僧'>沙僧</option>
<option value='玉皇大帝'>玉皇大帝</option>
<option value='观音菩萨'>观音菩萨</option>
<option value='如来佛祖'>如来佛祖</option>
<option value='白骨精'>白骨精</option>
<option value='女儿国国王'>女儿国国王</option>
<option value='牛魔王'>牛魔王</option>
<option value='夏海生'>夏海生</option>
</select>
<input type='submit' value='提交'>
</form>
</div>
</body>
</html>
<p>这段代码实现了背景色为淡蓝色，输入框和选择框居中且占1/5的布局。</p>
原文地址: http://www.cveoy.top/t/topic/fvSg 著作权归作者所有。请勿转载和采集!