html+css作业2-优秀学生表格&会员注册表单

Hola__SUN

已于 2023-10-11 15:59:54 修改

阅读量236

点赞数

分类专栏：前端文章标签： html css 前端

于 2023-10-11 15:12:38 首次发布

本文链接：https://blog.csdn.net/Hola__SUN/article/details/133769816

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

html-优秀学生表格&会员注册表单

0 前言
1 优秀学生表格
- 目标样式
- 代码
2 会员注册表单
- 目标样式
- 代码
总结

0 前言

记录前端学习~

1 优秀学生表格

目标样式

优秀学生信息表格样式

代码

文件结构

文件结构

test.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>Document</title>
</head>
<body>
  <table border="2" width="400" height="400">
    <caption>
      <h3>优秀学生信息表格</h3>
    </caption>
    <thead>
      <tr>
        <th>年级</th>
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="2">高三</td>
        <td>张三</td>
        <td>110</td>
        <td>三年二班</td>
      </tr>
      <tr>
        <td>赵四</td>
        <td>120</td>
        <td>三年三班</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>评语</td>
        <td colspan="3">优秀</td>
      </tr>
    </tfoot>   
  </table>
</body>
</html>

2 会员注册表单

目标样式

会员注册表单样式

代码

文件结构

文件结构

test.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>Document</title>
</head>
<body>
  <h1>青春不常在，抓紧谈恋爱</h1>
  <hr>
  <form action="">
    <label>昵称：
      <input type="text" placeholder="请输入昵称">
    </label>
    <br><br>
    <label>性别：
      <label>
        <input type="radio" name="gender" checked>男
      </label>
      <label>
        <input type="radio" name="gender">女
      </label>
    </label>
    <br><br>
    <label>所在城市：
      <select>
        <option>上海</option>
        <option>北京</option>
        <option>广州</option>
        <option>深圳</option>
      </select>
    </label>
    <br><br>
    <label>婚姻状况：
      <label>
        <input type="radio" name="marriage" checked>未婚
      </label>
      <label>
        <input type="radio" name="marriage">已婚
      </label>
      <label>
        <input type="radio" name="marriage">保密
      </label>
    </label>
    <br><br>
    <label>喜欢的类型：
      <label>
        <input type="checkbox" checked>可爱
      </label>
      <label >
        <input type="checkbox" checked>性感
      </label>
      <label>
        <input type="checkbox">御姐
      </label>
      <label>
        <input type="checkbox">小鲜肉
      </label>
      <label>
        <input type="checkbox">大叔
      </label>
    </label>
    <br><br>
    <label>个人介绍：
      <br><br>
      <textarea cols="60" rows="10"></textarea>
    </label>
    <h3>我承诺</h3>
    <ul>
      <li>年满18岁、单身</li>
      <li>抱着严肃的态度</li>
      <li>真诚寻找另一半</li>
    </ul>
    <input type="checkbox">我同意所有条款
    <br><br>
    <button type="submit">免费注册</button>
    <button type="reset">重置</button>
  </form>
</body>
</html>