实战作业
作业环境说明
系统:centos
web服务器:nginx
php版本:7.4
IDE:vscode
作业代码合集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>day2-1209作业</title>
<style>
body {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: left;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
table {
margin: auto;
}
table.gridtable {
font-family: verdana, arial, sans-serif;
font-size: 1em;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
}
table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
</head>
<body>
<ul>
<li><a class="active" href="#">首页</a></li>
<li><a href="#table">查看课程表</a></li>
<li><a href="#change">修改课程表</a></li>
</ul>
<table class="gridtable" id="table">
<caption>1209作业课程表</caption>
<thead>
<tr>
<th colspan="2"></th>
<!-- <th></th> -->
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期天</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="4">上午</td>
<td>1</td>
<td>洗漱</td>
<td>洗漱</td>
<td>洗漱</td>
<td>洗漱</td>
<td>洗漱</td>
<td>洗漱</td>
<td>洗漱</td>
</tr>
<tr>
<!-- <td></td> -->
<td>2</td>
<td>早餐</td>
<td>早餐</td>
<td>早餐</td>
<td>早餐</td>
<td>早餐</td>
<td>早餐</td>
<td>早餐</td>
</tr>
<tr>
<!-- <td></td> -->
<td>3</td>
<td>新闻</td>
<td>新闻</td>
<td>新闻</td>
<td>新闻</td>
<td>新闻</td>
<td>新闻</td>
<td>新闻</td>
</tr>
<tr>
<!-- <td></td> -->
<td>4</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
</tr>
<tr>
<td colspan="8" style="text-align: center;">中午休息</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td rowspan="4">下午</td>
<td>5</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
</tr>
<tr>
<!-- <td></td> -->
<td>6</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
</tr>
<tr>
<!-- <td></td> -->
<td>7</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
</tr>
<tr>
<!-- <td></td> -->
<td>8</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
<td>工作</td>
</tr>
<tr>
<td colspan="8" style="text-align: center;">晚间休息</td>
<!-- <td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td> -->
</tr>
<tr>
<td rowspan="4">晚上</td>
<td>9</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
</tr>
<tr>
<!-- <td></td> -->
<td>10</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
</tr>
<tr>
<!-- <td></td> -->
<td>11</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
<td>学习</td>
</tr>
<tr>
<!-- <td></td> -->
<td>12</td>
<td>巩固练习</td>
<td>巩固练习</td>
<td>巩固练习</td>
<td>巩固练习</td>
<td>巩固练习</td>
<td>巩固练习</td>
<td>巩固练习</td>
</tr>
<tr>
<td colspan="9" style="text-align: center;">本实例CSS由网上搜集</td>
</tr>
</tbody>
</table>
<hr>
<form action="" id="change" style="margin-top: 1000px;">
<h3>更新课程表</h3>
<label for="table-name">表格标题:</label>
<input type="text" name="table_title" id="table-name" placeholder="1209作业课程表">
<br>
<label for="day1">更新日期:</label>
<input type="radio" name="day" id="day1" checked><label for="day1">星期一</label>
<input type="radio" name="day" id="day2"><label for="day2">星期二</label>
<input type="radio" name="day" id="day3"><label for="day3">星期三</label>
<input type="radio" name="day" id="day4"><label for="day4">星期四</label>
<input type="radio" name="day" id="day5"><label for="day5">星期五</label>
<input type="radio" name="day" id="day6"><label for="day6">星期六</label>
<input type="radio" name="day" id="day7"><label for="day7">星期天</label>
<br>
<label for="">更新课程:</label>
<select name="study" id="study" multiple size="2">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<br>
<label for="">更新内容:</label>
<div>
<input type="checkbox" name="connent[]" id="game" value="game"><label for="game">游戏</label>
<input type="checkbox" name="connent[]" id="chat" value="chat"><label for="chat">聊天</label>
<input type="checkbox" name="connent[]" id="video" value="video"><label for="video">视频</label>
</div>
<br>
<label for="">上传背景图片:</label>
<input type="hidden" name="MAX_FILE_SIZE" value="8192">
<input type="file" name="background" id="background">
<br>
<label for="email">管理员邮箱:</label>
<input type="email" name="email" id="email" required placeholder="请输入管理员邮箱!">
<br>
<label for="password">管理员密码:</label>
<input type="password" name="password" id="password" required placeholder="请输入管理员密码">
<br>
<label for="comment">本次修改备注:</label>
<textarea name="comment" id="comment" cols="30" rows="5"></textarea>
<br>
<button>确认修改</button>
</form>
<ul>
<li><a class="active" href="#">首页</a></li>
<li><a href="#table">查看课程表</a></li>
<li><a href="#change">修改课程表</a></li>
</ul>
</body>
</html>
作业地址
作业标题:1208作业(列表/表格与表单)