第二個版本：點擊預約掛號可跳轉到排班表，獲取之后7個星期的排班
先放圖
首先是index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <!-- 框架 --> <link rel="stylesheet" href="css/layout.css"> <!-- 基本樣式 --> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/ui.css"> </head> <body> <!-- 頂部 --> <div id="top" 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> <!-- 頭部 --> <div id="header" class="header"> <div class="wrap"> <a href="#" class="logo"><img src="./img/logo.png" alt=""></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> <!-- 導航 --> <div id="nav" 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 id="about" class="about"> <div class="wrap"> <div class="a-title"> <div class="a-title-left"> <span>北京協和醫院</span> <span class="yellow">關注醫院</span> </div> <div class="a-title-right"> <span><a href="">等級：</a>三級甲等</span> <span><a href="">區域：</a>東城區</span> <span><a href="">分類：</a>中國醫科院所屬醫院</span> </div> </div> <div class="a-content"> <div class="a-content-left"><img src="img/hospital-1.jpg" alt=""></div> <div class="a-content-center"> <div class="text"><span class="t-span">醫院（Hospital）一詞是來自于拉丁文原意為“客人”，</span></div> <div class="text"><span class="t-span">醫院（Hospital）一詞</span></div> <div class="text"><span class="t-span">醫院（Hospital）一詞是來自于拉丁文</span></div> <div class="text"><span class="t-span">醫院（Hospital）一詞是來自于拉丁文原意為“客人”，因為一開始設立時，是供人避難，還備有休息間，使來者舒適，有招待意圖，后來，才逐漸成為滿足人類醫療需求，提供醫療服務的專業機構，收容和治療病人的服務場所，后來，才逐漸成為滿足人類醫療需求，提供醫療服務的專業機構，收容和治療病人的服務場所，</span></div> </div> <div class="a-content-right"><img src="img/map-1.png" alt=""></div> </div> </div> </div> <!-- tab框 --> <div id="content" class="content"> <div class="wrap clearfix"> <div class="content-tab"> <!-- tab導航 --> <div class="caption"> <a href="#8" class="item item_focus">預約掛號</a> <a href="#7" class="item">醫院介紹</a> <a href="#6" class="item">預約須知</a> <a href="#5" class="item">停診資訊</a> <a href="#4" class="item">查詢取消</a> </div> <!-- tab內容 --> <div class="block"> <!-- 預約掛號 --> <div class="item"> <table class='table1' cellpadding='0' cellspacing='0' rules="rows"> <tr class="bg1"> <td colspan="2">開放預約科室</td> </tr> <tr> <td class="bg2">2301</td> <td> <a href="detail.html">特殊門診科</a> <a href="detail.html">特殊門診科</a> <a href="detail.html">特殊門診科</a> <a href="detail.html">特殊門診科</a> <a href="detail.html">特殊門診科</a> <a href="detail.html">特殊門診科</a> <a href="detail.html">特殊門診科</a> <a href="detail.html">特殊門診科</a> <a href="detail.html">特殊門診科</a> <a href="detail.html">特殊門診科</a> </td> </tr> <tr> <td class="bg2">專科</td> <td> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> </td> </tr> <tr> <td class="bg2">內科</td> <td> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> </td> </tr> <tr> <td class="bg2">內科</td> <td> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> <a href="detail.html">麻醉科</a> </td> </tr> </table> <!-- 預約規則 --> <div class="content-news"> <div class="caption2"> 預約規則 <a href="" class="more">(更新時間，每日8:30更新)</a></div> <div class="list"> <table class="table3"> <tr> <td class="left">預約周期：</td> <td>7天</td> </tr> <tr> <td class="left">房號時間：</td> <td>8:30</td> </tr> <tr> <td class="left">預約周期：</td> <td>(更新時間，每日8:30更新)(更新時間，每日8:30更新)</td> </tr> <tr> <td class="left">預約周期：</td> <td>(更新時間，每日8:30更新)</td> </tr> <tr> <td class="left">特殊規則：</td> <td>北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，它隸屬于中國協和醫科大學(2006年改為北京協和醫學院/清華大學醫學部)，是其臨床醫學院，同時也是中國醫學科學院的臨床醫學研究所，中華人民共和國衛生部指定的診治疑難重癥的技術指導中心之一，<br>北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，它隸屬于中國協和醫科大學(2006年改為北京協和醫學院/清華大學醫學部)，是其臨床醫學院，同時也是中國醫學科學院的臨床醫學研究所，中華人民共和國衛生部指定的診治疑難重癥的技術指導中心之一，</td> </tr> </table> </div> </div> </div> <!-- 醫院介紹 --> <div class="item" style="display: none"> <p class="t-about">北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，它隸屬于中國協和醫科大學(2006年改為北京協和醫學院/清華大學醫學部)，是其臨床醫學院，同時也是中國醫學科學院的臨床醫學研究所，中華人民共和國衛生部指定的診治疑難重癥的技術指導中心之一，</p> <p class="t-about">北京協和醫院在中國乃至世界享有盛名，醫院成立于1921年，現任院長趙玉沛，北京協和醫院是中國最早承擔外賓醫療任務的單位，醫院專門設立外賓和高干門診部，開設專門的高干、外賓、特需病區，2006年7月28日被中國奧委會定為“國家隊運動員醫療服務指定醫院”，2006年7月28日被中國奧委會定為“國家隊運動員醫療服務指定醫院”，</p> <p class="t-about">2017年11月11日下午，復旦大學醫院管理研究所正式發布了《2016年度中國醫院排行榜》和《2016年度中國醫院專科聲譽排行榜》，北京協和醫院名列榜首 [1] ，2017年11月11日下午，復旦大學醫院管理研究所正式發布了《2016年度中國醫院排行榜》和《2016年度中國醫院專科聲譽排行榜》，北京協和醫院名列榜首 [1] ，2017年11月11日下午，復旦大學醫院管理研究所正式發布了《2016年度中國醫院排行榜》和《2016年度中國醫院專科聲譽排行榜》，北京協和醫院名列榜首 [1] ，</p> <p class="t-about">2018年12月4日訊息，被國家衛健委公布為首批腫瘤多學科診療試點醫院， [2] 2019年11月10日，復旦版《2018年度中國醫院排行榜》發布，北京協和居首，</p> </div> <!-- 預約須知 --> <div class="item" style="display: none"> <p class="p-title">北京協和醫院預約掛號須知</p> <p class="p-about"><span>電話預約掛號：010(24小時）</span></p> <p class="p-about"><span>網路預約掛號：010(24小時）</span><br>北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，它隸屬于中國協和醫科大學(2006年改為北京協和醫學院/清華大學醫學部)，是其臨床醫學院，</p> <p class="p-about"><span>一、預約時間范圍：010(24小時）</span><br>1、北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，<br>2、北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，<br>3、北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，</p> <p class="p-about"><span>二、預約實名制：</span><br>北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，它隸屬于中國協和醫科大學(2006年改為北京協和醫學院/清華大學醫學部)，</p> <p class="p-about"><span>三、預約掛號：</span><br>1、北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，<br>2、北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，<br>3、北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，</p> <p class="p-about"><span>四、醫生停診</span><br>2017年11月11日下午，復旦大學醫院管理研究所正式發布了《2016年度中國醫院排行榜》和《2016年度中國醫院專科聲譽排行榜》，</p> <p class="p-about"><span>五、醫生停診</span><br>2017年11月11日下午，復旦大學醫院管理研究所正式發布了《2016年度中國醫院排行榜》和《2016年度中國醫院專科聲譽排行榜》，</p> <p class="p-about"><span>六、爽約處理：</span><br>1、北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，<br>2、北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，</p> <p class="p-about"><span>七、其他注意事項：</span><br>1、北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，<br>2、北京協和醫院是一所位于北京市東城區，集醫療、科研、教學為一體的大型綜合醫院，</p> <p class="p-footer">北京協和醫院</p> </div> <!-- 停診資訊 --> <div class="item" style="display: none"> <p class="p-title">停診資訊</p> <table class='table1 table2' cellpadding='0' cellspacing='0' rules='all'> <tr> <td>日期</td> <td>星期</td> <td>時段</td> <td>科室</td> <td>特長</td> <td>職稱</td> <td>掛號費</td> <td>可掛號數</td> <td>剩余號數</td> <td>替換方式</td> </tr> <tr> <td>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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>2019-11-14</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> </table> </div> <!-- 查詢取消 --> <div class="item" style="display: none"> <div class='inner'> <div class="i-wrap"> <label for="">預約識別碼：</label> <input type="text"> <input type="button" value="查詢訂單"> </div> </div> </div> </div> </div> </div> </div> <!-- 底部 --> <div id="footer" class="footer"> Copyright © 2019 xxx著作權所有 </div> <script src="js/jquery-1.7.1.js"></script> <script src="js/ui.js"></script> </body> </html>
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{ height:36px; background-color:#60bff2; } .content{ width:1000px; margin:0 auto; padding:10px 0 38px 0; margin-top: 42px; } .content-tab{ float:left; width:1000px; background-color:#eee; } .content-news{ float:right; width:285px; border:1px solid #ccc; } .footer{ height:132px; padding:25px 0; background-color:#eceef2; }
base.css
p{ margin:0; padding:0; display: inline-block; } a{ text-decoration: none; } select,input{ border:none; outline:none; } .right{ float: right !important; } /*top模塊樣式*/ .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:0; top:29px; /*background-color:orange;*/ } /*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 .link_focus{ color: #fff; background-color: #1fa4f0; padding: 0 20px; } .nav a:hover{ color:#d7f3ff; } .nav .menu{ width:130px; padding-right:30px; background-color:#1fa4f0; position: relative; } .nav .menu .menu-list{ background-color:#1fa4f0; width:100%; height:423px; position: absolute; left:0; top:36px; } /*簡介模塊樣式*/ .about{ height:250px; margin-top: 30px; } .about .wrap{ background:#f5f5f5; width:960px; height:230px; padding: 20px; } .a-title{ width:1000; height:50px; border-bottom:1px solid #ddd; } .a-title-left{ float:left; } .a-title-right{ float:right; } .a-title-right span{ font-size: 13px; margin-right:5px; } .a-title-right span a{ color:blue; } .yellow{ color: #fec009; font-size: 13px; margin-left: 5px; } .a-content{ width:100%; height:150px; } .a-content-left{ float:left; width:200px; padding-top: 10px; } .a-content-center{ float:left; width:450px; font-size:13px; padding: 23px; } .a-content-center .text{ position: relative; height: 24px; line-height: 24px; font-size: 12px; text-indent: 28px; color:#868686; } .a-content-center .text:nth-child(2) .t-span:before { background-position-y: -18px; } .a-content-center .text:nth-child(3) .t-span:before { background-position-y: -36px; } .a-content-center .text:nth-child(4) .t-span:before { background-position-y: -54px; } .t-span:before{ content: ''; display: block; width: 22px; height: 18px; position: absolute; left: 0; top: 1px; background: url(../img/icon-tel.png) 0 0 no-repeat; } .a-content-right{ float: right; width: 250px; padding-top: 10px; } .a-content-right img{ width: 249px; height: 172px; } /*content模塊樣式*/ /*預約掛號*/ .table1{ border:1px solid #f5f5f5; width: 70%; float: left; } .bg1{ background-color: #f5f5f5; height: 30px; line-height: 30px; } .bg2 { width: 20%; background-color: rgb(242,252,254); text-align: center; vertical-align: top; color:#868686; font-size:15px; } .table1 td{ padding:10px; } .bg1 td{ padding-left: 25px; } .table1 td a{ color: #000; display: inline-block; width: 123px; font-size: 15px; height: 25px; } /*醫院介紹*/ .t-about { text-indent: 2em; font-size: 15px; line-height: 25px; margin-bottom: 10px; } /*預約須知*/ .p-title{ display: block; font-weight:bold; font-size:18px; text-align:center; margin-bottom: 15px; margin-top: 15px; } .p-about{ display: block; font-size:14px; margin-bottom: 15px; line-height: 25px; } .p-about span{ font-weight:bold; } .p-footer{ margin-top: 35px; display: block; text-align: center; font-weight:bold; } /*停診資訊*/ .table2{ width:100%; } .table2 td { padding: 10px; font-size: 13px; text-align: center; } /*查詢取消*/ .inner{ margin: 0 auto; height: 250px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; text-align: center; margin-top: 50px; } .i-wrap{ width: 400px; margin: 0 auto; margin-top: 90px; } .i-wrap input{ border:1px solid #ddd; height: 23px; } .i-wrap input[type="button"]{ width: 101px; background-color: #60bff2; color: #fff; height: 27px; border:none; } /*預約規則*/ .content-news{ background-color:#fff; border:1px solid #f4f6fa; } .content-news .caption2{ height:48px; line-height:48px; background-color:#f4f6f6; text-indent:20px; color:#868686; font-size:15px; } .content-news .more{ font-size:12px; color:#00b3ea; } .content-news .list{ font-size:12px; padding: 5px; overflow-y: scroll; height:300px; } .content-news .list .link{ display: block; color:#969696; } .table3 td{ height: 21px; line-height: 21px; color:#868686; } .table3 td.left{ width: 26%; vertical-align:top; color:#444; } .content-tab{ background:none; } .content-tab .caption{ height:34px; line-height:34px; margin-bottom: 25px; border-bottom:1px solid #00b3ea; } .content-tab .caption .item{ display: block; width:112px; height:34px; text-align:center; float:left; color:#00b3ea; font-size: 15px; } .content-tab .caption .item_focus{ background-color:#60bff2; color:#fff; } .content-tab .block{ float: left; width:1000px; } /*底部*/ .footer{ height: 70px; line-height: 70px; text-align: center; font-size: 12px; color: #666; }
ui.css
/*搜索*/ .ui-search{ background:url(../img/ui-search.jpg) center no-repeat; font-size:14px; color:#fff; } .ui-search-selected{ width:70px; height:38px; line-height:38px; position: absolute; left:0; top:0; text-indent:14px; } .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:36px; 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:71px; line-height:26px; font-size:13px; color:#a5a2a2; } .ui-search-submit{ display: block; position: absolute; right:0; top:1px; width:40px; height:36px; } /*ui-menu分類選單*/ .ui-menu{} .ui-menu-item{ height:22px; line-height:22px; padding:8px 5px 9px 6px; margin-left:2px; } .ui-menu-item:hover{ background-color:#fff; } .ui-menu-item-department{ float: left; height:22px; line-height:22px; position: relative; padding-left:30px; font-size:13px; } .ui-menu-item-department:before{ content:''; display: block; width:22px; height:21px; position: absolute; left:0; top:1px; background:url(../img/icon-menu.jpg) -22px 0 no-repeat; } .ui-menu-item:nth-child(2) .ui-menu-item-department:before{ background-position-y:-22px; } .ui-menu-item:nth-child(3) .ui-menu-item-department:before{ background-position-y:-66px; } .ui-menu-item-disease{ font-size:12px; float: right; padding-left:5px; color:#d7f3ff; } .ui-menu-item:hover .ui-menu-item-department:before{ background-position:0; } .ui-menu-item:hover .ui-menu-item-department{ color:#333; } .ui-menu-item:hover .ui-menu-item-disease{ color:#868686; } .ui-menu-item:hover .ui-menu-item-detail{ display:block; } .ui-menu-item-detail{ display: none; position: absolute; width:500px; height:393px; padding:20px 10px 10px 29px; background:#fff url(../img/bg-menu.jpg) center no-repeat; top:0; left:190px; box-shadow:5px 5px 2px rgba(0,0,0,.1); z-index: 99; } .ui-menu-item-detail-group{ padding-bottom:20px; text-align:left; } .ui-menu-item-detail-group-caption{ width:100%; display: block; height:34px; line-height:34px; color:#666; font-size:16px; font-weight:bold; } .ui-menu-item-detail-group-list{ line-height:23px; } .ui-menu-item-detail-group-list a{ display: inline-block; color:#868686; margin-right:12px; padding-bottom:5px; } .ui-menu-item-detail-group-list a:after{ content:'|'; color:#ddd; padding-left:12px; } /*回到頂部*/ .ui-backTop{ display: none; position: fixed; right: 2px; bottom:2px; z-index:9; width:40px; height:40px; color:#fff; background:rgba(102,102,102,.9) url(../img/icon-go-up.png) center no-repeat; } .ui-backTop:hover{ background:rgba(102,102,102,.9); } .ui-backTop:hover:after{ content:'回到頂部'; display: block; line-height:20px; text-align:center; } /*ui-slider幻燈片組件*/ .ui-slider{ width:544px; height:414px; position: relative; overflow:hidden; } .ui-slider-wrap{ width:99999px; height:414px; position: absolute; left:0; right:0; transition:all .5s; } .ui-slider-wrap .item{ display: block; float: left; width:544px; height:414px; } .ui-slider-arrow{ width:544px; height:40px; position: absolute; margin-top:-20px; top:50%; } .ui-slider-arrow .item{ display: block; width:40px; height:40px; position: absolute; top:0; background:url(../img/ui-slider-arrow.png) no-repeat; } .ui-slider-arrow .left{ left:0; } .ui-slider-arrow .right{ right:0; background-position: -40px 0; } .ui-slider-process{ width:544px; height:12px; text-align:center; position: absolute; left:0; bottom:20px; } .ui-slider-process .item{ display: inline-block; width:16px; height:16px; background:url(../img/ui-slider-process.png) no-repeat; } .ui-slider-process .item_focus, .ui-slider-process .item:hover{ background-position: -23px 0; }
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(); }) } //ui-tab /** * [UiTab description] * @param {[type]} header [tab選項卡切換部分classname] * @param {[type]} content [tab選項卡內容區域部分classname] * @param {[type]} focus_prefix [tab選項卡高亮樣式前綴，可選] */ $.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; }) } //ui-backTop $.fn.UiBackTop=function(){ var ui=$(this); var el=$('<a href="https://www.cnblogs.com/chenyingying0/p/#0"></a>'); ui.append(el); var windowHeight=$(window).height(); $(window).on('scroll',function(){ var top = $("body").scrollTop() || $(document).scrollTop(); if(top>windowHeight){ el.show(); }else{ el.hide(); } }); el.on('click',function(){ $(window).scrollTop(0); }); } //ui-排班表 $.fn.UiDate=function(){ // 回圈計算日期 var table=$('.d-date-table'); for(var i=0;i<49;i++){ //生成單日元素 var column=$("<div class='d-date-table-column'></div>"); table.append(column); //插入星期日期 var div1=$("<div class='d-date-table-title'></div>"); column.append(div1); var span1=$("<span class='dayText'></span>"); var br=$("<br>"); var span2=$("<span class='dateText'></span>"); div1.append(span1); div1.append(br); div1.append(span2); //插入其他元素 var div2=$("<div class='d-date-table-item'></div>"); var div3=$("<div class='d-date-table-item spe'>約滿</div>"); var div4=$("<div class='d-date-table-item'></div>"); column.append(div2); column.append(div3); column.append(div4); var dayText=$('.dayText').eq(i); var dateText=$('.dateText').eq(i); //計算明天日期 var week=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']; var data = https://www.cnblogs.com/chenyingying0/p/new Date(); data.setTime(data.getTime()+24*60*60*1000*i); var year = data.getFullYear();//年 var month= data.getMonth()+1;//月 var date = data.getDate();//日 var day= week[data.getDay()];//星期 //顯示星期和日期 dayText.html(day); dateText.html(year+'-'+month+'-'+date); } //獲取元素 var leftBtn=$('#leftBtn'); var rightBtn=$('#rightBtn'); var table=$('.d-date-table'); //預定義 var current=0; var width=$('.d-date').width(); //點擊事件 leftBtn.on('click',function(){ current--; if(current<=0){ current=0; } table.css('left',current*width*-1); }); rightBtn.on('click',function(){ current++; if(current>=6){ current=6; } table.css('left',current*width*-1); }); console.log(current); } //頁面的腳本邏輯 $(function(){ $('.ui-search').UISearch(); $('.content-tab').UiTab('.caption>.item','.block>.item'); $('body').UiBackTop(); $('body').UiDate(); })
然后是detail.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>detail</title> <!-- 框架 --> <link rel="stylesheet" href="css/layout.css"> <!-- 基本樣式 --> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/ui.css"> <!-- 科室排班表樣式 --> <link rel="stylesheet" href="css/detail.css"> </head> <body> <!-- 頂部 --> <div id="top" 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> <!-- 頭部 --> <div id="header" class="header"> <div class="wrap"> <a href="#" class="logo"><img src="./img/logo.png" alt=""></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> <!-- 導航 --> <div id="nav" 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 id="about" class="about"> <div class="wrap"> <div class="a-title"> <div class="a-title-left"> <span>北京協和醫院</span> <span class="yellow">關注醫院</span> </div> <div class="a-title-right"> <span><a href="">等級：</a>三級甲等</span> <span><a href="">區域：</a>東城區</span> <span><a href="">分類：</a>中國醫科院所屬醫院</span> </div> </div> <div class="a-content"> <div class="a-content-left"><img src="img/hospital-1.jpg" alt=""></div> <div class="a-content-center"> <div class="text"><span class="t-span">醫院（Hospital）一詞是來自于拉丁文原意為“客人”，</span></div> <div class="text"><span class="t-span">醫院（Hospital）一詞</span></div> <div class="text"><span class="t-span">醫院（Hospital）一詞是來自于拉丁文</span></div> <div class="text"><span class="t-span">醫院（Hospital）一詞是來自于拉丁文原意為“客人”，因為一開始設立時，是供人避難，還備有休息間，使來者舒適，有招待意圖，后來，才逐漸成為滿足人類醫療需求，提供醫療服務的專業機構，收容和治療病人的服務場所，后來，才逐漸成為滿足人類醫療需求，提供醫療服務的專業機構，收容和治療病人的服務場所，</span></div> </div> <div class="a-content-right"><img src="img/map-1.png" alt=""></div> </div> </div> </div> <!-- 科室排班表 --> <div id="content" class="content"> <div class="wrap clearfix"> <div class="d-title"> <span class="span1"> 科室排班表 <a href="index.html">回傳科室串列</a> </span> </div> <div class="d-container"> <div class="d-left"> <div id="leftBtn"> <img src="img/icon-scheduling-left.jpg"> </div> <div class='d-left-item'>上午</div> <div class='d-left-item'>下午</div> <div class='d-left-item'>晚上</div> </div> <div class="d-date"> <div class="d-date-table"> <!-- 單天排班資訊 --> <div class="d-date-table-column"> <div class="d-date-table-title"> <span class="dayText">星期二</span> <br> <span class="dateText">2019-11-20</span> </div> <div class="d-date-table-item"></div> <div class="d-date-table-item spe">約滿</div> <div class="d-date-table-item"></div> </div> </div> </div> <div class="d-right"> <div id="rightBtn"> <img src="img/icon-scheduling-right.jpg"> </div> <div class='d-right-item'></div> </div> <div class="d-rule"> <span class="d-rule-title">預約規則</span> <span class="d-rule-subtitle">預約周期：</span> <span>7天</span> <span class="d-rule-subtitle">預約周期：</span> <span>7天</span> <span class="d-rule-subtitle">預約周期：</span> <span>7天</span> <span class="d-rule-subtitle">退號時間：</span> <span>7天</span> <span class="d-rule-subtitle">特殊規則：</span> <span>這是預約掛號的特殊規則，這是預約掛號的特殊規則，這是預約掛號的特殊規則，這是預約掛號的特殊規則，這是預約掛號的特殊規則，這是預約掛號的特殊規則，這是預約掛號的特殊規則，這是預約掛號的特殊規則，這是預約掛號的特殊規則，這是預約掛號的特殊規則，</span> </div> <div class="d-footer"> ！您還沒有選擇就診日期 </div> </div> <div class="d-footer"> </div> </div> </div> <!-- 底部 --> <div id="footer" class="footer"> Copyright © 2019 XXX著作權所有 </div> <script src="js/jquery-1.7.1.js"></script> <script src="js/ui.js"></script> </body> </html>
detail.css
.content{ margin-bottom:30px; } .d-title{ margin-bottom:10px; } .span1 a{ color:#60bff2; font-size: 13px; margin-left:5px; } /*內容區域*/ .d-container{ width: 1000px; height: 320px; border: 1px solid #f5f5f5; } /*左箭頭列*/ .d-left{ width:33px; float: left; height: 320px; border: 1px solid #f5f5f5; cursor:pointer; position: relative; z-index:10; } .d-left-item{ height: 90px; background-color:rgb(241,248,255); line-height: 90px; text-align:center; font-size:14px; } /*排班表格*/ .d-date{ width:650px; float: left; height: 320px; border: 1px solid #f5f5f5; overflow: hidden; position: relative; } /*排班表實際容器*/ .d-date-table{ width:4550px; position: relative; transition:all 1s; left:0; } /*單列排班*/ .d-date-table-column{ width:92px; border: 1px solid #f5f5f5; border-left:0; border-bottom:0; height: 320px; float:left; } .d-date-table-column:nth-child(7n){ border-right:0; } .d-date-table-title{ height: 44px; border-bottom: 1px solid #f5f5f5; border-right: 1px solid #f5f5f5; border-left:0; text-align:center; } .d-date-table-title span{ font-size:12px; color:#868686; } .d-date-table-item{ height: 90px; border: 1px solid #f5f5f5; border-left:0; border-bottom:0; } .d-date-table-item.spe{ text-align: center; line-height: 90px; background-color:rgb(225,238,254); color:#60bff2; font-size:14px; } .d-date-table-item:last-child{ border-bottom:0; } /*右箭頭列*/ .d-right{ width:33px; float: left; height: 320px; border: 1px solid #f5f5f5; cursor:pointer; position: relative; z-index:10; } .d-right-item{ background-color:rgb(241,248,255); height: 270px; } /*預約規則*/ .d-rule{ width: 243px; height: 286px; float: left; padding: 17px; overflow-y: scroll; } .d-rule span{ font-size:13px; color:#868686; display: block; height:25px; } .d-rule .d-rule-title{ font-size:18px; color:#000; margin-bottom:10px; } .d-rule .d-rule-subtitle{ font-size:14px; color:#000; } .d-footer{ text-align: center; height:70px; line-height:70px; font-size:16px; color:#868686; border: 1px solid #f5f5f5; border-top:0; clear:both; }
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/21657.html
標籤：jQuery
下一篇：WebApp開發-Zepto