HTML 代码示例：创建个性化夸奖页面
以下是一个简单的 HTML 代码示例，实现了输入姓名、选择夸你的对象、选择评价时长，并设置了背景图片。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://example.com/manzhouli.jpg'); /* 替换为可访问的图片地址 */
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
#form {
margin-top: 100px;
text-align: center;
}
#submit-btn {
margin-top: 20px;
}
</style>
</head>
<body>
<div id='form'>
<h1>夸我一下</h1>
<form>
<label for='name'>姓名：</label>
<input type='text' id='name' name='name' required><br><br>
<label for='praise'>想让谁夸你：</label>
<select id='praise' name='praise' required>
<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><br><br>
<label for='duration'>评价时长：</label>
<select id='duration' name='duration' required>
<option value='1分钟'>1分钟</option>
<option value='3分钟'>3分钟</option>
<option value='5分钟'>5分钟</option>
<option value='10分钟'>10分钟</option>
<option value='30分钟'>30分钟</option>
</select><br><br>
<input type='submit' value='提交' id='submit-btn'>
</form>
</div>
</body>
</html>
这段代码中，使用了内联 CSS 样式来设置背景图片、布局和样式。背景图片使用绝对路径指定了图片的地址，并通过background-size: cover使其完全显示在页面上。表单元素使用了text-align: center来居中对齐，整体布局合理美观。
请注意，你需要将背景图片的地址更改为一个可以公开访问的网络图片地址，或者将图片文件放置在与 HTML 文件相同的目录下，并使用相对路径指定图片地址。
原文地址: https://www.cveoy.top/t/topic/fvSL 著作权归作者所有。请勿转载和采集!