页面
代码
html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/userForm.css" /> <title>用户注册表单</title></head><body> <h1>用户注册表单</h1> <h3>注意事项</h3> <ul> <li>提交前检查</li> <li class="start">有问题练习123456</li> <li>网站邮箱：111@163.com</li> </ul> <form action="" method="get"> <div> <label for="">搜索</label> <input type="search" name="search" list="showList"/> <datalist id="showList"> <option value="1"></option> <option value="2"></option> <option value="3"></option> </datalist> </div> <fieldset class="must"> <legend>必填项</legend> <div> <label for="username">用户名：</label> <input type="text" name="username" id="username" autofocus required placeholder="请输入不超过8位数"> </div> <div> <label for="password">密码：</label> <input type="password" name="password" id="password" required placeholder="请输入大写字母或小写字母"> </div> <div> <label for="email">邮箱：</label> <input type="email" name="email" id="email" required placeholder="example@email.com"> </div> </fieldset> <fieldset class="choose"> <legend>问卷调查（选填项）</legend> <div> <label for="male">性别：</label> <input type="radio" name="gender" value="male" id="male" checked><label for="">男</label> <input type="radio" name="gender" value="female" id="female"><label for="">女</label> </div> <div> <label for="">从哪些渠道获取本网站信息：</label> <input type="checkbox" name="route[]" id="internet"><label for="internet">网络</label> <input type="checkbox" name="route[]" id="magzine" class="start"><label for="magzine">报纸杂志</label> <input type="checkbox" name="route[]" id="friends"><label for="friends">朋友介绍</label> </div> <div> <label for="">年龄段</label> <select name="age" id="age"> <option value="1">18岁以下</option> <option value="2" selected>18-30岁</option> <option value="3">30岁以上</option> </select> </div> </fieldset> <div> <button type="submit">提交表单</button> </div> </form> </body></html>
css
/* 基本选择器 */h1 { text-align: center}h3 { background-color: violet; text-align: center}fieldset.must{ background-color: rgb(130, 225, 238); text-align: center}fieldset.choose{ background-color: rgb(231, 238, 130); text-align: center}/* 上下文选择器 */ul li { background-color: lightblue;}.start + li { background-color: yellow;}
