老师帮忙看看
来源：5-12 项目作业
直鹢
2019-05-03 19:01:55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/ui.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<!-- top区域 -->
<div class="top">
<div class="wrap">
<p class="call">010-114/116114电话预约</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台 请
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">帮助中心</a>
</p>
</div>
</div>
<!-- header区域 -->
<div class="header">
<div class="wrap clearfix">
<a href="index.html" class="logo"><img src="img/logo.png"></a>
<div class="search ui-search">
<div class="ui-search-selected">医院</div>
<div class="ui-search-select-list">
<a href="#1">科室</a>
<a href="#1">疾病</a>
<a href="#1">医院</a>
</div>
<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
<a href="#" class="ui-search-submit"> </a>
</div>
</div>
</div>
<!-- nav区域 -->
<div class="nav">
<div class="wrap">
<a href="" class="link">首页</a>
<a href="" class="link">按医院挂号</a>
<a href="" class="link">按科室挂号</a>
<a href="" class="link">按疾病挂号</a>
<a href="" class="link">最新通告</a>
<a href="" class="link right">社会知名医院</a>
</div>
</div>
<!-- 医院简介区域 -->
<div class="company">
<div class="wrap">
<div class='company-top'>北京协和医院<a href="javascript:;">关注医院</a>
<div class='company-top-right'>
<span>等级:</span>
<span>三级甲等 </span>
<span> 区域:</span>
<span>东城区 </span>
<span> 分类:</span>
<span>中国医科院所属医院 </span>
</div>
</div>
<div class="company-main">
<div class='company-text'>
<div>[东院]北京市东城区帅府园一号[西园]北京市西城区大木仓胡同41号</div>
<div>httdiv：//www.divumch.cn/</div>
<div>东院咨询台：010-69155564；西园咨询台：010-69158010</div>
<div>东院：106,108,110,111,116,684,685到东单路口北；41,104快，814到东单路</div>
<div>口南；1,52,728,802到西单路口西；20,25,37,39，到东单路口东；</div>
<div>103,104,420,803到新东安市场；地铁1、5号线到东单。西院：68到薛才胡同东</div>
<div>口；更多乘车路线详见须知</div>
</div>
<div class='company-img'><img src="../img/map-1.png" alt=""></div>
</div>
</div>
</div>
<!-- 预约栏html -->
<div class="reserve" >
<div class="wrap">
<div class='reserve-top'>
<a href="javascript:;" class='reserve-top-item focus'>预约挂号</a>
<a href="javascript:;" class='reserve-top-item'>医院介绍</a>
<a href="javascript:;" class='reserve-top-item'>预约须知</a>
<a href="javascript:;" class='reserve-top-item'>停诊信息</a>
<a href="javascript:;" class='reserve-top-item'>查询取消</a>
</div>
<div class='reserve-content'>
<div class='reserve-content-table'>
<div class='reserve-content-tabletop'>
开放预约科室
</div>
<div class='reserve-content-table-line'>
<div class='reserve-content-department'>2301</div>
<div class='reserve-content-detail'>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">特殊门诊科</a>
</div>
</div>
<div class='reserve-content-table-line'>
<div class='reserve-content-department'>专科</div>
<div class='reserve-content-detail'>
<a href="javascript:;">多发性硬化专科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">多发性硬化专科</a>
<a href="javascript:;">多发性硬化专科</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">多发性硬化专科</a>
</div>
</div>
<div class='reserve-content-table-line'>
<div class='reserve-content-department'>内科</div>
<div class='reserve-content-detail'>
<a href="javascript:;">肿瘤内科门诊</a>
<a href="javascript:;">特需血液内科</a>
<a href="javascript:;">特需血液内科</a>
<a href="javascript:;">肿瘤内科门诊</a>
<a href="javascript:;">肿瘤内科门诊</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">特需血液内科</a>
<a href="javascript:;">特需血液内科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">肿瘤内科门诊</a>
</div>
</div>
<div class='reserve-content-table-line'>
<div class='reserve-content-department'>内科</div>
<div class='reserve-content-detail'>
<a href="javascript:;">肿瘤内科门诊</a>
<a href="javascript:;">特需血液内科</a>
<a href="javascript:;">特需血液内科</a>
<a href="javascript:;">肿瘤内科门诊</a>
<a href="javascript:;">肿瘤内科门诊</a>
<a href="javascript:;">特殊门诊科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">特需血液内科</a>
<a href="javascript:;">特需血液内科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">门诊麻醉科</a>
<a href="javascript:;">肿瘤内科门诊</a>
</div>
</div>
</div>
<div class='reserve-content-side'>
<div class='reserve-content-side-top'>
预约规则<span>（更新时间每日8:30更新）</span>
</div>
<div class='reserve-content-side-text'>
<div>预约周期：<div class="reserve-content-side-text-sizi">7天</div></div>
<div>放号时间：<div class="reserve-content-side-text-sizi">8:30</div></div>
<div>停挂时间:<div class="reserve-content-side-text-sizi">下午14:00停止次日预约挂号（
周五14:00后停挂至下周一）</div></div>
<div>退号时间:<div class="reserve-content-side-text-sizi">就诊前一工作日14:00前取消</div></div>
<div>特殊规则:<div class="reserve-content-side-text-sizi"><br/>
① 取号地点不同：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。东园区预约取号地点：东园区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。<br/><br/><br/></div></div>
</div>
</div>
</div>
<div class='reserve-content hospital' style="display: none">
<p>北京协和医院是集医疗、教学、科研于一体的大型三级甲等综合医院，是国家卫生计生委指定的全国疑难重症诊治指导中心，也是最早承担高干保健和外宾医疗任务的医院之一，以学科齐全、技术力量雄厚、特色专科突出、多学科综合优势强大享誉海内外。在2010、2011、2012、2013、2014年复旦大学医院管理研究所公布的“中国最佳医院排行榜”中连续五年名列榜首。</p>
<p>医院建成于1921年，由洛克菲勒基金会创办。建院之初，就志在“建成亚洲最好的医学中心”。90余年来，医院形成了“严谨、求精、勤奋、奉献”的协和精神和兼容并蓄的特色文化风格，创立了“三基”、“三严”的现代医学教育理念，形成了以“教授、病案、图书馆”著称的协和“三宝”，培养造就了张孝骞、林巧稚等一代医学大师和多位中国现代医学的领军人物，并向全国输送了大批的医学管理人才，创建了当今知名的10余家大型综合及专科医院。2011年在总结90年发展经验的基础上，创新性提出了“待病人如亲人，提高病人满意度；待同事如家人，提高员工幸福感”新办院理念。</p>
<p>目前，医院共有2个院区、总建筑面积53万平方米，在职职工4000余名、两院院士5人、临床和医技科室53个、国家级重点学科20个、国家临床重点专科29个、博士点16个、硕士点29个、国家级继续医学教育基地6个、二级学科住院医师培养基地18个、三级学科专科医师培养基地15个。开放住院床位2000余张，单日最高门诊量约1.5万人次、年出院病人约8万余人次。被评为“全国文明单位”、“全国创先争优先进基层党组织”、“全国卫生系统先进集体”、“首都卫生系统文明单位”、“最受欢迎三甲医院”，荣获全国五一劳动奖章。同时，医院还承担着支援老少边穷地区、国家重要活动和突发事件主力医疗队的重任，在2008年北京奥运工作中荣获“特别贡献奖”。</p>
<p>90多年来，协和人以执着的医志、高尚的医德、精湛的医术和严谨的学风书写了辉煌的历史，今天的协和人正为打造“国际知名、国内一流”医院的目标而继续努力。</p>
</div>
<div class='reserve-content hospital' style="display: none">
<h3>北京协和医院预约挂号须知</h3>
<h6><br>
<br>
<br>
电话预约挂号：010-114（24小时）<br>
网络预约挂号：http://www.bjguahao.gov.cn</h6>
<p>根据卫生部8月5日通知和卫生局8月20日工作部署，北京协和医院已完成电话、网络预约挂号的流程建设，现将预约挂号、取号有关事项公布如下，请您认真阅读预约须知：</p>
<b>一、预约时间范围：</b><br>
1、您可预约7天内（试点）日间的副教授、主治医师和住院医师等号源。节假日不安排预约号（含周六、周日）。<br>
2、每天早8:30分开始放号;下午14:00停止次日预约挂号。<br>
3、周五14:00停挂至下周一。<br>
<br>
<b>二、预约实名制：</b><br>
统一平台电话预约和网上预约挂号均采取实名制注册预约，请您如实提供就诊人员的真实姓名、有效证件号 （身份证、军官证、护照）、性别、电话、手机号码、病案号或<br> 协和就诊卡条形码上的ID号等有效基本信息。<br>
<br>
<b>三、预约取号：</b><br>
1、预约成功后，请患者于就诊当日携带有效证件、预约识别码及协和医院就诊卡到医院挂号窗口验证预约信息（核对与预约登记实名信息一致的本人有效证件和预约识别码）<br>和取号，如验证不符则医院不能提供相应的诊疗服务。如果没有协和医院就诊卡者，请先办好就诊卡后再取号。<br>
2、取号时间：上午就诊患者，就诊当日早9：00以前取号。下午就诊患者，就诊当日下午12:00-13:30之间取号。过时未取号者，预约作废。<br>
3、取号地点：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取<br>号。<br>
<b>四、医生停诊：</b><br>
如遇特殊情况医生停诊，给您造成的不便敬请谅解。医生临时停诊，工作人员将会用电话方式及时通知您， 请配合更改就诊日期或更换其他医生，请您保持电话畅通。<br>
<br>
<b>五、取消预约：</b><br>
挂出的预约号如办理退号，至少在就诊前一工作日14:00前通过网站或者114电话凭预约识别码进行取消。
<br>
<b>六、爽约处理：</b><br>
1、如预约成功后患者未能按时就诊且不办理取消预约号视为爽约。<br>
2、一年内（自然年）无故爽约累计达到3次的爽约用户将自动进入系统爽约名单，此后3个月内将取消其预约挂号资格；一年内（自然年）累计爽约6次，取消6个月的预约挂号资格。
<br>
<b>七、其它注意事项：</b><br>
1、协和东院、西院都可以预约。<br>
2、国际医疗部门诊、卫干门诊不对外预约。<br>
<br>
<b>交通指南：</b><br>
东院乘车路线：<br>
106,108,110,111，116,684,685到东单路口北； 41,104快，814到东单路口南； 1,52，728,802到东单路口西； 10,20,25,37，39,到东单路口东； 103,104,420，803到新东安市场；地铁1号线或5号线到东单站，A或B出口向北。
西院乘车路线：<br>
68到辟才胡同东口； 22,46,102，105,109，603，604,626，690，808，826到西单商场； 1,10,37,52,70，728,802到西单路口东；地铁1号线或4号线到西单站，F1或G出口<br>
向北。
</p>
</div>
<div class='reserve-content hospital' style="display: none">
<h2>停诊信息</h2>
<table class="reserve-content-tables">
<tr>
<td>日期</td>
<td>星期</td>
<td>时段</td>
<td>科室</td>
<td>特长</td>
<td>职称</td>
<td>可挂号数</td>
<td>剩余号数</td>
<td>替换方式</td>
</tr>
<tr>
<td>2019-05-06</td>
<td>1</td>
<td></td>
<td>心外科门诊</td>
<td></td>
<td>副教授</td>
<td>3</td>
<td>3</td>
<td>不可替换</td>
</tr>
<tr>
<td>2019-05-06</td>
<td>1</td>
<td></td>
<td>心外科门诊</td>
<td></td>
<td>副教授</td>
<td>3</td>
<td>3</td>
<td>不可替换</td>
</tr>
</table>
</div>
<div class='reserve-content find' style="display: none">
<div class="find">
<div class="find-input">
预约识别码：<input type="text"><button>查询订单</button>
</div>
</div>
</div>
</div>
</div>
<!-- foot -->
<div class="footer">
Copyright @ 2017慕课网版权所有
</div>
<script type="text/javascript" src="js/ui.js"></script>
</body>
</html>
a{
text-decoration: none;
}
select,input{
border: none;
outline: none;
}
/* 顶部样式*/
.top{
line-height: 30px;
font-size: 13px;
color: #868686;
}
.top .call{
float: left;
padding-left: 20px;
background: url(../img/icon-call.png) no-repeat center left;
}
.top .welcome{
float: right;
}
.top a{
color: #2da5e1;
padding-left: 10px;
}
/* header样式*/
.header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search{
width: 326px;
height: 38px;
position: absolute;
right: 0px;
top: 29px;
}
/* nav样式*/
.nav .link{
display: inline-block;
float: left;
padding-left: 30px;
line-height: 36px;
color: #fff;
font-size: 16px;
min-width: 80px;
text-align: center;
}
.nav .right{
float: right;
}
/* 医院简介区域 */
.company>.wrap{
background: #f7f7f7;
margin:30px auto;
overflow: hidden;
}
.company .company-top{
line-height: 61px;
height:51px;
margin:0 25px;
font-size:17px;
border-bottom: 1px solid #dcdddd;
}
.company .company-top a{
color:#f29600;
font-size: 12px;
margin:12px;
}
.company-top-right{
position: absolute;
top:0;
right:30px;
font-size: 12px;
}
.company-top-right span:nth-child(2n-1){
color:blue;
}
.company-main{
margin: 12px 25px 0 25px;
background: url(../img/hospital-1.jpg)left top no-repeat;
position: relative;
}
.company-text{
width:450px;
font-size: 12px;
margin-left:220px;
line-height: 18px;
color: #888888;
}
.company-text div{
margin:8px 0 8px 0;
text-indent: 20px;
}
.company-text div:nth-child(1){
background:url(../img/icon-web.png)0 0 no-repeat;
}
.company-text div:nth-child(2){
background:url(../img/icon-web.png)0 -21px no-repeat;
}
.company-text div:nth-child(3){
background:url(../img/icon-web.png)0 -42px no-repeat;
}
.company-text div:nth-child(4){
background:url(../img/icon-web.png)0 -63px no-repeat;
}
.company-img{
position: absolute;
top:0;
right:0;
width:250px;
height:165px;
}
.company-img img{
width:250px;
height:165px;
}
/*预约栏*/
.reserve{
padding-top: 40px;
font-size: 15px;
height: 410px;
position: relative;
}
.reserve-top{
border-bottom: 2px solid #60bff2;
margin-bottom: 20px;
}
.reserve-top .reserve-top-item{
display: inline-block;
width:110px;
height:30px;
line-height: 30px;
color:#60bff2;
text-align: center;
}
.reserve-top .reserve-top-item.focus{
background:#60bff2;
color:#fff;
}
.reserve-content h2{
padding-top: 40px;
font-size: 26px;
text-align: center;
padding-bottom: 20px;
}
.reserve-content>table{
text-align: center;
padding-bottom: 100px;
position: relative;
margin: 0 auto;
width: 1000px;
}
.reserve-content-tables{
border-collapse: collapse;
border: none;
line-height: 24px;
}
.reserve-content-tables td{
border: 1px solid #efefef;
}
.reserve-content-tabletop{
height:45px;
background:#f4f6fa;
line-height: 45px;
text-indent: 30px;
}
.reserve-content-table-line{
position: relative;
border-bottom: 1px solid #f4f6fa;
}
.reserve-content-department{
width: 144px;
font-size: 14px;
color: #888888;
height:90px;
border-left: 1px solid #f4f6fa;
text-align: center;
background-color: #f2fbff;
padding-top: 8px;
}
.reserve-content-detail{
width:562px;
position: absolute;
top:0;
left:144px;
font-weight: bold;
font-size: 14px;
padding-left: 18px;
}
.reserve-content-detail a{
display: inline-block;
width:120px;
height:30px;
line-height: 30px;
margin-left: 10px;
color:#000;
}
.reserve-content{
font-size: 12px;
position: relative;
}
.reserve-content h3{
text-align: center;
}
,
.reserve-content span{
display: inline-block;
text-align: center;
}
.reserve-content p{
}
.reserve-content-side{
position: absolute;
top: 0;
right:0;
width:272px;
height:282px;
border:1px solid #f4f6fa;
}
.reserve-content-side-top{
height:40px;
line-height: 40px;
background:#f4f6fa;
font-size:14px;
text-indent:10px;
}
.reserve-content-side-top span{
color:#00b3ea;
font-size: 12px;
}
.reserve-content-side-text{
height:240px;
overflow: auto;
}
.reserve-content-side-text>div{
margin:10px;
font-size: 12px;
position: relative;
line-height: 20px;
}
.reserve-content-side-text>div>div{
width:170px;
color:#888;
margin:-20px 0 0 65px;
}
.reserve-content.hospital p{
line-height: 30px;
text-indent: 2em;
margin:20px;
}
.reserve-content.find{
margin-top:100px;
border-top:1px solid #d8d9d9;
border-bottom:1px solid #d8d9d9;
position: relative;
font-size: 26px;
}
.find-input{
text-align: center;
padding:60px 0 60px 0;
}
.find-input input{
width:200px;
height:35px;
border: 1px solid #d8d9d9;
}
.find-input button{
width:100px;
height:36.5px;
margin-left:5px;
background:#60bff2;
text-align: center;
line-height: 36.5px;
color:#fff;
border:none;
}
/*排版部分*/
.schedule-middle{
height:388px;
position: relative;
}
.schedule-top{
margin:19px 10px;
}
.schedule-top a{
color:#60c1f3;
font-size:14px;
margin-left:10px;
}
.schedule-middle1{
height:323px;
width:35px;
border-top: 1px solid #dbdede;
border-left: 1px solid #dbdede;
border-bottom: 1px solid #dbdede;
}
.schedule-middle1-top{
height:44px;
background:url(../img/icon-scheduling-left.jpg);
}
.schedule-middle1-bottom,
.schedule-middle3-bottom{
background:#f1f9ff;
height:279px;
line-height: 93px;
}
.schedule-table{
width:660px;
height:325px;
position: absolute;
top:0px;
left:35px;
overflow: hidden;
}
.schedule-middle2{
width:660px;
position:absolute;
left:0;
transition: all 1s;
}
.schedule-middle2-date{
width:9999px;
height:46px;
font-size: 12px;
text-align: center;
overflow: hidden;
}
.schedule-middle2-morning,
.schedule-middle2-afternoon,
.schedule-middle2-evening{
width:9999px;
height:93px;
position: relative;
}
/*排班表格内部css*/
.ui-table{
width:93px;
height:44px;
border-top:1px solid #dbdede;
border-left: 1px solid #dbdede;
border-bottom: 1px solid #dbdede;
float:left;
}
.row2,
.row3,
.row4{
width:93px;
height:92px;
border-left: 1px solid #dbdede;
border-bottom: 1px solid #dbdede;
float:left;
}
.row3{
line-height: 92px;
text-align: center;
background:#e0effd;
color:#4eb4e0;
}
.schedule-middle3{
height:323px;
width:35px;
border-top: 1px solid #dbdede;
border-right: 1px solid #dbdede;
border-bottom: 1px solid #dbdede;
position: absolute;
top:0;
left:694px;
}
.schedule-middle3-top{
height:44px;
background:url(图片素材/icon-scheduling-right.jpg);
}
.schedule-middle1-top,
.schedule-middle3-top:hover{
cursor: pointer;
}
/*foot部分*/
.footer{
line-height: 70px;
text-align: center;
color:#acacac;
font-size:12px;
}
foot的问题出在哪里
还有科室排班表该怎么写？？？写回答
1回答
-
同学你好！
foot和reserve挤到一起的原因是：它设置了固定高度，但是内容超出了这个410px，解决方法：删掉reserve高度即可，或者是reserve高度修改为百分百
另外，同学是问科室排班表的布局怎么写吗？
同学可以使用table或者是div，这里使用哪一个都是可以的~
如果帮助到了 你欢迎采纳 祝学习愉快~
0
相似问题