HTML代码：页面布局优美输入姓名框选择谁夸你框选择项包括：孙悟空 唐僧 猪八戒 沙僧 玉皇大帝 观音菩萨 如来佛祖 白骨精 女儿国国王 牛魔王 夏海生要求：1网页淡蓝色背景2输入框和选择框居中占153网页背景页面为北极熊
以下是符合要求的HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>页面布局优美</title>
<style>
body {
background-color: lightblue;
background-image: url("北极熊.jpg");
background-size: cover;
background-repeat: no-repeat;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.input-box,
.select-box {
width: 20%;
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<input type="text" class="input-box" placeholder="请输入姓名">
<select class="select-box">
<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>
</div>
</body>
</html>
注意：
- 请将代码中的
北极熊.jpg替换为你自己的图片路径。 - 代码中的样式使用了CSS的flex布局，使输入框和选择框居中显示，并且占据父容器的1/5宽度。
- 背景图片使用了
background-image属性，并设置了background-size: cover;来保证图片能够铺满整个页面。
原文地址: https://www.cveoy.top/t/topic/hFkm 著作权归作者所有。请勿转载和采集!