一 * 首页页面设计
index.html
<!DOCTYPE html>
<html>
<!--引入日历插件先把my97DatePicker压缩包解压之后的所有文档存放到js文件夹中，在页面中引入js日历插件-->
<head>
<meta charset="utf-8">
<title>体温登记首页</title>
<link type='text/css' rel='stylesheet' href='css/index.css'/>
</head>
<body>
<div class = 'container'>
<h1 align = 'center'>首页</h1>
<div class = 'list'>
<a href = '#' >点击此处生成今日体温纪录</a>
</div>
<div class = 'date'>
日期*<input class="Wdate" type="text" onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd'})">
<button>查询</button>
</div>
</div>
<script language="javascript" type="text/javascript" src="js/My97DatePicker/WdatePicker.js"></script>
</body>
</html>
index.css
页面效果展示
二 * 体温登记页面
register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>体温登记页面</title>
<link type = 'text/css' rel = 'stylesheet' href= 'css/register.css'/>
</head>
<body>
<div id = 'container'>
<h1 align = 'center'>体温登记<span class = 'date'>2020-07-03</span></h1>
<div id = 'table'>
<h3 class = 'msg'>提示信息*</h3>
<ul>
<li class = 'green'>
JacksonYee
</li>
<li class = 'green'>
Flower
</li>
<li class = 'red'>
Lay_z
</li>
<li class = 'green'>
The_way
</li>
<li class = 'red'>
Tao
</li>
<li class = 'green'>
Crew
</li>
</ul>
</div>
</div>
</body>
</html>
register.css
/*设置缝隙为零*/
*{
margin:0;
padding:0;
}
h1 span {
color:green;
}
#table {
width:800px;
margin:20px auto;
}
ul li{
list-style:none;/*去掉列表符号*/
width:100px;
height:50px;
border:1px solid black;
text-align:center; /*文本居中*/
float:left;
padding:10px; /*四周均可被撑开*/
}
.green {
background-color: green;
color: whitesmoke;
}
.red {
background-color:red;
color:whitesmoke;
}
体温登记页面展示三 * 体温信息修改页面
message.html
体温信息修改页面展示
需要准备的日历插件
