44 lines
2.2 KiB
HTML
44 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head><meta charset="utf-8"><title>网页元素演练场</title>
|
||
|
|
<style>
|
||
|
|
body { font-family: "Microsoft YaHei", sans-serif; margin: 24px; color: #1f2937; }
|
||
|
|
.card { border: 2px solid #2563eb; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
|
||
|
|
#result { margin-top: 12px; padding: 12px; background: #f0fdf4; border-radius: 6px; min-height: 24px; }
|
||
|
|
#hover-area { width: 240px; height: 60px; background: #e5e7eb; line-height: 60px; text-align: center; border-radius: 6px; }
|
||
|
|
#hover-area:hover { background: #fde68a; }
|
||
|
|
#spacer { height: 1600px; background: linear-gradient(#ffffff, #dbeafe); }
|
||
|
|
#bottom-area { padding: 20px; background: #fee2e2; border-radius: 8px; }
|
||
|
|
label { margin-right: 16px; }
|
||
|
|
button { padding: 6px 16px; }
|
||
|
|
button:disabled { color: #9ca3af; }
|
||
|
|
</style></head>
|
||
|
|
<body>
|
||
|
|
<h1>网页元素演练场</h1>
|
||
|
|
<div class="card" id="card">
|
||
|
|
<h2>基础表单</h2>
|
||
|
|
<label>名称 <input id="inp-name" placeholder="请输入名称" /></label><br/><br/>
|
||
|
|
<label>密码 <input id="inp-pass" type="password" /></label><br/><br/>
|
||
|
|
<label>城市
|
||
|
|
<select id="sel-city">
|
||
|
|
<option value="bj">北京</option>
|
||
|
|
<option value="sh">上海</option>
|
||
|
|
<option value="gz">广州</option>
|
||
|
|
</select>
|
||
|
|
</label><br/><br/>
|
||
|
|
<label><input type="checkbox" id="chk-agree" /> 同意条款</label>
|
||
|
|
<label><input type="radio" name="plan" id="rd-basic" checked /> 基础版</label>
|
||
|
|
<label><input type="radio" name="plan" id="rd-pro" /> 专业版</label><br/><br/>
|
||
|
|
<button id="btn-submit" onclick="document.getElementById('result').textContent = '已提交：' + document.getElementById('inp-name').value + ' / 城市:' + document.getElementById('sel-city').value + ' / 同意:' + document.getElementById('chk-agree').checked">提交</button>
|
||
|
|
<button id="btn-disabled" disabled>禁用按钮</button>
|
||
|
|
<div id="result">等待提交…</div>
|
||
|
|
</div>
|
||
|
|
<div class="card" id="attr-card">
|
||
|
|
<h2>属性测试</h2>
|
||
|
|
<div id="attr-target" data-info="hello-rpa" title="属性目标">属性目标元素</div><br/>
|
||
|
|
<input type="file" id="file-input" />
|
||
|
|
</div>
|
||
|
|
<div id="hover-area">悬停我变色</div>
|
||
|
|
<div id="spacer"></div>
|
||
|
|
<div id="bottom-area" class="card">页底区域（滚动测试目标）</div>
|
||
|
|
</body></html>
|