首页弹出式菜单中“专家介绍”的子菜单为各个科室，点击之后则显示对应科室的专家列表。
提示：
- 子菜单的链接地址以查询字符串的形式（?did=0）将科室类型数据进行提交；
- 制作Servlet对该参数进行判断，然后输出相应的专家信息
之前的代码中只有一级导航栏，由于今天需要二级导航栏，所以我新增了二级导航栏的页面的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function startTime() {
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',1000)
}
function checkTime(i) {
if (i<10) {
i="0"+i
}
return i
}
</script>
<title>附属第一医院</title>
<link rel="stylesheet" type="text/css" href="new.css"> <!-- 这一行必不可少，是继承.css文件里面的属性 -->
<body bgcolor="lightblue"></body>
</head>
<body onload="startTime()">
<div class="header"> <!-- 标志logo栏 -->
<img src="image/重庆医科大学附属第一医院.jpg" alt="CQMU1logo" width="500"/>
<!-- alt是当图片不显示的时候,预备的可替换图片的文本 -->
<div id="svid">
<form action="">
<input id="input" type="text" placeholder="请输入要搜索的内容">
<input id="sbutton" name="搜索" type="image" src="image/搜索.jpg">
</form>
</div>
<div id="language">
<input id="English" name="英文版" type="image" src="image/英文版.jpg">
</div>
</div>
<div class="top">
<div id="title">
<span id="txt"></span>
欢迎使用HIS系统（web版）
<img src="image/HIS.jpg" alt="HIS" width="52"/>
</div>
<div id="denglu">
<form action="denglu.html">
<input id="sbutton2" type="submit" value="[登录]">
</form>
</div>
</div>
<div class="clearfix">
<div class="colum sidemenu">
<ul>
<li><a href="default.html">首 页</a></li>
<li><a href="yygh.html">预约挂号</a></li>
<li><a href="" class="active">专家介绍</a></li>
<div class="erji">
<ul>
<li><a href="/cc_2020223673/Default?did=0">骨科</a></li>
<li><a href="/cc_2020223673/Default?did=1">妇产科</a></li>
<li><a href="/cc_2020223673/Default?did=2">神经内科</a></li>
<li><a href="/cc_2020223673/Default?did=3">泌尿外科</a></li>
</ul>
</div>
<li><a href="czxx.html">出诊信息</a></li>
<li><a href="jyjcxz.html">检验检查须知</a></li>
<li><a href="cjwt.html">常见问题</a></li>
<li><a href="yydh.html">医院导航</a></li>
</ul>
</div>
<div class="colum content" style="margin-left:15%;padding:1px 16px;height:397px;">
<p style="text-indent:2em"> HIS是Hospital Information System 的缩写即医院信息系统美国该领域的著名教授Morris.Collen曾作如下定义:利用电子计算机和通讯设备，为医院所属各部门提供对病人诊疗信息和行政管理信息的收集、存储、处理、提取及数据交换的能力，并满足所有授权用户的功能需求。</p>
<p style="text-indent:2em"> HIS的主要功能按照数据流量、流向及处理过程分为临床诊疗、药品管理、经济管理、综合管理与统计分析、外部接口五部分。</p>
<p style="text-indent:2em"> HIS提高了医院的现代管理水平、提高了工作效率、优化了医疗流程、促进了医教研质量的提高、增加了医院的经济效益、有利于医改的落实、在突发公共卫生事件中发挥了特有的作用，同时提升了医院文化。</p>
<p style="text-indent:2em"> HIS的高级应用包括：医学图像存档与通信系统（picture archiving and communication system ，PACS）,病人床边信息系统，电子病历系统，科研支持系统，教学支持系统，Internet 医学情报系统，远程诊断与教学系统等。
</div>
<div class="yunzhuan" style="margin-left:65%;">
<img src="./image/工作运转图像.jpg" width="400px" />
</div>
</div>
<div class="footer">
<p>地址：某市某区某路1号 电话：*******</p>
<p>附属第一医院版权所有 *ICP备*****号</p>
</div>
</body>
</html>接下来这个是我的css文件，由于我把之前的css写在了一起，所以会有点多：
@charset "UTF-8";
*{box-sizing:border-box;}
body {
margin:0; /*让结构更加紧凑*/
width:1277px;
}
/*header部分*/
.header {
background-image:url("/images/重庆医科大学附属第一医院.jpg");
background-attachment:fixed;
background-repeat:no-repeat;
/*background-repeat 属性定义了图像的平铺模式.
从原图像开始重复，原图像由 background-image 定义，并根据 background-position 的值放置
背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性，图像会被放置在元素的左上角*/
text-align:left; /*text-align规定元素中的文本的水平对齐方式*/
height:74px; /*设置段落的高度和宽度height，width*/
overflow: hidden;
}
#svid {
width:500px;
height:30px;
position:absolute;
top:19px;
left:650px;
}
#language {
width:500px;
height:30px;
position:absolute;
top:19px;
left:1100px;
}
#English {wdith:30px;
height:40px;
vertical-align:middle;
right:30px
}
#sbutton {
height:40px;
left:700px;
vertical-align:middle;
}
#input {
height:40px;
width:250px;
verhical-align:middle;
}
/*top登录模块*/
.top {
font-size:20px;
height:70px;
overflow: hidden;
width:100%
}
#title {
line-heilin:30px;
background-color:#777;
color:white;
height:50px;
width:950px;
float:left;
padding:0px;
text-align:center;
font-size:40px;
}
#denglu {
background-color:white;
color:black;
width:327px;
float:left;
padding:5px;
text-align:center;
}
#admin {
background-color:white;
color:black;
width:327px;
float:left;
padding:3px;
text-align:center;
font-size:13px;
}
#sbutton2 {
width:200px;
height:40px;
background-color:white;
font-size:25px;
border:none;
}
.cleafix { /*双冒号消除对后面文字的影响*/
content: "";
clear: both;
display: table;
height:935px;
width:70%;
overflow:hidden;
}
.content {
width:45%;
word-wrap:break-word;
word-break:break-all;
}
.clearfix .sidemenu {
width:5%;
}
/*导航栏*/
.sidemenu ul {
list-style-type: none;
margin: -15px;
padding: 0px;
width: 500%;
background-color: #f1f1f1;
height: 60%;
position:relative;
}
.sidemenu li {
display: inline-block;
list-style: none;
width: 170px;
height: 40px;
line-height: 30px;
padding: 0px;
text-align: center;
transition: background-color 0.5s linear;
}
.sidemenu li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
transition: color 0.5s ease-in-out;
}
.sidemenu li a.active {
background-color: #4CAF50;
color: white;
}
.sidemenu li a:hover:not(.active) {
background-color: #555;
color: white;
}
.erji {
list-style-type: none;
position: absolute;
margin-left: 186px;
margin-top:-37px;
padding: 0px;
width: 34px;
background-color: #f1f1f1;
opacity: 0px;
display: none;
transition: 0.3s;
transform: translateY(0px); /*旋转*/
Stransition: transform 0.5s linear,opacity 0.5s ease-in-out; /*允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值*/
}
.sidemenu ul:hover .erji {
display: block;
opacity: 1;
transform: translateY(10px);
}
.secondul li{
display: block;
height: 20px;
line-height: 20px;
width: 89%;
}
.erji li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
text-align:center;
}
.erji li a.active {
background-color: #4CAF50;
color: white;
}
.erji li a:hover:not(.active) {
background-color: #555;
color: white;
}
.erji::before{
content: "";
border-color: transparent transparent #c7e1ea transparent;
border-width: 8px;
position: absolute;
bottom: 100%;
left: 20%;
border-style: solid;
}
.colum {
float: left;
padding: 15px;
}
.footer {
background-color: #444;
color: white;
padding: 10px;
text-align:center;
height:90px;
margin-top:auto; /*固定在底部*/
width:100%;
left:0px;
overflow: hidden;
}
/*登录页面*/
#login-box {
text-align:center;
font-size:20px;
}
.double {
border-style:double;
width:600px;
height:395px;
margin-left:30%;
border-color:red;
}
/*胃肠外科*/
#stomach {
line-heilin:25px;
background-color:blue;
color:white;
height:40px;
width:1090px;
float:left;
padding:0px;
text-align:center;
font-size:30px;
margin-top:-20%;
margin-left:15%;
}
.wlh {
margin-left: 23%;
margin-top:-16%;
border: 1px solid #ccc;
float: left;
width: 180px;
text-align:center;
}
.wlh img {
width: 100%;
height: 200px;
}
.zs {
margin-top:-16%;
margin-left: 3%;
border: 1px solid #ccc;
float: left;
width: 180px;
text-align:center;
}
.zs img {
width: 100%;
height: 200px;
}
.ls {
margin-left: 3%;
margin-top:-16%;
border: 1px solid #ccc;
float: left;
width: 180px;
text-align:center;
}
.ls img {
width: 100%;
height: 200px;
}
.ww {
margin-left: 3%;
margin-top:-16%;
border: 1px solid #ccc;
float: left;
width: 180px;
text-align:center;
}
.ww img {
width: 100%;
height: 200px;
}
/*神经内科*/
#nerves {
line-heilin:25px;
background-color:blue;
color:white;
height:40px;
width:1090px;
float:left;
padding:0px;
text-align:center;
font-size:30px;
margin-left:15%;
}
.ay {
margin-left: 23%;
border: 1px solid #ccc;
float: left;
width: 180px;
text-align:center;
}
.ay img {
width: 100%;
height: 200px;
}
.dwj {
margin-left: 3%;
border: 1px solid #ccc;
float: left;
width: 180px;
text-align:center;
}
.dwj img {
width: 100%;
height: 200px;
}
.zyy {
margin-left: 3%;
border: 1px solid #ccc;
float: left;
width: 180px;
text-align:center;
}
.zyy img {
width: 100%;
height: 200px;
}
.zh {
margin-left: 3%;
border: 1px solid #ccc;
float: left;
width: 180px;
text-align:center;
}
.zh img {
width: 100%;
height: 200px;
}
/*个人主页*/
.wlhys {
font-size:15px;
text-align:center;
margin-top:-2%;
}
#sbutton3 {
background-color:lightblue;
font-size:5px;
float:right;
border:none;
}
.wlhys img {
width: 120px;
height: 200px;
}
.wlhys p {
margin-left:22%;
width:900px;
text-align:left;
}这就是我的二级导航栏的结果了：
接下来要实现的就是点击各个科室，然后就会跳转到相应的界面，这一过程我是通过servlet来实现的，叫做ShowIdServelt.java：
package edu.servlet.request;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class ShowIdServlet
*/
@WebServlet("/ShowIdServlet")
public class ShowIdServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ShowIdServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("UTF-8"); //中文乱码的处理
response.setContentType("text/html;charset=UTF-8");
PrintWriter out=response.getWriter();
String[] dep= {"骨科","妇产科","神经内科","泌尿外科"};
String[][] images= {{"人像1.jpg","人像2.jpg","人像3.jpg","人像4.jpg","人像1.jpg"},
{"sy1.jpg","sy2.jpg","sy3.jpg"},
{"sy4.jpg","sy3.jpg","sy2.jpg","人像1.jpg","人像2.jpg","人像3.jpg","人像1.jpg"},
{"sy1.jpg","sy3.jpg","sy2.jpg"}};
String[][] names= {{"wq","vvq","daidai","ay","wlh"},
{"邓某","敖某","王某"},
{"铁柱","铁蛋","冷少","柱柱","蛋蛋","呆呆","嗷嗷","槑"},
{"张三","李四","王五"}};
int did=Integer.parseInt(request.getParameter("did"));
int len=images[did].length;
int rows=(len%4==0)?len/4:len/4+1;
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<meta charset=\'UTF-8\'>");
out.println("<title>科室专家</title>");
out.println("<link rel=\'stylesheet\' type=\'text/css\' href=\'erjidaohanglan.css\'>");
out.println("<body bgcolor=\"lightblue\"></body>");
out.println("</head>");
out.println("<body>");
out.println("<div class=\'content\'>");
out.println("<div class=\'ti\'>"+dep[did]+"</div>");
for (int i=0;i<rows;i++) {
out.println("<div class=\'clearfix\'>");
for (int j=0;j<=3;j++) {
int c=i*4+j;
if (c<len-1) {
out.println("<div class=\'img-container\'>");
out.println("<a href=\"#\"><img src=\"image/"+images[did][c]+"\"></a>");
out.println("<p><a href=\'#\'>"+names[did][c]+"</a></p>");
out.println("</div>");
} else {
break;
}
}
out.println("</div");
out.println("<hr>");
}
out.println("</body>");
out.println("<html>");
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
光通过点击来跳转是不行的，还要通过在web.xml中配置才可以：
<servlet>
<servlet-name>Default</servlet-name>
<servlet-class>edu.servlet.request.ShowIdServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>Default</servlet-name>
<url-pattern>/Default</url-pattern>
</servlet-mapping>
上面的Default与前面添加二级导航栏必须 保持一致，否则会出现404资源不可用的报错：
然后点击各个科室，里面的页面是这样的：
各个科室的专家的css排版不是之前的了，所以我们需要写入新的css文件，我命的名是erjidaohanglan.css：
@charset "UTF-8";
* {
box-sizing: border-box;
}
body {
text-align:center;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.content .ti {
width:100%;
text-align:center;
font-size:25px;
color:white;
background-color: blue;
padding:10px;}
.content img {
width:160px;
height:180px;}
.img-container {
text-align: center;
float: left;
width: 25%;
padding: 5px;}
在ShowIdServlet.java中有用到：
最后贴上我的项目构架：
扫一扫
3010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
