HTML 代码示例:创建姓名输入框和夸奖选择框
以下是一个简单的 HTML 代码示例,包含一个输入姓名的文本框和一个选择谁夸你的下拉框。同时,添加了一个美观的页面布局,并将网页背景设置为指定的图片地址。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('C:\Users\kac\Desktop\manzhouli.jpg');
background-size: cover;
font-family: Arial, sans-serif;
text-align: center;
padding-top: 150px;
}
h1 {
color: white;
font-size: 36px;
}
input, select {
margin-top: 20px;
padding: 10px;
font-size: 18px;
}
select {
width: 200px;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>谁夸你</h1>
<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>
<button>夸我!</button>
</body>
</html>
请注意,由于HTML是一种静态语言,无法直接使用本地文件路径作为背景图片地址。在实际使用时,可以将图片上传到服务器,并使用服务器上的URL地址作为背景图片地址。
原文地址: http://www.cveoy.top/t/topic/fvSq 著作权归作者所有。请勿转载和采集!