Home > List of blog posts > 表单应用以及css样式和选择器

Blogger Information

Blog 43

fans 0

comment 0

visits 30427

Special Recommendation

More>

Related recommendations

表单应用以及css样式和选择器

作业内容：

制作一个用户注册表单,将课堂上提到的表单控件全部用到;
理解css模块的思想,并试写一个案例(选做);
实例演示基本选择器与上下文选择器。

用户注册表单

实例效果

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" />
<title>用户注册</title>
</head>
<body>
<h3 algn="center">用户注册</h3>
<form action="" method="get"  style="display:grid;gap:0.5em">
    <fieldset>
        <legend>必填项</legend>
        <div>
            <label for="username">用户名:&nbsp;&nbsp;&nbsp;&nbsp;      </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="不少于6位"/>                         </div>
          <div>
            <label for="">确认密码:</label>
            <input type="password" name="psw" id="psw" placeholder="不少于6位"/> </div>
          <div>
            <label for="email">邮箱:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
            <input type="email" name="email" id="email" required placeholder="demo@email.com" />
          </div>
    </fieldset>
  <div>
      <label for="male">性别:</label>
      <!-- 所有单选按钮的name必须相同 -->
      <input type="radio" name="gender" value="male" id="male" checked/><label for="">男</label>
      <input type="radio" name="gender" value="female"/><label for="">女</label>
</div>
  <div>
    <label>爱好:</label>
    <!-- 所有复选框的name属性必须写成数组格式 -->
    <input name="hobby[]" id="game" type="checkbox" checked/><label for="game">游戏</label>
    <input name="hobby[]" id="swim" type="checkbox" /><label for="swim">游泳</label>
    <input name="hobby[]" id="book" type="checkbox" checked/><label for="book">看书</label>
  </div>
  <div>
    <label for="">成分:</label>
    <select name="part" id="">
      <option value="1">党员</option>
      <option value="2">团员</option>
      <option value="3" selected>群众</option>
    </select>
  </div>
  <div>
      <label for="">搜索关键字:</label>
      <input type="search" name="search" list="keywords">
      <datalist id="keywords">
          <option value="html"></option>
          <option value="css"></option>
          <option value="js"></option>
          <option value="php"></option>
      </datalist>
  </div>
  <button type="submit">马上注册</button>
</form>
</body>
</html>

理解css模块的思想,并试写一个案例

实例截图

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" />
<title>css样式的模块化</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>页眉</header>
<main>主体</main>
<footer>页脚</footer>
</body>
</html>

css代码
footer.css

footer {
height: 5em;
background-color: lightgreen;
}

header.css

header {
  height: 3em;
  background-color: lightblue;
}

main.css

main {
  flex: 1;
  background-color: aqua;
}

reset.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  color: #555;
  text-decoration: none;
}

style.css

@import url("reset.css");
@import url("main.css");
@import url("header.css");
@import url("footer.css");
@import url("public.css");

public.css

body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

基本选择器与上下文选择器

基本选择器

<!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>选择器：基本选择器,标签和属性选择器</title>
<style>
  /* 标签 */
  li {
    background-color: violet;
  }
  /* 属性 */
  li[id="foo"] {
    background-color: lightblue;
  }
  /* 因为id是通用且高频的属性，所以有一个快捷方式 */
  #foo {
    background-color: yellow;
  }
  .on {
    background-color: lightgreen;
  }
</style>
</head>
<body>
<ul>
  <li id="foo">item1</li>
  <li>item2</li>
  <li class="on">item3</li>
  <li class="on">item4</li>
  <li>item5</li>
</ul>
</body>
</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" />
<title>上下文选择器</title>
<style>
  /* 上下文选择器，就是根据位置来选择 */
  /* 1.后代选择器,子子孙孙全选中空格 */
  ul li {
    background-color: lightblue;
  }
  /* 2.子选择器,只匹配子一级 */
  body > ul > li {
    background-color: lightgreen;
  }
  /* 3.同级相邻选择器，加号+ */
  .start + li {
    background-color: yellow;
  }
  /* 4.同级所有选择器 ~波浪线*/
  .start ~ li {
    background-color: violet;
  }
</style>
</head>
<body>
<ul>
  <li>item1</li>
  <li class="start">item2</li>
  <li>item3</li>
  <li>
    item4
    <ul>
      <li>item-1</li>
      <li>item-2</li>
      <li>item-3</li>
    </ul>
  </li>
  <li>item5</li>
</ul>
</body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

0628第1节课

2021-06-28 22:48:00