Web:学生课程表表格/用户注册表单

最新推荐文章于 2024-04-30 22:05:29 发布
最新推荐文章于 2024-04-30 22:05:29 发布
阅读量2.8k 收藏 36
点赞数 3
分类专栏： Web前端 文章标签： css html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43356354/article/details/118024633
版权

一.学生课程表

1.课程表模样

2.课程表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>2020新学期课程表</title>
    <style type="text/css">
      caption {
        /*定义标题加粗*/
        font-weight: bold;
      }
      table,
      th,
      td {
        /*定义表格样式*/
        border: 1px solid red;
        border-collapse: collapse;
        text-align: center;
      }
      .themorning {
        /*定义字体颜色和背景*/
        color: fuchsia;
        background-color: lightpink;
      }
      .theafternoon {
        /*定义字体颜色和背景*/
        color: goldenrod;
        background-color: lightcyan;
      }
      thead {
        /*定义背景颜色*/
        background-color: lightcoral;
      }
      tfoot {
        /*定义背景颜色*/
        background-color: lemonchiffon;
      }
    </style>
  </head>
  <body>
    <div>
      <table>
        <!-- 表格标题 -->
        <caption>
          2020新学期课程表
        </caption>
        <!-- 表格头部 -->
        <thead>
          <th>时间</th>
          <th>星期一</th>
          <th>星期二</th>
          <th>星期三</th>
          <th>星期四</th>
          <th>星期五</th>
        </thead>
        <!-- 表格体部上午 -->
        <tbody>
          <tr>
            <td rowspan="4" class="themorning" id="top1">上午</td>
            <td class="themorning">语文</td>
            <td class="themorning">英语</td>
            <td class="themorning">数学</td>
            <td class="themorning">音乐</td>
            <td class="themorning">数学</td>
          </tr>
          <tr>
            <!-- <td class="themorning"></td> -->
            <td class="themorning">音乐</td>
            <td class="themorning">美术</td>
            <td class="themorning">语文</td>
            <td class="themorning">英语</td>
            <td class="themorning">语文</td>
          </tr>
          <tr>
            <!-- <td class="themorning"></td> -->
            <td class="themorning">美术</td>
            <td class="themorning">阅读</td>
            <td class="themorning">体育</td>
            <td class="themorning">数学</td>
            <td class="themorning">英语</td>
          </tr>
          <tr>
            <!-- <td class="themorning"></td> -->
            <td class="themorning">英语</td>
            <td class="themorning">音乐</td>
            <td class="themorning">科学</td>
            <td class="themorning">美术</td>
            <td class="themorning">科学</td>
          </tr>
        </tbody>
        <!-- 表格体部下午 -->
        <tbody>
          <tr>
            <td rowspan="4" class="theafternoon" id="top2">下午</td>
            <td class="theafternoon">语文</td>
            <td class="theafternoon">英语</td>
            <td class="theafternoon">数学</td>
            <td class="theafternoon">音乐</td>
            <td class="theafternoon">数学</td>
          </tr>
          <tr>
            <!-- <td class="theafternoon"></td> -->
            <td class="theafternoon">音乐</td>
            <td class="theafternoon">美术</td>
            <td class="theafternoon">语文</td>
            <td class="theafternoon">英语</td>
            <td class="theafternoon">语文</td>
          </tr>
          <tr>
            <!-- <td class="theafternoon"></td> -->
            <td class="theafternoon">美术</td>
            <td class="theafternoon">阅读</td>
            <td class="theafternoon">体育</td>
            <td class="theafternoon">数学</td>
            <td class="theafternoon">英语</td>
          </tr>
          <tr>
            <!-- <td class="theafternoon"></td> -->
            <td class="theafternoon">音乐</td>
            <td class="theafternoon">美术</td>
            <td class="theafternoon">语文</td>
            <td class="theafternoon">英语</td>
            <td class="theafternoon">语文</td>
          </tr>
        </tbody>
        <!-- 表格部尾部 -->
        <tfoot>
          <tr>
            <td>备注：</td>
            <td colspan="5">每天下午17：00放学，作业在晚上20：00提交到群内</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </body>
</html>

二.用户注册表单

####1.用户注册表单模样

####2.用户注册表单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 type="text/css">
      div {
        border: 1px solid coral;
        width: 245px;
        height: 35px;
      }
      #submit {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>
      <form method="POST" action="">
        <!-- maxlength 设置最大长12位数 minlength 设置最小6位数 autofocus 设置自动焦点 required 设置必填项 -->
        <div>
          <label for="usserneme"> 账号:*</label>
          <input
            type="text"
            id="usserneme"
            name="usserneme"
            minlength="6"
            maxlength="12"
            placeholder="*号必填项6-8位数"
            autofocus
            required
          />
        </div>
        <div>
          <!-- input type password 是密码框选项可以隐藏文本输入 -->
          <label for="password"> 密码:*</label>
          <input
            type="password"
            name="password"
            id="password"
            placeholder="*号必填项字母+数字"
            minlength="8"
            maxlength="12"
            required
          />
        </div>
        <div>
          <label for="emali">邮箱:*</label>
          <input
            type="email"
            name="emali"
            id="emali"
            placeholder="*号必填项admin@qq.com"
            required
          />
        </div>
        <div>
          <!-- 单选框使用 input type radio  -->
          <label for="secret">性别:</label>
          <input type="radio" name="gender" id="male" value="male" />
          <label for="male">男</label>
          <input type="radio" name="gender" id="female" value="female" />
          <label for="female">女</label>
          <input
            type="radio"
            name="gender"
            id="secret"
            value="secret"
            checked
          />
          <label for="secret">保密</label>
        </div>
        <div>
          <label for="">爱好:</label>
          <input type="checkbox" name="hobby[]" id="lvxing" value="lvxing" />
          <label for="lvxing">旅行</label>
          <input
            type="checkbox"
            name="hobby[]"
            id="yumaoqiu"
            value="yumaoqiu"
            checked
          />
          <label for="yumaoqiu">羽毛球</label>
          <input type="checkbox" name="hobby[]" id="lanqiu" value="lanqiu" />
          <label for="lanqiu">篮球</label>
        </div>
        <div>
          <!-- 复选框 select要配合option一起使用 selected是默认选一个值  -->
          <label for="">想学习:</label>
          <select name="" id="">
            <option value="html">html</option>
            <option value="css">css</option>
            <option value="JavaScript">JavaScript</option>
            <option value="php" selected>php</option>
          </select>
        </div>
        <div>
          <!-- 这是一个input+select 下拉列表+文本框  -->
          <label for="">关键字:</label>
          <input
            type="search"
            name="search"
            id=""
            list="my-key"
            placeholder="请输入文字搜索"
          />
          <datalist id="my-key">
            <option value="php中文网"></option>
            <option value="百度一下"></option>
            <option value="新浪微博"></option>
          </datalist>
        </div>
        <div id="submit">
          <!-- input type submit 提交按钮 -->
          <input type="submit" value="提交" />
        </div>
      </form>
    </div>
  </body>
</html>
ZzzWClock
关注
  • 3
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用html5制作自己的课程表
weixin_43928264的博客
03-16 5358
用html5制作自己的课程表 当我们每个学期开始上课时，是不是总要登入一些网站或app才能找到自己的课程表呢？这里，我给大家展示怎样自己写属于自己的课程表，能够创建一个网页，并随时打开自己的课程表岂不美哉！ 首先，创建.txt文档，然后变更后缀名名为.html，即可创建一个空网页！(若电脑无法显示后缀名，请百度收索“电脑文件名后缀显示问题”) 然后，将下面的代码复制输入，改为自己的课程名称即可： ...
简单网页课表制作
九天小牛
09-19 9663
效果图：    代码如下：  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;style type="text/css"&gt;body{background-size:cover}&lt;/style
Web实验一：课程表
最新发布
landexiangmz的博客
04-30 182
课表css（style2.css）
用HTML制作课程表
2301_79708809的博客
09-12 564
border-collapse:collapse ：表示折叠边框。<table> </table>：定义表格。<tr> </tr>：定义表格的行。<td> </td>：定义表格的列。border ：表格的边框宽度。text-align ：文本水平居中。用HTML制作一张简单的课程表。margin：外边距。
用HTML制作一个课程表
2201_75650749的博客
09-17 1786
表格由行、列、单元格三部分组成：table（表格标记）、tr（行标记）、td（单元格标记）以上是简单的HTML表格用来展示一个星期的课程安排。表格使用了css样式来美化。
Web前端——表格及课表实例
EWQOR的博客
02-19 1001
table元素及课表实例
【Web动态网页设计作业】简单的JavaScript验证表单
小二笙的博客
12-27 7851
编写一个JavaScript程序验证表单，其中，表单中有四个元素，分别是姓名，年龄，email，以及一个专业的复选框，其中专业选项为“计算机科学与技术”“通信工程”，“英语”。要求在表单提交的时候做如下判断： （1）姓名年龄和email三个元素的内容均不能为空； （2）年龄必须为数字； （3）email中必须有一个@符号。完全满足上述三个条件时方可提交，否则弹出给用户提示信息。 （4）在此基础上，...
基于Java（springboot）+Vue+MySQL实现的（Web）电影院会员管理系统【100011540】
04-04
交易记录表字段：id、cardid、value、time、spendtype 3. 电影票模块 a) 商品信息列表：在会员卡列表中会员卡项左侧点击购买弹出电影票模态窗口，显示当前所有电影票的商品信息 b) 购买：有两种购买选择方式：积分...
WEB应用开发课程程序源码
02-07
这里提供的两个程序1.1（index.html）和程序1.2（register.html）是基础的HTML文件，它们展示了如何构建一个简单的网页布局以及用户注册表单。 1. **HTML基础知识** - `<!DOCTYPE html>`: 这是声明文档类型，指定...
课程标准（原教学大纲）《网页设计与制作项目教程》.doc
12-01
通过对本课程的学习，使学生掌握常用网页设计工具，熟练运用多种网页设计技术，具备 Web 网页设计、制作及站点管理的基本知识和技能，能够独立制作小型网站，适应网站管理员、网页设计师岗位。 课程能力标准要求： ...
（全）传智播客PHP就业班视频完整课程
10-30
图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图映射1 8-12 4.多媒体页面 标签汇总① 地图...
前端课程表
02-06
frontendCourseList 算法 数组 框架 HTML Java脚本 es6 文件 模式 布局 webComponent nativeApi 贝壳 打字稿
HTML5生成课表
12-25
HTML5生成超级课程表格子样式课表，并通过JS代码实现单双周课程自动判断。
web课程设计网页设计源代码
09-01
利用web网页设计技术（html+css+javascript）进行网站开发，含源代码 ，以及网页所用的图片，可做课程设计参考
Android课程表（仿超级课程表）
05-28
仿超级课程表，可对课程进行动态增删改查，使用CardView记录课程
DrCHUCK-PHP-SQL-DB-APPS-JS:Charles Russell Severance欢迎使用PHP构建Web应用程序！您正在加入目前正在注册该课程的数千名学习者。我很高兴能与您一起上课，并期待您对学习社区的贡献。首先，我建议花一些时间来探索本课程的站点。查看我们每周要讲的材料，并预览完成该课程所需的作业。单击“讨论”以查看论坛，在这里您可以与参加课程的同学讨论课程材料。如果您对课程内容有疑问，请将其发布在论坛上以获得课程社区其他人的帮助。有关Coursera平台的技术问题，请访问学习者
03-22
对多对多关系进行建模，例如表示用户，角色和课程所需的关系。 PHP_OOP-PDO-SQL注入- PHP语言中的面向对象模式 使用可移植数据对象（PDO）库连接到MySQL 使用PHP语言发出SQL命令。 从表单添加数据 解决一些安全...
HTML5制作信息登记表
热门推荐
码云仓库地址：https://gitee.com/lance-gyq
12-04 1万+
# 制作信息登记表# 样式需求分析: 一、 通过最外层的大盒子对页面进行整体控制，设置宽高、背景图片及相对定位。 二、 通过标记对表单进行整体控制，对其设置宽高、边距、边框样式及绝对定位。 三、 通过标记控制标题的文本样式，对其设置对齐、外边距样式。 四、 通过标记控制每一行的学员信息模块，对其设置外边距样式。 五、 通过标记控制提示信息，将其转为行内块元素，对其设置宽度、又内边距及右对齐。 六、 通过标记控制输入框的宽高、内边距和边宽样式。 成品样式主要代码： 效果图： 这...
WEB基础与前端开发--课程表页面的设计
m0_60731363的博客
10-14 1263
在WEB静态网页设计当中，HTML,CSS和JavaScript是三大利器，发挥着必不可少的作用。最近的一次实验课，进行了课程表页面的设计，这次的实验内容相对比较简单，主要是HTML当中表单类标记的使用，主要用到的表示有 的使用。
用HTML5编写一个课程表界面
DollyCat的博客
09-12 2330
方法：用li列表常见表格。 效果图如下 源代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的课程表</title> <style> body{ margin:0% auto; padding:0; background:#fff; t
data() { return { ruleForm: {//初始化数据对象，用来存储表单中的各个字段的值 xingbie: '', }, pageFlag : '', tableName:"", rules: {},//用于存放验证规则 emailcode:'',//邮箱的验证码 // 倒计时时间 count: 60, // 倒计时定时器 inter: null, // 倒计时是否结束 isEndFlag: true, yonghuxingbieOptions: [],//存放性别选择的选项 }; },
05-22
- pageFlag 和 tableName：两个字符串类型的变量，用于存储页面标识和表格名称。 - rules：一个对象，用于存放表单验证规则。 - emailcode：一个字符串类型的变量，用于存储邮箱验证码。 - count、inter 和 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值