<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="demo.css" rel="stylesheet"/>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
button {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 15px;
}
.mycontainer {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* 清除浮动 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 响应式布局 layout - 在屏幕宽度小于 300px 时, 设置为上下堆叠元素 */
@media screen and (max-width: 300px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
table {
border-collapse: collapse;
border-spacing: 0;
}
td, th {
padding: 0;
}
.pure-table {
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
border: 1px solid #cbcbcb;
}
.pure-table caption {
color: #000;
font: italic 85%/1 arial, sans-serif;
padding: 1em 0;
text-align: center;
}
.pure-table td, .pure-table th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: .8em 1em;
}
.pure-table thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
.pure-table td {
background-color: transparent;
}
.pure-table-bordered td {
border-bottom: 1px solid #cbcbcb;
}
.pure-table-bordered tbody > tr:last-child > td {
border-bottom-width: 0;
}
/*按钮样式*/
.btn {
padding: 5px 10px;
height: 30px; /*设置按钮高度*/
color: white; /*字体颜色*/
background-color: dodgerblue; /*按钮背景颜色*/
border-radius: 3px; /*让按钮变得圆滑一点*/
font-family: '楷体'; /*字体设置为楷体*/
font-size: 17px; /*设置字体大小*/
text-align: center; /*字体居中*/
cursor: pointer; /*设置鼠标箭头手势*/
text-decoration: none; /*去除下划线*/
}
</style>
</head>
<body>
<h2>响应式表单</h2>
<p>响应式表带可以根据浏览器窗口的大小重新布局各个元素,我们可以通过重置浏览器窗口大小来查看效果:</p>
<div class="mycontainer" style="width: 600px;margin: 20px auto;">
<form action="#" method="post" style="">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<div class="col-25">
<label for="subject">Subject</label>
</div>
<div class="col-75">
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
</div>
</div>
<div class="row" style="text-align: center;">
<button type="submit" style="background-color: #45a049;">提交</button>
<button type="reset" style="background-color: #aaa;">重置</button>
</div>
</form>
</div>
<div style="height: 100px;"></div>
<table class="pure-table pure-table-bordered" width="100%">
<thead>
<tr>
<th>#</th>
<th>Make</th>
<th>Model</th>
<th>Year</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Honda</td>
<td>Accord</td>
<td>2009</td>
<td>
<a class="btn" href="#">删除</a>
<a class="btn" href="#">修改</a>
</td>
</tr>
<tr>
<td>2</td>
<td>Toyota</td>
<td>Camry</td>
<td>2012</td>
<td>
<a class="btn" href="#">删除</a>
<a class="btn" href="#">修改</a>
</td>
</tr>
<tr>
<td>3</td>
<td>Hyundai</td>
<td>Elantra</td>
<td>2010</td>
<td>
<a class="btn" href="#">删除</a>
<a class="btn" href="#">修改</a>
</td>
</tr>
</tbody>
</table>
<div style="height: 100px;"></div>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
基于ssm+mysql+jsp作业管理(在线学习)系统
共323个文件
gif:75个
jar:70个
jsp:58个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 9 下载量 76 浏览量
2023-01-09
11:10:27
上传
评论 7
收藏 80.6MB RAR 举报
温馨提示
系统主要功能: 适合选题:作业管理、在线学习,一共3个身份:管理员,老师和学生! ①管理员功能:登录后可以添加学生信息,管理所有学生信息,添加单个老师信息,管理所有老师信息,发布课程信息,管理所有课程,发布网站公告,管理网站公告信息! ②教师功能:上传课程视频信息,查询管理所有教学视频,上课课程文档课件信息,查询管理所有课件文档,查询编辑管理所有话题信息,按照课程发布作业信息,可以向某次作业中加入题目信息,也可以删除题目信息,每个题目带有分数值,老师可以修改个人信息。 ③学生功能:查询所有课程信息,在线课程视频信息查询,可以在线观看某个视频教学,查询和下载所有的课件文件,可以查询网站公告信息,查询老师布置的作业,进入作业题目列表做题,提交可以查看完成作业的分数,可以修改个人信息。 详见:https://blog.csdn.net/Timi2019/article/details/127926324
资源推荐
资源详情
资源评论
收起资源包目录
基于ssm+mysql+jsp作业管理(在线学习)系统 (323个子文件)
IndexController.class 10KB
FileUploadController.class 7KB
AdmininfoController.class 6KB
HttpClientUtil.class 5KB
NoticeinfoController.class 3KB
UserinfoController.class 3KB
SortinfoController.class 3KB
DatainfoController.class 3KB
HomeworkController.class 3KB
WorkinfoController.class 3KB
MsginfoController.class 3KB
GlobalResult.class 3KB
Datainfo.class 2KB
Userinfo.class 2KB
SimilarityRate.class 2KB
Admininfo.class 2KB
Homework.class 2KB
DelTagsUtil.class 2KB
Noticeinfo.class 2KB
Msginfo.class 2KB
Workinfo.class 2KB
Sortinfo.class 1KB
CommonUtils.class 1009B
CommonMapper.class 670B
NoticeinfoMapper.class 379B
AdmininfoMapper.class 376B
SortinfoMapper.class 373B
HomeworkMapper.class 373B
UserinfoMapper.class 373B
DatainfoMapper.class 373B
WorkinfoMapper.class 373B
MsginfoMapper.class 370B
layui.css 78KB
admin.css 21KB
admin.css 21KB
layer.css 15KB
layui.mobile.css 11KB
template.css 11KB
laydate.css 9KB
style.css 4KB
login.css 2KB
login.css 2KB
code.css 1KB
font.css 527B
iconfont.eot 40KB
59.gif 10KB
22.gif 10KB
24.gif 8KB
13.gif 7KB
16.gif 7KB
39.gif 6KB
64.gif 6KB
63.gif 6KB
50.gif 6KB
loading-0.gif 6KB
4.gif 6KB
1.gif 5KB
42.gif 5KB
71.gif 5KB
21.gif 5KB
20.gif 5KB
29.gif 5KB
70.gif 4KB
5.gif 4KB
17.gif 4KB
27.gif 4KB
9.gif 4KB
44.gif 4KB
11.gif 4KB
8.gif 4KB
3.gif 4KB
23.gif 4KB
34.gif 4KB
41.gif 4KB
38.gif 4KB
65.gif 3KB
32.gif 3KB
45.gif 3KB
7.gif 3KB
12.gif 3KB
26.gif 3KB
60.gif 3KB
2.gif 3KB
40.gif 3KB
25.gif 3KB
19.gif 3KB
66.gif 3KB
18.gif 3KB
46.gif 3KB
10.gif 3KB
28.gif 3KB
51.gif 3KB
57.gif 3KB
67.gif 3KB
0.gif 3KB
48.gif 3KB
43.gif 3KB
30.gif 2KB
61.gif 2KB
33.gif 2KB
共 323 条
- 1
- 2
- 3
- 4
五星资源
- 粉丝: 5726
- 资源: 1567
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页