HTML代码：页面布局优美输入姓名框选择谁夸你框选择项包括：孙悟空 唐僧 猪八戒 沙僧 玉皇大帝 观音菩萨 如来佛祖 白骨精 女儿国国王 牛魔王 夏海生要求：1网页淡蓝色背景2输入框和选择框居中占15
以下是符合要求的HTML代码：
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #eaf2f8;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.form {
width: 20%;
background-color: white;
padding: 20px;
border-radius: 10px;
}
select, input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</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>
这段代码实现了背景色为淡蓝色，输入框和选择框居中且占1/5的布局。
原文地址: https://www.cveoy.top/t/topic/hFkh 著作权归作者所有。请勿转载和采集!