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>

效果如下

1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到;

2. 理解css模块的思想,并试写一个案例(选做);

3. 实例演示基本选择器与上下文选择器;

3.1基本选择器

4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等;

相关文章