用户注册表单和上下文选择器
16lz
2021-07-06
作业内容:
- 制作一个用户注册表单,将课堂上提到的表单控件全部用到;
- 理解css模块的思想,并试写一个案例(选做)
- 实例演示基本选择器与上下文选择器
- 预习伪类选择器与常用元素的css样式设置,盒模型知识等
1.
<!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">
<title>Document</title>
</head>
<body>
<h3>必填项</h3>
<form action="">
<fieldset>
<div>
<label for="username"> 账号:</label>
<input type="text" id="username" name="username" autofocus required placeholder="不少于8位" />
</div>
<div>
<label for="username"> 密码:</label>
<input type="password" id="password" name="password" autofocus required placeholder="不少于6位" />
</div>
<div>
<label for="username"> 邮箱:</label>
<input type="email" id="email" name="email" autofocus required placeholder="79524795@qq.com" />
</div>
<label for="secret">性别:</label>
<input type="radio" name="gender" id="man" value="man" /><label for="man">男</label>
<input type="radio" name="gender" id="women" value="women" /><label for="women">女</label>
<input type="radio" name="gender" id="g" value="s" checked id="secret" /><label for="g">保密</label>
<br>
<label for="">爱好:</label>
<input type="checkbox" name="hobby[]" id="game" checked> <label for="game">游戏</label>
<input type="checkbox" name="hobby[]" id="trave"> <label for="trave">抽烟</label>
<input type="checkbox" name="hobby[]" id="shoot"> <label for="shoot">喝酒</label>
<input type="checkbox" name="hobby[]" id="da"> <label for="da">打架</label>
<br>
<label for="">PHP水平:</label>
<select name="level" id="">
<option value="1">小白</option>
<option value="2">垃圾</option>
<option value="3" selected>一般</option>
<option value="3">三年PHP</option>
</select>
<br>
<div>
<label for="">喜欢的编码语言:</label>
<input type="search" name="search" list="keywords">
<datalist id="keywords">
<option value="html"></option>
<option value="java"></option>
<option value="php"></option>
</datalist>
</div>
<button type="submit">提交</button>
</fieldset>
</form>
</body>
</html>
3.
<!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">
<title>Document</title>
<style>
/* ul li {
background-color: lightblue;
} */
body > ul > li {
background-color:lightgreen ;
}
.a + li {
background-color: yellow;
}
.b ~ li {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li class="a">item1</li>
<li>item2</li>
<li id="">item3</li>
<li id="">item4</li>
<li >
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</li>
<li class="b">item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</body>
</html>