php学习第三天
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="" method="get" style="display: grid" style="display: grid; gap: 0.5em" onsubmit="return false;" >
<fieldset>
<legend>必填项</legend>
<div>
<label for="username">账号:</label>
<input type="text" id="username" name="username" autofocus required placeholder="不少于8位" value="username" />
</div>
<div>
<label for="psw">密码:</label>
<input type="password" id="psw" name="psw" />
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" />
</div>
</fieldset>
<div>
<label for="xinbie">xinbie:</label>
<input type="radio" name="man" value="male" />
<label for="">man</label>
<input type="radio" name="female" value="male" />
<label for="">nv</label>
</div>
<div>
<label for="aihao">aihao</label>
<input type="checkbox" name="hobby[]" id="pingpang" /><label for=””
>pingpang</label
>
<input type="checkbox" name="hobby[]" id="lanqiu" /><label for=""
>lanqiu</label
>
</div>
<!-- xialakuang -->
<div>
<label for="level">xuaznhuiyuan:</label>
<select name="level" id="">
<option value="1">jinpai</option>
<option value="2" selected>yinpai</option>
<option value="3">tongpai</option>
</select>
</div>
<div>
<label for="">sousuo:</label>
<input type="search" name="search" />
<datalist>
<option value="html"></option>
</datalist>
</div>
<button>sub</button>
</form>
</body>
</html>
<!-- 标签:labal,input,form,属性:type:redio,type:text,type:password,type:checkbox ru guo wo shi checkbox,name:hobby[] -->
···
效果图如下
2. 理解css模块的思想,并试写一个案例(选做);
3. 实例演示基本选择器与上下文选择器;
3.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>
<div class="aa1">
<p id="today">today is a good day</p>
<div class="aa2">
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</div>
<style>
/* * {
background-color: yellow;
} */
.aa1 {
width: 100px;
height: 50px;
}
#today {
color: red;
}
p {
font-size: 20px;
}
p,
li {
background-color: aqua;
}
</style>
</body>
</html>
效果如下
4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等;
更多相关文章
- 0630作业
- 表单和CSS选择器的案例
- 实战:简单的注册页面与常用选择器
- 表单创建及CSS
- 简单表单与css选择器实战案例
- 注册表单实战案例
- HTML注册表单控件实例、CSS模块化理解与CSS基本/上下文选择器的
- 表单以及选择器
- 实战简单的注册表单以及选择器的认识