JavaWeb——CSS样式表作业
一、角色管理界面
代码实现：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.bg{
background-color: gainsboro;
}
style>
head>
<body>
<div style="background-color: gainsboro;width: 100%;">
<table>
<tr>
<td>挂号管理td>
<td><span style="background-color: white;">角色管理span>td>
<td>用户管理td>
tr>
table>
div>
<div>
<form>
<table border="1" width="100%">
<tr style="width: 100%;">
<td>
角色名称：<input type="text" /><img src="../img/img/QQ截图20200909181703.png" />
td>
tr>
table>
form>
div>
<div>
<form action="login.jsp" method="post" >
<table border="1" width="100%">
<tr style="text-align: left;" class="bg">
<th><input type="checkbox" />th>
<th>角色名称th>
<th>状态th>
<th>操作th>
tr>
<tr>
<td><input type="checkbox" />td>
<td>管理员td>
<td>启用td>
<td>
<span style="color: deepskyblue;">编辑 删除span>
td>
tr>
<tr class="bg">
<td colspan="2">
<a href="rolemanagenent.html">
a>
<input type="image" src="../img/img/QQ浏览器截图20200915101716.png"/>
td>
<td colspan="2" style="text-align: right;">
10122条记录1/507ye <span style="color: deepskyblue;">下一页
<span style="color: red;">1span> 2 3 4 5 下5页
最后一页 span>
td>
tr>
table>
form>
div>
div>
body>
html>
效果截图：
二、角色管理子界面
代码实现：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.bg{
background-color: gainsboro;
width: 100px;
}
style>
head>
<body>
<div style="background-color: gainsboro;width: 100%;">
<table>
<tr>
<td>挂号管理td>
<td><span style="background-color: white;">用户管理span>td>
tr>
table>
div>
<div>
<form action="login.jsp" method="post" >
<table border="1" width="100%">
<tr>
<td class="bg">角色名称td>
<td>
<input type="text" />
td>
tr>
<tr>
<td class="bg">状态td>
<td>
<input type="radio" checked="checked"/>启用
<input type="radio" />禁用
td>
tr>
<tr>
<td class="bg" rowspan="12" width="100%">权限td>
<td rowspan="12">
<input type="checkbox" />挂号信息管理<br />
<input type="checkbox" />门诊医生管理<br />
<input type="checkbox" />药品管理<br />
<input type="checkbox" />住院办理<br />
<input type="checkbox" />收费项目登记<br />
<input type="checkbox" />在院发药<br />
<input type="checkbox" />住院结算<br />
<input type="checkbox" />月营业额统计<br />
<input type="checkbox" />年营业额统计<br />
<input type="checkbox" />用户管理<br />
<input type="checkbox" />角色管理<br />
<input type="checkbox" />资源管理
td>
tr>
<tr>
tr>
<tr>
tr>
<tr>
tr>
<tr>
tr>
<tr>
tr>
<tr>
tr>
<tr>
tr>
<tr>
tr>
<tr>
tr>
<tr>
tr>
<tr>
tr>
<tr>
<td class="bg"> td>
<td>
<img src="../img/img/QQ截图20200909180455.png"/>
<img src="../img/img/QQ截图20200909180509.png"/>
td>
tr>
table>
form>
div>
div>
body>
html>
效果截图：
三、用户管理界面
代码实现：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.bg{
background-color: gainsboro;
}
style>
head>
<body>
<div style="background-color: gainsboro;width: 100%;">
<table>
<tr>
<td>挂号管理td>
<td><span style="background-color: white;">用户管理span>td>
<td>角色管理td>
tr>
table>
div>
<div>
<form>
<table border="1" width="100%">
<tr style="width: 100%;">
<td>
用户名称：<input type="text" /><img src="../img/img/QQ截图20200909181703.png" />
td>
tr>
table>
form>
div>
<div>
<form action="login.jsp" method="post" >
<table border="1" width="100%">
<tr style="text-align: left;" class="bg">
<th><input type="checkbox" />th>
<th>用户账户th>
<th>真实姓名th>
<th>角色th>
<th>操作th>
tr>
<tr>
<td><input type="checkbox" />td>
<td>admintd>
<td>管理员td>
<td>管理员td>
<td>
<span style="color: deepskyblue;">编辑 删除span>
td>
tr>
<tr class="bg">
<td colspan="2">
<a href="usermanagement.html">
a>
<input type="image" src="../img/img/QQ浏览器截图20200915101716.png"/>
td>
<td colspan="3" style="text-align: right;">
10122条记录1/507ye <span style="color: deepskyblue;">下一页
<span style="color: red;">1span> 2 3 4 5 下5页
最后一页 span>
td>
tr>
table>
form>
div>
div>
body>
html>
效果截图：
四、用户系统子界面
代码实现：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.bg{
background-color: gainsboro;
width: 100px;
}
style>
head>
<body>
<div style="background-color: gainsboro;width: 100%;">
<table>
<tr>
<td>挂号管理td>
<td><span style="background-color: white;">用户管理span>td>
tr>
table>
div>
<div>
<form action="login.jsp" method="post" >
<table border="1" width="100%">
<tr>
<td class="bg">登录名td>
<td>
<input type="text" />
td>
tr>
<tr>
<td class="bg">密码td>
<td>
<input type="text"/>
td>
tr>
<tr>
<td class="bg">真实姓名td>
<td colspan="3">
<input type="text" />
td>
tr>
<tr>
<td class="bg">邮箱td>
<td>
<input type="text"/>
td>
tr>
<tr>
<td class="bg">状态td>
<td>
<input type="radio" checked="checked"/>启用
<input type="radio" />禁用
td>
tr>
<tr>
<td class="bg">角色td>
<td>
<select name="user" size="1">
<option value="0" selected="selected">--请选择--option>
<option value="1">管理员option>
<option value="2">用户option>
select>
td>
tr>
<tr align="center">
<td class="bg"> td>
<td>
<img src="../img/img/QQ浏览器截图20200915101733.png"/>
<img src="../img/img/QQ截图20200909180509.png"/>
td>
tr>
table>
form>
div>
div>
body>
html>
效果截图：
五、管理员列表
代码实现：
<html>
<head>
<meta charset="UTF-8">
<title>title>
<style>
.bg{
background-color: gainsboro;
}
style>
head>
<body>
<div style="background-color: gainsboro;width: 100%;">
<table>
<tr>
<td>我的界面td>
<td><span style="background-color: white;">管理员列表span>td>
tr>
table>
div>
<div>
<form>
<table border="1" width="100%">
<tr style="width: 100%;">
<td>
首页 >管理员管理 >管理员列表
td>
<td style="text-align: right;">
<img src="../img/img/QQ浏览器截图20200915101831.png" />
td>
tr>
table>
<table border="1" width="100%">
<tr style="width: 100%;text-align: center;">
<td>
日期范围：<input type="text" size="5" style="line-height: 25px;"/>-<input type="text" size="5" style="line-height: 25px;"/>
<input type="text" size="10" value="输入管理员名称" style="line-height: 25px;"/><img src="../img/img/QQ浏览器截图20200915101819.png" style="line-height: 55px;"/>
td>
tr>
table>
form>
div>
<div>
<form action="login.jsp" method="post" >
<table border="1" width="100%">
<tr style="width: 100%;">
<td>
<img src="../img/img/QQ浏览器截图20200915101858.png" />
<img src="../img/img/QQ浏览器截图20200915101909.png" />
td>
<td colspan="8" style="text-align: right;">共有数据54条td>
tr>
<tr style="text-align: left;">
<th colspan="9">员工列表th>
tr>
<tr style="text-align: left;" class="bg">
<th><input type="checkbox" />th>
<th>IDth>
<th>登录名th>
<th>手机th>
<th>邮箱th>
<th>角色th>
<th>加入时间th>
<th>是否已启用th>
<th>操作th>
tr>
<tr>
<td><input type="checkbox" />td>
<td>1td>
<td>admintd>
<td>13000000000td>
<td>admin@mailcomtd>
<td>超级管理员td>
<td>2014-6-11 11：11：42td>
<td>已启用td>
<td>
<img src="../img/img/QQ截图20200915141236.png" />
td>
tr>
<tr>
<td><input type="checkbox" />td>
<td>2td>
<td>zhangsantd>
<td>13000000000td>
<td>admin@mailcomtd>
<td>栏目编辑td>
<td>2014-6-11 11：11：42td>
<td>已停用td>
<td>
<img src="../img/img/QQ截图20200915141245.png" />
td>
tr>
table>
form>
div>
div>
body>
html>
效果截图：
以上为本次CSS样式表相关的作业，如有错误请大家指正。