博主信息
博文 4
粉丝 0
评论 0
访问量 3047
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
3.19作业
形状
原创
626人浏览过

一、学生课程表

1. 效果图来一波

2. 以下是课程表代码(对属性还不熟悉)

<!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>
<!-- <h4 style="text-align: center">学生课程安排表</h4> -->
<table border="2" width="400" align="center" cellspacing="0" cellpadding="7">
<caption style="font-weight: 1200;margin: 1em;">南宁市桃园小学学生课程安排表</caption>
<!-- 先行后列 -->
<thead>
<tr bgcolor="lightcyan">
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
</tr>
</thead>
<tbody>
<!-- 第二行第一列是垂直合并的起点,合并2-4列 -->
<tr>
<th rowspan="3" bgcolor="lightblue">上午</th>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
</tr>
<!-- 将第四行整行合并 -->

<tr>
<th colspan="6" align="center">午休时间</th>
<!-- <td>语文</td> <td>数学</td> <td>英语</td> <td>物理</td> <td>化学</td> -->
</tr>
<tr>
<th rowspan="2" bgcolor="lightblue">下午</th>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td colspan="2" bgcolor="red" align="center">大扫除</td>
<!-- <td>化学</td> -->
</tr>
</tbody>
<tfoot>
<tr>
<td>备注</td>
<td colspan="5">下午16:30-17:30自由活动</td>
<!-- <td>3</td> <td>4</td> <td>5</td> <td>6</td> -->
</tr>
</tfoot>
</body>
</html>

3.表单效果图

4.代码块

遇到两个问题:1.多选框勾选后背景色没有变化。2.下拉列表右侧没有显示打叉符号 。

<!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>
<form style="display: grid; gap: 0.5em" method="POST">
<div>
<label for="username">账户:</label>
<input type="text" id="username" autofocus placeholder="必须6-8位" />
</div>
<div>
<label for="password">密码:</label>
<input type="password" id="username" />
</div>
<div>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email" />
</div>


<div>
<label for="female">性别</label>
<input type="radio" name="gender" value="male" id="male"/><label for="male">男</label>
<input type="radio" name="gender" value="female" id="female" checked/><label for="female">女</label>
</div>
<div>
<label for="">爱好:</label>
<input type="checkbox" name="hobby[]" id="" checked /><label for="">写作</label>
<input type="checkbox" name="hobby[]" id=""/><label for="">摄影</label>
<input type="checkbox" name="hobby[]" id=""/><label for="">游泳</label>
<input type="checkbox" name="hobby[]" id=""/><label for="">唱歌</label>
</div>
<select name="level" id="">
<option value="1">11</option>
<option value="2">22</option>
<option value="3" selected>33</option>
</select>
<div>
<div <label for="">关键字</label>
<input type="search" name="search" id="" list="my-key"/>
<datalist id="my-key">
<option value="html"></option>
<option value="css" ></option>
<option value="php" ></option>
<option value="javacript"></option>
</datalist>
</div>
<button>提交</button></button>
</div>
</body>
</html>

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:markdown语法写,只要10分钟就可以掌握
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学