以下是一个简单的HTML代码示例,实现了输入姓名、选择夸你的对象、选择评价时长,并设置了背景图片。

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-image: url("C:\Users\kac\Desktop\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文件相同的目录下,并使用相对路径指定图片地址。

HTML代码:输入姓名;想让谁夸你孙悟空、沙僧、唐僧、猪八戒、二郎神、白骨精、女儿国国王、牛魔王、夏海生;评价时长1分钟、3分钟、5分钟、10分钟、30分钟;网页背景地址:CUserskacDesktopmanzhoulijpg图片全部显示;网页布局合理美观

原文地址: https://www.cveoy.top/t/topic/hFlO 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录