老师，我的问题是本节的5-12课程作业。
first-page <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>5-12作业</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" type="text/css" href="css/layout.css"> <link rel="stylesheet" href="css/ui.css"> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> </head> <body> <div class="top" id="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> <div class="header" id="header"> <div class="wrap"> <div class="logo"> <a href="#"><img src="img/logo.png"></a> </div> <div class="search ui-search"> <div class="ui-search-selected">医院</div> <div class="ui-search-select-list"> <a href="#">科室</a> <a href="#">疾病</a> <a href="#">医院</a> </div> <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容"> <a href="#" class="ui-search-submit"> </a> </div> </div> </div> <div class="nav" id="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 famous">社区知名医院</a> </div> </div> <div class="intro" id="intro"> <div class="wrap"> <div class="intro-title"> <p class="intro-title1">北京协和医院<span>关注医院</span></p> <p class="intro-title2"><span>等级</span>:三级甲等</p> <p class="intro-title3"><span>区域</span>:东城区</p> <p class="intro-title4"><span>分类</span>:中国医科院所属医院</p> </div> <div class="line"></div> <div class="intro-con"> <img src="img/hospital-1.jpg" alt="XX医院" class="img1"> <div class="intro-con-box"> <div class="intro-con-name">[东院]北京市东城区帅府路一号 [西院]北京市西城区大木仓胡同41号</div> <div class="intro-con-http">http://www.puch.cn/</div> <div class="intro-con-phone">东院咨询台：010-69155564,西院咨询台：010-69158010</div> <div class="intro-con-address">东院：106,108,110,111,116,684,685到东单路口北；41,104块，814到东单路口南；1,52,728,802到东单路口西；20,25,37,39到东单路口东；103,104,420,803到新东安市场；地铁1,5号线到东单。西院：88路皮才胡同东口；更多乘车路线详见须知。</div> </div> <img src="img/map-1.png" alt="地图" class="img2"> </div> </div> </div> <div class="system" id="system"> <div class="wrap"> <div class="system-caption"> <a href="../second page/index-2.html" class="system-caption-item system-caption-item_focus">预约挂号</a> <a href="../second page/index-2.html" class="system-caption-item">医院介绍</a> <a href="../second page/index-2.html" class="system-caption-item">预约须知</a> <a href="../second page/index-2.html" class="system-caption-item">停诊信息</a> <a href="../second page/index-2.html" class="system-caption-item">查询取消</a> </div> <div class="system-department"> <div class="system-wrap"> <div class="open">开放预约科室</div> <div class="open1"> <div class="open1-one">2301</div> <div class="open1-one">专科</div> <div class="open1-one">内科</div> <div class="open1-one">内科</div> </div> <div class="open2"> <div class="open2-one"> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> </div> <div class="open2-two"> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> </div> <div class="open2-three"> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> </div> <div class="open2-four"> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> <a href="#">特殊门诊科</a> </div> </div> </div> <div class="system-wrap " style="display: none;"> <p class="hos-one system-hosintro"> 北京协和医院是集医疗、教学、科研于一体的大型三级甲等综合医院，是国家卫生计生委指定的全国疑难重症诊治指导中心，也是最早承担高干保健和外宾医疗任务的医院之一，以学科齐全、技术力量雄厚、特色专科突出、多学科综合优势强大而享誉盛外。在2010，2011,2012,2013,2014年复旦大学医院管理研究所公布的“中国最佳医院排行榜”中连续五年名列榜首。 </p> <p class="hos-one system-hosintro"> 医院建成于1921年，由洛克菲勒基金会创办，建院之初，就志在“加成亚洲最好的医学中心”。90余年来，医院形成了“严谨、求精、勤奋、奉献”的协和精神和兼容并蓄的特色文化风格，创立了“三基”、“三严”的现代教育理念，形成了以“教授、病案、图书馆”著称的协和“三宝”，培养造就了张孝骞、林巧稚等一代医学大师和多为中国现代医学的领军人物，并向全国输送了大批的医学管理人才，创建了当今知名的10余家大型综合及专科医院。2011年在总结90年发展经验的基础上，创新性提出了“待病人如亲人，提高病人满意度；待同事如家人，提高员工幸福感”新办院理念。 </p> <p class="hos-one system-hosintro"> 目前，医院共有2个院区，总建筑面积53万平方米，在职员工4000余名、两院院士5人、临床和医技科室53个、国家级重点学科20个、国家临床重点专科29个、博士点6个、硕士点29个、国家级继续医学教育基地6个、二级学科住院医师培养基地18个、三级学科专科医师培养基地15个。开放住院床位2000余张，单日最高门诊量约为1.5万人次、年出院病人约8万人次。被评为“全国文明单位”、“全国创先争优先进基层党组织”、“全国卫生系统先进集体”、“首都卫生系统文明单位”、“最受欢迎三甲医院”、“荣获全国五一劳动奖章”。同时，医院还承担着支援老少变穷地区、国家重要活动和突发事件主力医疗队的重任，在2008年北京奥运工作中荣获“特别贡献奖”。 </p> <p class="hos-one system-hosintro"> 90多年来，协和人以执着的医志、高尚的医德、精湛的医术和严谨的学风书写了辉煌的历史，今天的协和人正为打造“国际知名、国际一流”医院的目标而继续努力。 </p> </div> <div class="system-wrap" style="display: none;"> <div class="info-one info-important">北京协和医院预约挂号须知</div> <div class="info-one"> 电话预约挂号：010-114(24小时) </div> <div class="info-one"> <p class="info-one">网络预约挂号：http://www.bjguahao.gov.cn</p> <p class="info-two">根据卫生部8月5号通知和卫生局8月20号工作部署，北京协和医院已完成电话、网络预约挂号的流程建设，现将预约挂号、取号有关事项公布如下，请您认真阅读预约须知：</p> </div> <div> <p class="info-one">一、预约时间范围：</p> <p class="info-two"> 1.您可预约7天内（试点）日间的副教授、主治医师和住院医师等号源。节假日不安排预约号（含周六、周日）。 2.每天早8:30分开始放号，下午14:00停止次日预约挂号。 3.周五14:00停挂至下周一。 </p> </div> <div> <p class="info-one"> 二、预约实名制： </p> <p class="info-two"> 统一平台电话预约和网上预约挂号均采用实名制注册预约，请您如实提供就诊人员的真实姓名、有效证件号（身份证、军官证、护照）、姓名、性别、电话、手机号码、病案号或协和就诊卡条形码上的ID等有效基本信息。 </p> </div> <div> <p class="info-one"> 三、预约取号： </p> <p class="info-two"> 1、预约成功后，请患者于就诊当日携带有效证件、预约识别码及协和医院就诊卡到医院挂号窗口验证预约信息（核对与预约登记实名信息一致的本人有效证件和预约识别码）和取号、如验证不符合医院则不能提供相应的诊疗服务。如果没有协和医院就诊卡，请先办好就诊卡后再取号。 2、取号时间：上午就诊患者，就诊当日早9:00以前取号。下午就诊患者，就诊当日下午12:00-13:30之间取号。过时未取号者，预约作废。 3.取号地点。西院区预约号取号地点：西院区门诊一层大厅挂号窗口取号。东院区预约号取号地点：东院区门诊楼一层挂号窗口或新门诊楼各楼层挂号/收费窗口取号。 </p> </div> <div> <p class="info-one"> 四、医生停诊： </p> <p class="info-two"> 如遇特殊情况医生停诊，给您造成的不便敬请谅解。医生临时停诊，工作人员将会用电话方式及时通知您，请配合更改就诊日期或更换其他医生，请您保持电话畅通。 </p> </div> <div> <p class="info-one"> 五、取消预约： </p> <p class="info-two"> 挂出的预约号如办理退号，至少在就诊前一工作日14:00前通过网站或者114电话凭预约识别码进行取消。 </p> </div> <div> <p class="info-one"> 六、爽约处理： </p> <p class="info-two"> 1.如预约成功后患者未能按时就诊且不办理取消预约号视为爽约。 2.一年内（自然年）无故爽约达到3次的爽约用户将自动进入系统爽约的黑名单，此后3个月内将取消预约挂号资格；一年内（自然年）累计爽约6次，取消6个月的预约挂号资格。 </p> </div> <div> <p class="info-one"> 七、其他注意事项： </p> <p class="info-two"> 1.协和东院、西院都可以预约。 2.国际医疗部门诊、卫干门诊不对外预约。 </p> </div> </div> <div class="system-wrap" style="display: none;"> <p class="info-three">停诊信息</p> <table> <tr> <td>日期</td> <td>星期</td> <td>时段</td> <td>科室</td> <td>特长</td> <td>职称</td> <td>挂号费</td> <td>可挂号数</td> <td>剩余号数</td> <td>替换方式</td> </tr> <tr> <td>2017-01-09</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-13</td> <td>5</td> <td>上午</td> <td>眼科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-10</td> <td>2</td> <td>上午</td> <td>变态反应科门诊</td> <td> </td> <td>正教授</td> <td>9.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>骨科门诊</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>下午</td> <td>特需眼科门诊</td> <td> </td> <td>专家（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>上午</td> <td>特需中医科门诊2</td> <td> </td> <td>副教授（特需200）</td> <td>200.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>中医科门诊</td> <td> </td> <td>副教授</td> <td>7.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>下午</td> <td>特需血管外科门诊（西院）</td> <td> </td> <td>专家特需（300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>上午</td> <td>泌尿外科膀胱瘤专科门诊</td> <td> </td> <td>副教授</td> <td>7.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>下午</td> <td>特需血液内科门诊</td> <td> </td> <td>正教授（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>下午</td> <td>特需耳鼻喉科门诊</td> <td> </td> <td>专家（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>特需中医科门诊1</td> <td> </td> <td>专家（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>上午</td> <td>特需神经科门诊2</td> <td> </td> <td>副教授（特需200）</td> <td>200.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>特需耳鼻喉科门诊</td> <td> </td> <td>专家（特需300）</td> <td>300.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-09</td> <td>1</td> <td>上午</td> <td>呼吸内科门诊</td> <td> </td> <td>专家</td> <td>14.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>上午</td> <td>普通内科门诊</td> <td> </td> <td>副教授</td> <td>7.00</td> <td>5</td> <td>5</td> <td>不可替换</td> </tr> <tr> <td>2017-01-12</td> <td>4</td> <td>下午</td> <td>普通内科门诊</td> <td> </td> <td>副教授</td> <td>7.00</td> <td>5</td> <td>4</td> <td>不可替换</td> </tr> <tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>特需骨科门诊</td> <td> </td> <td>副教授（特需200）</td> <td>200.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-11</td> <td>3</td> <td>下午</td> <td>整容美容外科门诊（西院）</td> <td> </td> <td>主治医师</td> <td>5.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> <tr> <td>2017-01-10</td> <td>2</td> <td>下午</td> <td>变态反应科门诊</td> <td> </td> <td>副教授</td> <td>7.00</td> <td>0</td> <td>0</td> <td>不可替换</td> </tr> </table> </div> <div class="system-wrap" style="display: none;"> <div class="wrap"> <p>预约识别码：</p> <p class="wrap-one"></p> <p class="wrap-two">查询订单</p> </div> </div> </div> <div class="system-rule"> <div class="system-rule-title"> 预约规则<span>(更新时间每日8:30更新)</span> </div> <div class="system-rule-info"> <div class="system-rule-info-one"> <p class="system-rule-info-two">预约周期:</p> <p class="system-rule-info-three">7天</p> </div> <div class="system-rule-info-one"> <p class="system-rule-info-two">放号时间:</p> <p class="system-rule-info-three">8:30</p> </div> <div class="system-rule-info-one"> <p class="system-rule-info-two">停挂时间:</p> <p class="system-rule-info-three">下午14:00停止次日预约挂号（周五14:00）后停挂至下周一</p> </div> <div class="system-rule-info-one"> <p class="system-rule-info-two">退号时间:</p> <p class="system-rule-info-three">就诊前一工作日前取消</p> </div> <div class="system-rule-info-one"> <p class="system-rule-info-two">特殊规则:</p> <p class="system-rule-info-three">1)取号时间地点不同：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</p> </div> </div> </div> </div> </div> <div class="footer"> Copyright © 2019 imooc.com All Rights Reserved </div> <script type="text/javascript" src="js/ui.js"></script> </body> </html>
base.css
p{
margin:0;
padding:0;
display: inline-block;
}
a{
text-decoration: none;
}
select,input{
border:none;
outline: none;
}
/* top样式 */
.top{
line-height: 30px;
font-size: 13px;
}
.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;
cursor: pointer;
}
/* header样式 */
.header .logo{
width:402px;
height: 74px;
display: inline-block;
padding:9px 0;
}
.header .logo img{
width:100%;
height: 100%;
}
.header .search{
width:326px;
height: 38px;
position: absolute;
right: 0;
top:29px;
/* background: orange; */
}
/* nav样式 */
.nav .link{
color:#fff;
font-size: 16px;
line-height: 36px;
display: inline-block;
padding-left: 30px;
text-align: center;
float: left;
}
.nav a:hover{
color:#d7f3ff;
}
.nav .famous{
float: right;
}
/* introduction样式 */
.intro-title1{
float: left;
font-size: 18px;
padding-left: 22px;
line-height: 51px;
}
.intro-title1 span{
color:#f29600;
padding-left: 10px;
font-size: 12px;
line-height: 51px;
cursor:pointer;
}
.intro-title2,.intro-title3,.intro-title4{
float: right;
font-size: 14px;
padding-right: 22px;
line-height: 51px;
color:#000;
line-height: 51px;
}
.intro-title2,.intro-title3,.intro-title4 span{
font-size: 14px;
line-height: 51px;
}
.intro-title2 span{
color:#0000ff;
}
.intro-title3 span{
color:#0000ff;
}
.intro-title4 span{
color:#0000ff;
}
.line{
width:948px;
border-bottom: 2px solid #dcdddd;
margin:1px 22px 10px 22px;
}
.intro-con-box{
width:449px;
height: 177px;
margin-left: 256px;
font-size: 14px;
color:#888;
}
.intro-con-box .intro-con-name,.intro-con-phone,.intro-con-http,.intro-con-address{
padding-top: 13px;
}
.intro-con-box .intro-con-name:before{
content: " ";
display: block;
width:15px;
height: 16px;
position: absolute;
left:227px;
top:16px;
background: url(../img/icon-web.png) no-repeat 0 0;
}
.intro-con-box .intro-con-http:before{
content: " ";
display: block;
width:15px;
height: 16px;
position: absolute;
left:227px;
top:48px;
background: url(../img/icon-web.png) no-repeat;
background-position-y:-22px;
}
.intro-con-box .intro-con-phone:before{
content: " ";
display: block;
width:15px;
height: 16px;
position: absolute;
left:227px;
top:80px;
background: url(../img/icon-web.png) no-repeat;
background-position-y:-44px;
}
.intro-con-box .intro-con-address:before{
content: " ";
display: block;
width:15px;
height: 16px;
position: absolute;
left:227px;
top:116px;
background: url(../img/icon-web.png) no-repeat;
background-position-y:-64px;
}
.intro-con .img1{
float: left;
width: 199px;
height: 146px;
}
.intro-con .img2{
position: absolute;
width: 248px;
height: 161px;
top:10px;
right: 22px;
}
/* system样式 */
.system-caption .system-caption-item{
display: block;
width:112px;
height: 34px;
float: left;
color:#00b3ea;
text-align: center;
}
.system-caption .system-caption-item_focus{
background-color: #60bff2;
color:#fff;
}
.system-department .open{
width:702px;
height: 43px;
padding-left: 27px;
line-height: 43px;
background-color: #f5f5f5;
color:#000;
font-size: 16px;
font-weight: bold;
}
.system-department .open1{
width:125px;
height: 365px;
background-color: #f2fbff;
position: absolute;
top:43px;
left:0;
color:#888;
}
.system-department .open1 .open1-one{
width:125px;
height: 92px;
text-align: center;
}
.system-department .open2{
position: absolute;
top:43px;
left:125px;
width:567px;
height: 92px;
}
.system-department .open2 .open2-one{
position: absolute;
top:4px;
left:27px;
}
.system-department .open2-one a{
float: left;
padding-right: 52px;
padding-bottom: 10px;
color:#000;
font-size: 16px;
}
.system-department .open2 .open2-two{
position: absolute;
top:96px;
left:27px;
}
.system-department .open2 .open2-three{
position: absolute;
top:188px;
left:27px;
}
.system-department .open2 .open2-four{
position: absolute;
top:280px;
left:27px;
}
.system-department .open2-two a{
float: left;
padding-right: 52px;
padding-bottom: 10px;
color:#000;
font-size: 16px;
}
.system-department .open2-three a{
float: left;
padding-right: 52px;
padding-bottom: 10px;
color:#000;
font-size: 16px;
}
.system-department .open2-four a{
float: left;
padding-right: 52px;
padding-bottom: 10px;
color:#000;
font-size: 16px;
}
.system-rule-title{
width:248px;
height: 40px;
padding-left: 12px;
line-height: 40px;
background-color: #f5f5f5;
color:#606060;
font-size: 15px;
font-weight: bold;
}
.system-rule-title span{
color:#00b3ea;
font-size: 13px;
line-height: 13px;
}
.system-rule-info{
width:248px;
height: 248px;
position: absolute;
top:50px;
left:12px;
overflow-y: scroll;
overflow-x: hidden;
}
.system-rule-info .system-rule-info-two{
font-size: 14px;
color:#555;
line-height: 14px;
padding:12px 16px 12px 12px;
}
.system-rule-info .system-rule-info-three{
position: absolute;
left:75px;
font-size: 12px;
color:#888;
line-height: 12px;
padding:12px 16px 12px 8px;
}layout.css
body{
margin:0;
padding:0;
}
.clearfix:after{
content: " ";
display: block;
height: 0;
line-height: 0;
clear:both;
zoom:1;
}
.wrap{
width:1000px;
margin:0 auto;
position: relative;
}
.top{
height: 30px;
background-color: #f5f5f5;
}
.header{
height: 92px;
}
.nav{
width:100%;
height: 35px;
background-color: #60bff2;
}
.intro{
width:996px;
height: 264px;
margin: 20px auto;
background-color: #f7f7f7;
}
.intro .intro-title{
width:992px;
height: 51px;
padding:1px 2px;
}
.intro .intro-con{
width:992px;
height: 209px;
padding:1px 2px;
position: relative;
}
.system{
width:996px;
/* height: 463px; */
overflow:hidden;
margin:35px auto;
}
.system .system-caption{
line-height: 30px;
height: 30px;
border-bottom: 3px solid #60bff2;
padding:2px 2px;
}
.system .system-department{
float: left;
width:702px;
/* height: 410px; */
margin:23px 18px 0 0;
position: relative;
}
.system .system-rule{
float: right;
width:254px;
height: 288px;
margin:23px 0 0 18px;
position: relative;
}
/* footer样式 */
.footer{
height: 70px;
line-height: 70px;
text-align: center;
background-color: #eee;
margin:25px 0 0 0;
}ui.css
/* 搜索样式 */
.ui-search{
background: url(../img/ui-search.jpg) no-repeat center;
font-size: 14px;
color:#fff;
position: relative;
}
.ui-search-selected{
width:70px;
height: 38px;
line-height: 38px;
text-indent: 14px;
position: absolute;
left:0;
top:0;
}
.ui-search-select-list{
display: none;
position: absolute;
width: 67px;
line-height: 24px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2);
left:2px;
top:38px;
z-index: 2;
}
.ui-search-select-list a{
display: block;
color:#a5a2a2;
text-align: center;
}
.ui-search-select-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width:208px;
height: 26px;
position: absolute;
top:5px;
left:73px;
line-height: 26px;
font-size: 13px;
color:#a5a2a2;
}
.ui-search-submit{
display: block;
position: absolute;
right:0;
top:1px;
width: 40px;
height: 36px;
}
/* system交互样式 */
.system-hosintro{
text-indent: 48px;
font-size: 15px;
line-height: 20px;
color:#000;
padding-bottom: 15px;
}
.system-wrap .info-one{
color:#000;
font-weight: bold;
font-size: 15px;
line-height: 20px;
padding-bottom: 15px;
}
.system-wrap .info-important{
font-size: 20px;
text-align: center;
}
.system-wrap .info-two{
color:#000;
font-size: 15px;
line-height: 20px;
font-weight: normal;
}
.system-wrap .info-three{
font-size: 20px;
font-weight: bold;
line-height: 20px;
padding-bottom: 20px;
text-align: center;
}
.system-wrap table{
border-collapse: collapse;
}
.system-wrap table tr td{
border:1px solid #eee;
}
.system-wrap{
position: relative;
}
.system-wrap .wrap{
width:736px;
height: 198px;
line-height: 200px;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
padding-left:264px;
}
.system-wrap .wrap-one{
width:192px;
height: 23px;
border:1px solid #eee;
position: absolute;
top:87px;
}
.system-wrap .wrap-two{
width:106px;
height: 25px;
color:#fff;
line-height:25px;
background-color:#60bff2;
text-align: center;
position: absolute;
left:561px;
top:87px;
cursor: pointer;
}ui.js
/*ui-search交互*/
$.fn.UiSearch = function(){
var ui = $(this);
$('.ui-search-selected',ui).on('click',function(){
$('.ui-search-select-list').show();
return false;
});
$('.ui-search-select-list a',ui).on('click',function(){
$('.ui-search-selected').text($(this).text());
$('.ui-search-select-list').hide();
return false;
});
$('body').on('click',function(){
$('.ui-search-select-list').hide();
});
}
$.fn.UiTab = function(header,content,focus_prefix){
var ui = $(this);
var tabs = $(header,ui);
var cons = $(content,ui);
var focus_prefix = focus_prefix || '';
tabs.on('click',function(){
var index = $(this).index();
tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');
cons.hide().eq(index).show();
return false;
})
}
$(function(){
$('.ui-search').UiSearch();
$('.system .wrap').UiTab('.system-caption > a','.system-department > .system-wrap','system-caption-');
})second-page <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>5-12作业</title> <link rel="stylesheet" type="text/css" href="css/base-2.css"> <link rel="stylesheet" type="text/css" href="css/layout-2.css"> <link rel="stylesheet" type="text/css" href="css/ui-2.css"> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> </head> <body> <div class="top" id="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> <div class="header" id="header"> <div class="wrap"> <div class="logo"> <a href="#"><img src="img/logo.png"></a> </div> <div class="search ui-search"> <div class="ui-search-selected">医院</div> <div class="ui-search-select-list"> <a href="#">科室</a> <a href="#">疾病</a> <a href="#">医院</a> </div> <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容"> <a href="#" class="ui-search-submit"> </a> </div> </div> </div> <div class="nav" id="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 famous">社区知名医院</a> </div> </div> <div class="intro" id="intro"> <div class="wrap"> <div class="intro-title"> <p class="intro-title1">北京协和医院<span>关注医院</span></p> <p class="intro-title2"><span>等级</span>:三级甲等</p> <p class="intro-title3"><span>区域</span>:东城区</p> <p class="intro-title4"><span>分类</span>:中国医科院所属医院</p> </div> <div class="line"></div> <div class="intro-con"> <img src="img/hospital-1.jpg" alt="XX医院" class="img1"> <div class="intro-con-box"> <div class="intro-con-name">[东院]北京市东城区帅府路一号 [西院]北京市西城区大木仓胡同41号</div> <div class="intro-con-http">http://www.puch.cn/</div> <div class="intro-con-phone">东院咨询台：010-69155564,西院咨询台：010-69158010</div> <div class="intro-con-address">东院：106,108,110,111,116,684,685到东单路口北；41,104块，814到东单路口南；1,52,728,802到东单路口西；20,25,37,39到东单路口东；103,104,420,803到新东安市场；地铁1,5号线到东单。西院：88路皮才胡同东口；更多乘车路线详见须知。</div> </div> <img src="img/map-1.png" alt="地图" class="img2"> </div> </div> </div> <div class="schedule"> <div class="schedule-wrap clearfix"> <div class="schedule-list"> <p>科室值班表<span>返回科室列表</span></p> </div> <div class="schedule-arrange"> <div class="schedule-info"> <div class="schedule-info-left"> <a href="#"></a> <div class="schedule-info-left-two"> <div class="time">上午</div> <div class="time">下午</div> <div class="time">晚上</div> </div> </div> <div class="schedule-info-middle"> <div class="schedule-info-middle-one"> <table> <tr> <td width="96px">星期一</td> <td width="96px">星期二</td> <td width="96px">星期三</td> <td width="96px">星期四</td> <td width="96px">星期五</td> <td width="96px">星期六</td> <td width="96px">星期日</td> </tr> <tr> <td width="96px">201702-21</td> <td width="96px">201702-22</td> <td width="96px">201702-23</td> <td width="96px">201702-24</td> <td width="96px">201702-25</td> <td width="96px">201702-26</td> <td width="96px">201702-27</td> </tr> </table> </div> <div class="schedule-info-middle-two"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box last"></div> </div> <div class="schedule-info-middle-three"> <div class="box">约满</div> <div class="box">约满</div> <div class="box">约满</div> <div class="box">约满</div> <div class="box">约满</div> <div class="box">约满</div> <div class="box last">约满</div> </div> <div class="schedule-info-middle-four"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box last"></div> </div> </div> <div class="schedule-info-right"> <a href="#"></a> <div class="schedule-info-right-two"></div> </div> </div> <div class="schedule-rule"> <div class="schedule-rule-title"> 预约规则 </div> <div class="schedule-rule-info-two">预约周期:</div> <div class="schedule-rule-info-three">7天</div> <div class="schedule-rule-info-two">放号时间:</div> <div class="schedule-rule-info-three">8:30</div> <div class="schedule-rule-info-two">停挂时间:</div> <div class="schedule-rule-info-three">下午14:00停止次日预约挂号（周五14:00）后停挂至下周一</div> <div class="schedule-rule-info-two">退号时间:</div> <div class="schedule-rule-info-three">就诊前一工作日前取消</div> <div class="schedule-rule-info-two">特殊规则:</div> <div class="schedule-rule-info-three">1)取号时间地点不同：西院区预约号取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</div> </div> <div class="schedule-warn"> <p><a href="#"></a>您还没选择就诊日期</p> </div> </div> </div> </div> <div class="footer"> Copyright © 2019 imooc.com All Rights Reserved </div> <script type="text/javascript" src="js/ui.js"></script> </body> </html>
base-2.css
p{
margin:0;
padding:0;
display: inline-block;
}
a{
text-decoration: none;
}
select,input{
border:none;
outline: none;
}
/* top样式 */
.top{
line-height: 30px;
font-size: 13px;
}
.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;
cursor: pointer;
}
/* header样式 */
.header .logo{
width:402px;
height: 74px;
display: inline-block;
padding:9px 0;
}
.header .logo img{
width:100%;
height: 100%;
}
.header .search{
width:326px;
height: 38px;
position: absolute;
right: 0;
top:29px;
/* background: orange; */
}
/* nav样式 */
.nav .link{
color:#fff;
font-size: 16px;
line-height: 36px;
display: inline-block;
padding-left: 30px;
text-align: center;
float: left;
}
.nav a:hover{
color:#d7f3ff;
}
.nav .famous{
float: right;
}
/* introduction样式 */
.intro-title1{
float: left;
font-size: 18px;
padding-left: 22px;
line-height: 51px;
}
.intro-title1 span{
color:#f29600;
padding-left: 10px;
font-size: 12px;
line-height: 51px;
cursor:pointer;
}
.intro-title2,.intro-title3,.intro-title4{
float: right;
font-size: 14px;
padding-right: 22px;
line-height: 51px;
color:#000;
line-height: 51px;
}
.intro-title2,.intro-title3,.intro-title4 span{
font-size: 14px;
line-height: 51px;
}
.intro-title2 span{
color:#0000ff;
}
.intro-title3 span{
color:#0000ff;
}
.intro-title4 span{
color:#0000ff;
}
.line{
width:948px;
border-bottom: 2px solid #dcdddd;
margin:1px 22px 10px 22px;
}
.intro-con-box{
width:449px;
height: 177px;
margin-left: 256px;
font-size: 14px;
color:#888;
}
.intro-con-box .intro-con-name,.intro-con-phone,.intro-con-http,.intro-con-address{
padding-top: 13px;
}
.intro-con-box .intro-con-name:before{
content: " ";
display: block;
width:15px;
height: 16px;
position: absolute;
left:227px;
top:16px;
background: url(../img/icon-web.png) no-repeat 0 0;
}
.intro-con-box .intro-con-http:before{
content: " ";
display: block;
width:15px;
height: 16px;
position: absolute;
left:227px;
top:48px;
background: url(../img/icon-web.png) no-repeat;
background-position-y:-22px;
}
.intro-con-box .intro-con-phone:before{
content: " ";
display: block;
width:15px;
height: 16px;
position: absolute;
left:227px;
top:80px;
background: url(../img/icon-web.png) no-repeat;
background-position-y:-44px;
}
.intro-con-box .intro-con-address:before{
content: " ";
display: block;
width:15px;
height: 16px;
position: absolute;
left:227px;
top:116px;
background: url(../img/icon-web.png) no-repeat;
background-position-y:-64px;
}
.intro-con .img1{
float: left;
width: 199px;
height: 146px;
}
.intro-con .img2{
position: absolute;
width: 248px;
height: 161px;
top:10px;
right: 22px;
}
/* schedule样式 */
.schedule-rule-title{
font-size: 18px;
color: #000;
line-height: 20px;
margin-top: 12px;
margin-left: 12px;
margin-bottom: 12px;
}
.schedule-rule .schedule-rule-info-two{
font-size: 14px;
color:#000;
line-height: 18px;
margin-left: 12px;
margin-top: 4px;
}
.schedule-rule .schedule-rule-info-three{
font-size: 12px;
color:#888;
line-height: 18px;
margin-left: 12px;
margin-top: 4px;
}
.schedule-list p{
color:#000;
font-size: 18px;
line-height: 18px;
}
.schedule-list span{
color:#60bff2;
font-size: 16px;
padding-left: 17px;
}
.schedule-info-left{
width: 35px;
height: 325px;
position: left;
top:0;
left:0;
}
.schedule-info-left a{
display: block;
width: 33px;
height: 44px;
position: absolute;
top:40px;
background: url(../img/icon-scheduling-left.jpg) no-repeat center;
border:1px solid #eee;
}
.schedule-info-left-two{
background-color: #f2f8ff;
width:33px;
height: 279px;
position: absolute;
left:0;
border:1px solid #eee;
top:84px;
}
.schedule-info-left-two .time{
width:33px;
height: 93px;
text-align: center;
font-size: 16px;
color: #000;
line-height: 93px;
}
.schedule-info-middle{
width:657px;
height: 325px;
position: absolute;
left:35px;
top:0;
}
.schedule-info-middle-one{
height: 40px;
width: 677px;
position: absolute;
top:40px;
left:0;
background-color: #f2f8fd;
color: #868686;
}
.schedule-info-middle-two{
height: 92px;
width: 677px;
position: absolute;
top:82px;
left:0;
}
.schedule-info-middle-three{
height: 92px;
width: 677px;
position: absolute;
top:170px;
left:0;
background-color: #f2f8fd;
color:#4ab4ed;
}
.schedule-info-middle-four{
height: 100px;
width: 677px;
position: absolute;
top:263px;
left:0;
}
.schedule-info-middle-one table{
border-collapse: collapse;
}
.schedule-info-middle-one table tr td{
border:1px solid #eee;
}
.schedule-info-middle-two .box{
width: 95px;
height: 92px;
float: left;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.schedule-info-middle-three .box{
width: 95px;
height: 92px;
line-height: 92px;
text-align: center;
float: left;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.schedule-info-middle-four .box{
width: 95px;
height: 99px;
float: left;
border-right: 1px solid #eee;
}
.schedule-info-right{
width: 35px;
height: 325px;
position: absolute;
top:0;
/* right:254px; */
right:0;
}
.schedule-info-right a{
display: block;
width: 33px;
height: 44px;
position: absolute;
top:40px;
right: 254px;
background: url(../img/icon-scheduling-right.jpg) no-repeat center;
border:1px solid #eee;
}
.schedule-info-right-two{
background-color: #f2f8ff;
width:33px;
height: 279px;
position: absolute;
right:254px;
border:1px solid #eee;
top:84px;
}
.schedule-warn{
color:#d5d5d4;
line-height: 66px;
padding-left: 406px;
font-size: 18px;
background:url(../img/icon-info.jpg) no-repeat 380px 25px;
}layout-2.css
body{
margin:0;
padding:0;
}
.clearfix:after{
content: " ";
display: block;
height: 0;
line-height: 0;
clear:both;
zoom:1;
}
.wrap{
width:1000px;
margin:0 auto;
position: relative;
}
.top{
height: 30px;
background-color: #f5f5f5;
}
.header{
height: 92px;
}
.nav{
width:100%;
height: 35px;
background-color: #60bff2;
}
.intro{
width:996px;
height: 264px;
margin: 20px auto;
background-color: #f7f7f7;
}
.intro .intro-title{
width:992px;
height: 51px;
padding:1px 2px;
}
.intro .intro-con{
width:992px;
height: 209px;
padding:1px 2px;
position: relative;
}
/* schedule样式 */
.schedule-wrap{
width:1000px;
position: relative;
margin:20px auto;
}
.schedule-list{
margin-left: 11px;
}
.schedule .schedule-arrange{
float: left;
width:1000px;
height: 391px;
margin:19px 0 19px 0;
border:1px solid #eee;
}
.schedule-info{
width:746px;
height: 325px;
float: left;
}
.schedule .schedule-rule{
background-color: #fff;
float: right;
width:254px;
height: 325px;
border-top: 1px solid #eee;
overflow-y: scroll;
overflow-x: hidden;
}
.schedule-warn{
width:594px;
margin-top:323px;
height: 66px;
border:1px solid #eee;
}
/* footer样式 */
.footer{
height: 70px;
line-height: 70px;
text-align: center;
background-color: #eee;
margin:25px 0 0 0;
}ui-2.css
/* 搜索样式 */
.ui-search{
background: url(../img/ui-search.jpg) no-repeat center;
font-size: 14px;
color:#fff;
position: relative;
}
.ui-search-selected{
width:70px;
height: 38px;
line-height: 38px;
text-indent: 14px;
position: absolute;
left:0;
top:0;
}
.ui-search-select-list{
display: none;
position: absolute;
width: 67px;
line-height: 24px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2);
left:2px;
top:38px;
z-index: 2;
}
.ui-search-select-list a{
display: block;
color:#a5a2a2;
text-align: center;
}
.ui-search-select-list a:hover{
background-color: #ebeef5;
}
.ui-search-input{
width:208px;
height: 26px;
position: absolute;
top:5px;
left:73px;
line-height: 26px;
font-size: 13px;
color:#a5a2a2;
}
.ui-search-submit{
display: block;
position: absolute;
right:0;
top:1px;
width: 40px;
height: 36px;
}老师，我的问题是1：科室排版区域的js交互我还没有实现，批改作业的老师给了我一个思路，但学生愚钝，没有自己实现，希望老师指点下:；2：如果作业里还有其他问题，烦请老师指正。
14
收起
正在回答
2回答
同学你好， 根据同学的代码布局，如果要实现科室排班表的js交互效果， 改动较大。 建议： 同学可以二次提交作业， 批注上你的问题， 会有批作业的老师以文档的形式给出详细的解决方案， 也方便同学查看哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星