Submit the registration form (h5)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>表单类型</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
form {
max-width: 400px;
width: 100%;
margin: 32px auto 0;
font-size: 16px;
}
label {
display: block;
margin: 10px 0;
}
input {
width: 90%;
height: 25px;
margin-top: 2px;
display: block;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>预约挂号单</legend>
<label for="">
姓名: <input type="name" name="name" required>
</label>
<label for="">
身份证号: <input type="text" name='number' pattern="1\d{10}" required>
</label>
<label for="">
年龄: <input type="number" name="number" required>
</label>
<label for="">
手机号: <input type="tel" name="tel" required>
</label>
<label for="">选择科室
<select>
<option>内科</option>
<option>外科</option>
<option>骨科</option>
<option>皮肤科</option>
<option selected="">牙医</option>
</select>
</label>
<label for="">
预约日期: <input type="date" name="date" required>
</label>
<label for="">
预约时间: <input type="time" name="time" required>
</label>
<input type="submit">
</fieldset>
</form>
</body>
</html>
Navigation Bar
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.nav{
width: 960px;
height: 50px;
border: 1px solid red;
margin: 100px auto;
}
.nav ul{
/*去掉小圆点*/
list-style: none;
}
.nav ul li{
float: left;
width: 120px;
height: 50px;
/*让内容水平居中*/
text-align: center;
/*让行高等于nav的高度，就可以保证内容垂直居中*/
line-height: 50px;
}
.nav ul li a{
display: block;
width: 120px;
height: 50px;
}
/*两个伪类的属性，可以用逗号隔开*/
.nav ul li a:link , .nav ul li a:visited{
text-decoration: none;
background-color: purple;
color:white;
}
.nav ul li a:hover{
background-color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">预约与挂号</a></li>
<li><a href="#">电子病理档案</a></li>
<li><a href="#">远程医疗诊断</a></li>
<li><a href="#">远程医疗干预</a></li>
<li><a href="#">医务与护务</a></li>
<li><a href="#">资产与资源</a></li>
<li><a href="#">医疗咨询</a></li>
</ul>
</div>
</body>
</html>
