效果图

image.png
image.png
image.png

HTML部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>欢迎来到城市医院挂号平台</title>
  6.     <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  7.     <link rel="stylesheet" type="text/css" href="css/page1.css">
  8.     <link rel="stylesheet" type="text/css" href="css/page2.css">
  9.     <script type="text/javascript" src="js/jquery.js"></script>
  10.     <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
  11.     <script type="text/javascript" src="js/menu.js"></script>
  12.     <script type="text/javascript" src="js/lunbo.js"></script>
  13.     <script type="text/javascript" src="js/select.js"></script>
  14.     <script type="text/javascript" src="js/search.js"></script>
  15. </head>
  16. <body>
  17.     <!-- 页面顶部 -->
  18.     <header>
  19.         <!-- 第一部分 导航栏 -->
  20.         <nav>
  21.             <!-- 电话图标+电话号码 -->
  22.             <div class="telephone">
  23.                 <span class="glyphicon glyphicon-earphone" style="color: gray"></span>
  24.                 <p>010-114/116114电话预约</p>
  25.             </div>
  26.             <!-- 登录+注册+帮助中心 -->
  27.             <div class="login">
  28.                 <p>欢迎来到城市预约挂号统一平台 请</p>
  29.                 <a href="#">登录</a>
  30.                 <a href="#">注册</a>
  31.                 <a href="#">帮助中心</a>
  32.             </div>
  33.         </nav>
  34.         <!-- 第二部分 LOGO+搜索框 -->
  35.         <div>
  36.             <!-- dodoke logo -->
  37.             <img src="img/doke.png">
  38.             <!-- 搜索框 -->
  39.             <div class="search">
  40.                 <a href="#">
  41.                     <div class="choose">医院</div>
  42.                 </a>
  43.                 <input type="search" placeholder=" 请输入搜索内容">
  44.             </div>
  45.             <div class="choose1" style="display: none;">
  46.                 <p id="p1">科室</p>
  47.                 <p id="p2">疾病</p>
  48.                 <p id="p3">医院</p>
  49.             </div>
  50.         </div>
  51.     </header>
  52.     <!-- 页面主体 -->
  53.     <section>
  54.         <!-- 第一部分 导航栏 -->
  55.         <nav>
  56.             <span id="qbks">全部科室</span>
  57.             <span id="ayygh">按医院挂号</span>
  58.             <span id="aksgh">按科室挂号</span>
  59.             <span id="ajbgh">按疾病挂号</span>
  60.             <span id="zxgg_nav">最新公告</span>
  61.             <span id="shzmyy">社会知名医院</span>
  62.         </nav>
  63.         <!-- 第二部分 第一小组 主页 -->
  64.         <div class="page1" id="page1" style="display: block;">
  65.             <!-- 主菜单 -->
  66.             <div class="main_menu">
  67.                 <div id="main_nk">
  68.                     <img src="img/screenshot/1.png">
  69.                     <span>内科</span>
  70.                     <small>高血压 冠心病</small>
  71.                 </div>
  72.                 <div id="main_wk">
  73.                     <img src="img/screenshot/2.png">
  74.                     <span>外科</span>
  75.                     <small>肾结石 脑外伤</small>
  76.                 </div>
  77.                 <div id="main_fck">
  78.                     <img src="img/screenshot/3.png">
  79.                     <span>妇产科</span>
  80.                     <small>不孕不育</small>
  81.                 </div>
  82.                 <div id="main_szzx">
  83.                     <img src="img/screenshot/4.png">
  84.                     <span>生殖中心</span>
  85.                     <small>男性不育</small>
  86.                 </div>
  87.                 <div id="main_ek">
  88.                     <img src="img/screenshot/5.png">
  89.                     <span>儿科</span>
  90.                     <small>小儿感冒</small>
  91.                 </div>
  92.                 <div id="main_gwk">
  93.                     <img src="img/screenshot/6.png">
  94.                     <span>骨外科</span>
  95.                     <small>关节炎 骨折</small>
  96.                 </div>
  97.                 <div id="main_yk">
  98.                     <img src="img/screenshot/7.png">
  99.                     <span>眼科</span>
  100.                     <small>近视 白内障</small>
  101.                 </div>
  102.                 <div id="main_kqk">
  103.                     <img src="img/screenshot/8.png">
  104.                     <span>口腔科</span>
  105.                     <small>牙痛</small>
  106.                 </div>
  107.                 <div id="main_ebyhtjk">
  108.                     <img src="img/screenshot/9.png">
  109.                     <span>耳鼻咽喉头颈科</span>
  110.                     <small></small>
  111.                 </div>
  112.                 <div id="main_zlk">
  113.                     <img src="img/screenshot/10.png">
  114.                     <span>肿瘤科</span>
  115.                     <small>癌症</small>
  116.                 </div>
  117.                 <div id="main_qtks">
  118.                     <img src="img/screenshot/11.png">
  119.                     <span>其他科室</span>
  120.                 </div>
  121.             </div>
  122.             <!-- 副菜单 -->
  123.             <!-- 内科 -->
  124.             <div>
  125.                 <div class="sub_menu sub_menu_nk">
  126.                     <h4>内科</h4>
  127.                     <div>
  128.                         <a href="#">心脑血管科</a>
  129.                         <a href="#">神经内科</a>
  130.                         <a href="#">内分泌科</a>
  131.                         <a href="#">血液科</a>
  132.                         <a href="#">心血管内科</a>
  133.                         <a href="#">神经内科</a>
  134.                         <a href="#">内分泌科</a>
  135.                         <a href="#">血液科</a>
  136.                         <a href="#">心血管内科</a>
  137.                         <a href="#">神经内科</a>
  138.                         <a href="#">内分泌科</a>
  139.                         <a href="#">血液科</a>
  140.                         <a href="#">内分泌科</a>
  141.                         <a href="#">血液科</a>
  142.                     </div>
  143.                     <h4>内科常见</h4>
  144.                     <div>
  145.                         <a href="#">心脑血管科</a>
  146.                         <a href="#">神经内科</a>
  147.                         <a href="#">内分泌科</a>
  148.                         <a href="#">血液科</a>
  149.                         <a href="#">心血管内科</a>
  150.                         <a href="#">神经内科</a>
  151.                         <a href="#">内分泌科</a>
  152.                         <a href="#">血液科</a>
  153.                         <a href="#">心血管内科</a>
  154.                         <a href="#">神经内科</a>
  155.                         <a href="#">内分泌科</a>
  156.                         <a href="#">血液科</a>
  157.                         <a href="#">内分泌科</a>
  158.                         <a href="#">血液科</a>
  159.                     </div>
  160.                 </div>
  161.                 <!-- 外科 -->
  162.                 <div class="sub_menu sub_menu_wk">
  163.                     <h4>外科</h4>
  164.                     <div>
  165.                         <a href="#">外科1</a>
  166.                         <a href="#">外科2</a>
  167.                         <a href="#">外科3</a>
  168.                         <a href="#">外科4</a>
  169.                         <a href="#">外科5</a>
  170.                         <a href="#">外科6</a>
  171.                         <a href="#">外科7</a>
  172.                         <a href="#">外科8</a>
  173.                         <a href="#">外科9</a>
  174.                         <a href="#">外科10</a>
  175.                         <a href="#">外科11</a>
  176.                         <a href="#">外科12</a>
  177.                         <a href="#">外科13</a>
  178.                         <a href="#">外科14</a>
  179.                     </div>
  180.                     <h4>外科常见</h4>
  181.                     <div>
  182.                         <a href="#">外科1</a>
  183.                         <a href="#">外科2</a>
  184.                         <a href="#">外科3</a>
  185.                         <a href="#">外科4</a>
  186.                         <a href="#">外科5</a>
  187.                         <a href="#">外科6</a>
  188.                         <a href="#">外科7</a>
  189.                         <a href="#">外科8</a>
  190.                         <a href="#">外科9</a>
  191.                         <a href="#">外科10</a>
  192.                         <a href="#">外科11</a>
  193.                         <a href="#">外科12</a>
  194.                         <a href="#">外科13</a>
  195.                         <a href="#">外科14</a>
  196.                     </div>
  197.                 </div>
  198.                 <!-- 妇产科 -->
  199.                 <div class="sub_menu sub_menu_fck">
  200.                     <h4>妇产科</h4>
  201.                     <div>
  202.                         <a href="#">妇产科1</a>
  203.                         <a href="#">妇产科2</a>
  204.                         <a href="#">妇产科3</a>
  205.                         <a href="#">妇产科4</a>
  206.                         <a href="#">妇产科5</a>
  207.                         <a href="#">妇产科6</a>
  208.                         <a href="#">妇产科7</a>
  209.                         <a href="#">妇产科8</a>
  210.                         <a href="#">妇产科9</a>
  211.                         <a href="#">妇产科10</a>
  212.                         <a href="#">妇产科11</a>
  213.                         <a href="#">妇产科12</a>
  214.                         <a href="#">妇产科13</a>
  215.                         <a href="#">妇产科14</a>
  216.                     </div>
  217.                     <h4>妇产科常见</h4>
  218.                     <div>
  219.                         <a href="#">妇产科1</a>
  220.                         <a href="#">妇产科2</a>
  221.                         <a href="#">妇产科3</a>
  222.                         <a href="#">妇产科4</a>
  223.                         <a href="#">妇产科5</a>
  224.                         <a href="#">妇产科6</a>
  225.                         <a href="#">妇产科7</a>
  226.                         <a href="#">妇产科8</a>
  227.                         <a href="#">妇产科9</a>
  228.                         <a href="#">妇产科10</a>
  229.                         <a href="#">妇产科11</a>
  230.                         <a href="#">妇产科12</a>
  231.                         <a href="#">妇产科13</a>
  232.                         <a href="#">妇产科14</a>
  233.                     </div>
  234.                 </div>
  235.                 <!-- 生殖中心 -->
  236.                 <div class="sub_menu sub_menu_szzx">
  237.                     <h4>生殖中心</h4>
  238.                     <div>
  239.                         <a href="#">生殖中心1</a>
  240.                         <a href="#">生殖中心2</a>
  241.                         <a href="#">生殖中心3</a>
  242.                         <a href="#">生殖中心4</a>
  243.                         <a href="#">生殖中心5</a>
  244.                         <a href="#">生殖中心6</a>
  245.                         <a href="#">生殖中心7</a>
  246.                         <a href="#">生殖中心8</a>
  247.                         <a href="#">生殖中心9</a>
  248.                         <a href="#">生殖中心10</a>
  249.                         <a href="#">生殖中心11</a>
  250.                         <a href="#">生殖中心12</a>
  251.                         <a href="#">生殖中心13</a>
  252.                         <a href="#">生殖中心14</a>
  253.                     </div>
  254.                     <h4>生殖中心常见</h4>
  255.                     <div>
  256.                         <a href="#">生殖中心1</a>
  257.                         <a href="#">生殖中心2</a>
  258.                         <a href="#">生殖中心3</a>
  259.                         <a href="#">生殖中心4</a>
  260.                         <a href="#">生殖中心5</a>
  261.                         <a href="#">生殖中心6</a>
  262.                         <a href="#">生殖中心7</a>
  263.                         <a href="#">生殖中心8</a>
  264.                         <a href="#">生殖中心9</a>
  265.                         <a href="#">生殖中心10</a>
  266.                         <a href="#">生殖中心11</a>
  267.                         <a href="#">生殖中心12</a>
  268.                         <a href="#">生殖中心13</a>
  269.                         <a href="#">生殖中心14</a>
  270.                     </div>
  271.                 </div>
  272.                 <!-- 儿科 -->
  273.                 <div class="sub_menu sub_menu_ek">
  274.                     <h4>儿科</h4>
  275.                     <div>
  276.                         <a href="#">儿科1</a>
  277.                         <a href="#">儿科2</a>
  278.                         <a href="#">儿科3</a>
  279.                         <a href="#">儿科4</a>
  280.                         <a href="#">儿科5</a>
  281.                         <a href="#">儿科6</a>
  282.                         <a href="#">儿科7</a>
  283.                         <a href="#">儿科8</a>
  284.                         <a href="#">儿科9</a>
  285.                         <a href="#">儿科10</a>
  286.                         <a href="#">儿科11</a>
  287.                         <a href="#">儿科12</a>
  288.                         <a href="#">儿科13</a>
  289.                         <a href="#">儿科14</a>
  290.                     </div>
  291.                     <h4>儿科常见</h4>
  292.                     <div>
  293.                         <a href="#">儿科1</a>
  294.                         <a href="#">儿科2</a>
  295.                         <a href="#">儿科3</a>
  296.                         <a href="#">儿科4</a>
  297.                         <a href="#">儿科5</a>
  298.                         <a href="#">儿科6</a>
  299.                         <a href="#">儿科7</a>
  300.                         <a href="#">儿科8</a>
  301.                         <a href="#">儿科9</a>
  302.                         <a href="#">儿科10</a>
  303.                         <a href="#">儿科11</a>
  304.                         <a href="#">儿科12</a>
  305.                         <a href="#">儿科13</a>
  306.                         <a href="#">儿科14</a>
  307.                     </div>
  308.                 </div>
  309.                 <!-- 骨外科 -->
  310.                 <div class="sub_menu sub_menu_gwk">
  311.                     <h4>骨外科</h4>
  312.                     <div>
  313.                         <a href="#">骨外科1</a>
  314.                         <a href="#">骨外科2</a>
  315.                         <a href="#">骨外科3</a>
  316.                         <a href="#">骨外科4</a>
  317.                         <a href="#">骨外科5</a>
  318.                         <a href="#">骨外科6</a>
  319.                         <a href="#">骨外科7</a>
  320.                         <a href="#">骨外科8</a>
  321.                         <a href="#">骨外科9</a>
  322.                         <a href="#">骨外科10</a>
  323.                         <a href="#">骨外科11</a>
  324.                         <a href="#">骨外科12</a>
  325.                         <a href="#">骨外科13</a>
  326.                         <a href="#">骨外科14</a>
  327.                     </div>
  328.                     <h4>骨外科常见</h4>
  329.                     <div>
  330.                         <a href="#">骨外科1</a>
  331.                         <a href="#">骨外科2</a>
  332.                         <a href="#">骨外科3</a>
  333.                         <a href="#">骨外科4</a>
  334.                         <a href="#">骨外科5</a>
  335.                         <a href="#">骨外科6</a>
  336.                         <a href="#">骨外科7</a>
  337.                         <a href="#">骨外科8</a>
  338.                         <a href="#">骨外科9</a>
  339.                         <a href="#">骨外科10</a>
  340.                         <a href="#">骨外科11</a>
  341.                         <a href="#">骨外科12</a>
  342.                         <a href="#">骨外科13</a>
  343.                         <a href="#">骨外科14</a>
  344.                     </div>
  345.                 </div>
  346.                 <!-- 眼科 -->
  347.                 <div class="sub_menu sub_menu_yk">
  348.                     <h4>眼科</h4>
  349.                     <div>
  350.                         <a href="#">眼科1</a>
  351.                         <a href="#">眼科2</a>
  352.                         <a href="#">眼科3</a>
  353.                         <a href="#">眼科4</a>
  354.                         <a href="#">眼科5</a>
  355.                         <a href="#">眼科6</a>
  356.                         <a href="#">眼科7</a>
  357.                         <a href="#">眼科8</a>
  358.                         <a href="#">眼科9</a>
  359.                         <a href="#">眼科10</a>
  360.                         <a href="#">眼科11</a>
  361.                         <a href="#">眼科12</a>
  362.                         <a href="#">眼科13</a>
  363.                         <a href="#">眼科14</a>
  364.                     </div>
  365.                     <h4>眼科常见</h4>
  366.                     <div>
  367.                         <a href="#">眼科1</a>
  368.                         <a href="#">眼科2</a>
  369.                         <a href="#">眼科3</a>
  370.                         <a href="#">眼科4</a>
  371.                         <a href="#">眼科5</a>
  372.                         <a href="#">眼科6</a>
  373.                         <a href="#">眼科7</a>
  374.                         <a href="#">眼科8</a>
  375.                         <a href="#">眼科9</a>
  376.                         <a href="#">眼科10</a>
  377.                         <a href="#">眼科11</a>
  378.                         <a href="#">眼科12</a>
  379.                         <a href="#">眼科13</a>
  380.                         <a href="#">眼科14</a>
  381.                     </div>
  382.                 </div>
  383.                 <!-- 口腔科 -->
  384.                 <div class="sub_menu sub_menu_kqk">
  385.                     <h4>口腔科</h4>
  386.                     <div>
  387.                         <a href="#">口腔科1</a>
  388.                         <a href="#">口腔科2</a>
  389.                         <a href="#">口腔科3</a>
  390.                         <a href="#">口腔科4</a>
  391.                         <a href="#">口腔科5</a>
  392.                         <a href="#">口腔科6</a>
  393.                         <a href="#">口腔科7</a>
  394.                         <a href="#">口腔科8</a>
  395.                         <a href="#">口腔科9</a>
  396.                         <a href="#">口腔科10</a>
  397.                         <a href="#">口腔科11</a>
  398.                         <a href="#">口腔科12</a>
  399.                         <a href="#">口腔科13</a>
  400.                         <a href="#">口腔科14</a>
  401.                     </div>
  402.                     <h4>口腔科常见</h4>
  403.                     <div>
  404.                         <a href="#">口腔科1</a>
  405.                         <a href="#">口腔科2</a>
  406.                         <a href="#">口腔科3</a>
  407.                         <a href="#">口腔科4</a>
  408.                         <a href="#">口腔科5</a>
  409.                         <a href="#">口腔科6</a>
  410.                         <a href="#">口腔科7</a>
  411.                         <a href="#">口腔科8</a>
  412.                         <a href="#">口腔科9</a>
  413.                         <a href="#">口腔科10</a>
  414.                         <a href="#">口腔科11</a>
  415.                         <a href="#">口腔科12</a>
  416.                         <a href="#">口腔科13</a>
  417.                         <a href="#">口腔科14</a>
  418.                     </div>
  419.                 </div>
  420.                 <!-- 耳鼻咽喉头颈科 -->
  421.                 <div class="sub_menu sub_menu_ebyhtjk">
  422.                     <h4>耳鼻咽喉头颈科</h4>
  423.                     <div>
  424.                         <a href="#">耳鼻咽喉头颈科1</a>
  425.                         <a href="#">耳鼻咽喉头颈科2</a>
  426.                         <a href="#">耳鼻咽喉头颈科3</a>
  427.                         <a href="#">耳鼻咽喉头颈科4</a>
  428.                         <a href="#">耳鼻咽喉头颈科5</a>
  429.                         <a href="#">耳鼻咽喉头颈科6</a>
  430.                         <a href="#">耳鼻咽喉头颈科7</a>
  431.                         <a href="#">耳鼻咽喉头颈科8</a>
  432.                         <a href="#">耳鼻咽喉头颈科9</a>
  433.                     </div>
  434.                     <h4>耳鼻咽喉头颈科</h4>
  435.                     <div>
  436.                         <a href="#">耳鼻咽喉头颈科1</a>
  437.                         <a href="#">耳鼻咽喉头颈科2</a>
  438.                         <a href="#">耳鼻咽喉头颈科3</a>
  439.                         <a href="#">耳鼻咽喉头颈科4</a>
  440.                         <a href="#">耳鼻咽喉头颈科5</a>
  441.                         <a href="#">耳鼻咽喉头颈科6</a>
  442.                         <a href="#">耳鼻咽喉头颈科7</a>
  443.                         <a href="#">耳鼻咽喉头颈科8</a>
  444.                         <a href="#">耳鼻咽喉头颈科9</a>
  445.                     </div>
  446.                 </div>
  447.                 <!-- 肿瘤科 -->
  448.                 <div class="sub_menu sub_menu_zlk">
  449.                     <h4>肿瘤科</h4>
  450.                     <div>
  451.                         <a href="#">肿瘤科1</a>
  452.                         <a href="#">肿瘤科2</a>
  453.                         <a href="#">肿瘤科3</a>
  454.                         <a href="#">肿瘤科4</a>
  455.                         <a href="#">肿瘤科5</a>
  456.                         <a href="#">肿瘤科6</a>
  457.                         <a href="#">肿瘤科7</a>
  458.                         <a href="#">肿瘤科8</a>
  459.                         <a href="#">肿瘤科9</a>
  460.                         <a href="#">肿瘤科10</a>
  461.                         <a href="#">肿瘤科11</a>
  462.                         <a href="#">肿瘤科12</a>
  463.                         <a href="#">肿瘤科13</a>
  464.                         <a href="#">肿瘤科14</a>
  465.                     </div>
  466.                     <h4>肿瘤科常见</h4>
  467.                     <div>
  468.                         <a href="#">肿瘤科1</a>
  469.                         <a href="#">肿瘤科2</a>
  470.                         <a href="#">肿瘤科3</a>
  471.                         <a href="#">肿瘤科4</a>
  472.                         <a href="#">肿瘤科5</a>
  473.                         <a href="#">肿瘤科6</a>
  474.                         <a href="#">肿瘤科7</a>
  475.                         <a href="#">肿瘤科8</a>
  476.                         <a href="#">肿瘤科9</a>
  477.                         <a href="#">肿瘤科10</a>
  478.                         <a href="#">肿瘤科11</a>
  479.                         <a href="#">肿瘤科12</a>
  480.                         <a href="#">肿瘤科13</a>
  481.                         <a href="#">肿瘤科14</a>
  482.                     </div>
  483.                 </div>
  484.                 <!-- 其他科室 -->
  485.                 <div class="sub_menu sub_menu_qtks">
  486.                     <h4>其他科室</h4>
  487.                     <div>
  488.                         <a href="#">其他科室1</a>
  489.                         <a href="#">其他科室2</a>
  490.                         <a href="#">其他科室3</a>
  491.                         <a href="#">其他科室4</a>
  492.                         <a href="#">其他科室5</a>
  493.                         <a href="#">其他科室6</a>
  494.                         <a href="#">其他科室7</a>
  495.                         <a href="#">其他科室8</a>
  496.                         <a href="#">其他科室9</a>
  497.                         <a href="#">其他科室10</a>
  498.                         <a href="#">其他科室11</a>
  499.                         <a href="#">其他科室12</a>
  500.                         <a href="#">其他科室13</a>
  501.                         <a href="#">其他科室14</a>
  502.                     </div>
  503.                     <h4>其他科室常见</h4>
  504.                     <div>
  505.                         <a href="#">其他科室1</a>
  506.                         <a href="#">其他科室2</a>
  507.                         <a href="#">其他科室3</a>
  508.                         <a href="#">其他科室4</a>
  509.                         <a href="#">其他科室5</a>
  510.                         <a href="#">其他科室6</a>
  511.                         <a href="#">其他科室7</a>
  512.                         <a href="#">其他科室8</a>
  513.                         <a href="#">其他科室9</a>
  514.                         <a href="#">其他科室10</a>
  515.                         <a href="#">其他科室11</a>
  516.                         <a href="#">其他科室12</a>
  517.                         <a href="#">其他科室13</a>
  518.                         <a href="#">其他科室14</a>
  519.                     </div>
  520.                 </div>
  521.             </div>
  522.             <!-- 轮播区域 -->
  523.             <div class="banner_content" id="banner_content">
  524.                 <div class="banner" id="banner">
  525.                     <a href="#">
  526.                         <div class="banner-slide slide1 slide-active"></div>
  527.                     </a>
  528.                     <a href="#">
  529.                         <div class="banner-slide slide2"></div>
  530.                     </a>
  531.                     <a href="#">
  532.                         <div class="banner-slide slide3"></div>
  533.                     </a>
  534.                 </div>
  535.                 <a href="#" class="button prev" id="prev"></a>
  536.                 <a href="#" class="button next" id="next"></a>
  537.                 <div class="dots" id="dots">
  538.                     <span class="active"></span>
  539.                     <span ></span>
  540.                     <span ></span>
  541.                 </div>
  542.             </div>
  543.             <!-- 详细信息 -->
  544.             <div class="information_content">
  545.                 <div class="information">
  546.                     <nav>
  547.                         <span id="yy">医院</span>
  548.                         <span id="ks">科室</span>
  549.                     </nav>
  550.                     <!-- 医院 -->
  551.                     <div class="information_yy" id="page_yy">
  552.                         <nav id="bjdq">
  553.                             <span id="info_yy_all">全部</span>
  554.                             <span id="info_yy_dcq">东城区</span>
  555.                             <span id="info_yy_xcq">西城区</span>
  556.                             <span id="info_yy_cyq">朝阳区</span>
  557.                             <span id="info_yy_ftq">丰台区</span>
  558.                             <span id="info_yy_sjsq">石景山区</span>
  559.                             <span id="info_yy_hdq">海淀区</span>
  560.                             <span id="info_yy_mtgq">门头沟区</span>
  561.                             <span id="info_yy_fsq">房山区</span>
  562.                             <span id="info_yy_qt">其他</span>
  563.                         </nav>
  564.                         <div>
  565.                             <!-- “全部”标签下的页面 -->
  566.                             <div class="info_yy_diqu info_yy_all" style="display: block;">
  567.                                 <div class="info_yy_all_img">
  568.                                     <img src="img/hospital-1.jpg">
  569.                                     <h6>北京协和医院</h6>
  570.                                     <small>[三级甲等]</small>
  571.                                     <p>电话：东苑咨询台：010-69155564</p>
  572.                                     <span>地址：[东苑]北京市东城区帅府园一号[西苑]北京市西城区</span>
  573.                                 </div>
  574.                                 <div class="info_yy_all_img">
  575.                                     <img src="img/hospital-2.jpg">
  576.                                     <h6>北京大学第一医院</h6>
  577.                                     <small>[三级甲等]</small>
  578.                                     <p>电话：010-8352211</p>
  579.                                     <span>地址：北京市西城区西什库大街八号</span>
  580.                                 </div>
  581.                                 <div class="info_yy_all_img">
  582.                                     <img src="img/hospital-3.jpg">
  583.                                     <h6>北京大学人民医院</h6>
  584.                                     <small>[三级甲等]</small>
  585.                                     <p>电话：010-88325141</p>
  586.                                     <span>地址：北京市西城区西直门南大街11号</span>
  587.                                 </div>
  588.                                 <div class="info_yy_all_img">
  589.                                     <img src="img/hospital-4.jpg">
  590.                                     <h6>北京大学第三医院</h6>
  591.                                     <small>[三级甲等]</small>
  592.                                     <p>电话：010-82266699</p>
  593.                                     <span>地址：北京市海淀区花园北路49号；[第二门诊部]北京市海淀区...</span>
  594.                                 </div>
  595.                                 <div class="info_yy_all_a_all">
  596.                                     <div class="info_yy_all_a">
  597.                                         <a href="#">中国医学科学院肿瘤医院</a>
  598.                                         <small>[三级甲等]</small>
  599.                                     </div>
  600.                                     <div class="info_yy_all_a">
  601.                                         <a href="#">中国医学院科学院医院</a>
  602.                                         <small>[三级甲等]</small>
  603.                                     </div>
  604.                                     <div class="info_yy_all_a">
  605.                                         <a href="#">首都医科大学附属北京天坛医院</a>
  606.                                         <small>[三级甲等]</small>
  607.                                     </div>
  608.                                     <div class="info_yy_all_a">
  609.                                         <a href="#">首都医科大学附属北京安贞医院</a>
  610.                                         <small>[三级甲等]</small>
  611.                                     </div>
  612.                                     <div class="info_yy_all_a">
  613.                                         <a href="#">首都医科大学宣武医院</a>
  614.                                         <small>[三级甲等]</small>
  615.                                     </div>
  616.                                     <div class="info_yy_all_a">
  617.                                         <a href="#">首都医科大学附属北京同仁医院</a>
  618.                                         <small>[三级甲等]</small>
  619.                                     </div>
  620.                                 </div>
  621.                                 <a href="#">更多医院</a>
  622.                             </div>
  623.                             <div class="info_yy_diqu info_yy_dcq">东城区</div>
  624.                             <div class="info_yy_diqu info_yy_xcq">西城区</div>
  625.                             <div class="info_yy_diqu info_yy_cyq">朝阳区</div>
  626.                             <div class="info_yy_diqu info_yy_ftq">丰台区</div>
  627.                             <div class="info_yy_diqu info_yy_sjsq">石景山区</div>
  628.                             <div class="info_yy_diqu info_yy_hdq">海淀区</div>
  629.                             <div class="info_yy_diqu info_yy_mtgq">门头沟区</div>
  630.                             <div class="info_yy_diqu info_yy_fsq">房山区</div>
  631.                             <div class="info_yy_diqu info_yy_qt">其他</div>
  632.                         </div>
  633.                     </div>
  634.                     <!-- 科室 -->
  635.                     <div id="page_ks" style="display: none;height: 392.39px;">科室</div>
  636.                 </div>
  637.             </div>
  638.             <!-- 快速预约 -->
  639.             <div class="ksyy">
  640.                 <h3>快速预约</h3>
  641.                 <div class="ksyy_input">
  642.                     <select class="ksyy_select" id="ksyy_dq">
  643.                         <option value="0">请选择地区</option>
  644.                         <option value="1">东城区</option>
  645.                         <option value="2">西城区</option>
  646.                         <option value="3">朝阳区</option>
  647.                         <option value="4">丰台区</option>
  648.                         <option value="5">石景山区</option>
  649.                         <option value="6">海淀区</option>
  650.                         <option value="7">门头沟区</option>
  651.                         <option value="8">房山区</option>
  652.                         <option value="9">其他</option>
  653.                     </select>
  654.                     <select class="ksyy_select" id="ksyy_dj">
  655.                         <option value="0">请选择等级</option>
  656.                     </select>
  657.                     <select class="ksyy_select" id="ksyy_yy">
  658.                         <option value="0">请选择医院</option>
  659.                     </select>
  660.                     <select class="ksyy_select" id="ksyy_bm">
  661.                         <option value="0">请选择部门</option>
  662.                     </select>
  663.                 </div>
  664.                 <div class="ksyy_button">快速查询</div>
  665.             </div>
  666.             <!-- 帮助中心 -->
  667.             <div class="bzzx">
  668.                 <h3>帮助中心</h3>
  669.                 <h4 class="zhzn">账号指南</h4>
  670.                 <h4 class="yyzn">预约指南</h4>
  671.                 <h4 class="zhzh">账号找回</h4>
  672.                 <h4 class="cjwt">常见问题</h4>
  673.             </div>
  674.             <!-- 最新公告 -->
  675.             <div class="zxgg">
  676.                 <nav>
  677.                     <span>最新公告</span>
  678.                     <small>更多</small>
  679.                 </nav>
  680.                 <img src="img/list-yellow.jpg">
  681.                 <div>
  682.                     <a href="#">医院特需门诊暂停更新...</a>
  683.                     <a href="#">中国联合网络通信有限公司北京市...</a>
  684.                     <a href="#">防护策略升级通知</a>
  685.                     <a href="#">首都儿科研究所附属儿童医院暂停...</a>
  686.                     <a href="#">首付医科大学附属复兴医院...</a>
  687.                     <a href="#">北京燕华医院暂停更新号源通知</a>
  688.                 </div>
  689.             </div>
  690.             <!-- 停诊公告 -->
  691.             <div class="tzgg">
  692.                 <nav>
  693.                     <span>停诊公告</span>
  694.                     <small>更多</small>
  695.                 </nav>
  696.                 <img src="img/list-blue.jpg">
  697.                 <div>
  698.                     <a href="#">民航总医院呼吸内科停诊公告</a>
  699.                     <a href="#">解放军307亿元淋巴肿瘤内科停...</a>
  700.                     <a href="#">北京市延庆区亿元神经内科门诊停...</a>
  701.                     <a href="#">空军总医院皮肤门诊停诊公告</a>
  702.                     <a href="#">北京市门头沟区医院骨外门诊停诊...</a>
  703.                     <a href="#">北京军区总医院血管外科停诊...</a>
  704.                 </div>
  705.             </div>
  706.         </div>
  707.         <!-- 第二部分 第二小组 按医院挂号 -->
  708.         <div class="page2" id="page2" style="display: none;">
  709.             <!-- 医院类型/医院等级/医院位置 -->
  710.             <div class="retrieval">
  711.                 <div>
  712.                     <label>医院类型</label>
  713.                     <div class="span1">
  714.                         <span>全部</span>
  715.                         <span>卫生部直属医院</span>
  716.                         <span>北京区县属医院</span>
  717.                         <span>其他</span>
  718.                     </div>
  719.                 </div>
  720.                 <div>
  721.                     <label>医院等级</label>
  722.                     <div class="span1">
  723.                         <span>全部</span>
  724.                         <span>三级甲等</span>
  725.                         <span>三级合格</span>
  726.                     </div>
  727.                 </div>
  728.                 <div>
  729.                     <label>医院位置</label>
  730.                     <div class="span1">
  731.                         <span>全部</span>
  732.                         <span>朝阳区</span>
  733.                         <span>西城区</span>
  734.                         <span>海淀区</span>
  735.                         <span>丰台区</span>
  736.                         <span>顺义区</span>
  737.                         <span>通州区</span>
  738.                         <span>其他</span>
  739.                     </div>
  740.                 </div>
  741.             </div>
  742.             <!-- 医院详细信息 -->
  743.             <div class="introduce">
  744.                 <div>
  745.                     <img src="img/hospital-1.jpg" class="img1">
  746.                     <h4>
  747.                         首都儿科研究所附属儿童医院<small>三级甲等</small>
  748.                     </h4>
  749.                     <aside class="introduce_text">
  750.                         <p><span class="glyphicon glyphicon-time"></span> 放号时间 14:30</p>
  751.                         <p><span class="glyphicon glyphicon-earphone"></span> 010-85695756</p>
  752.                         <p><span class="glyphicon glyphicon-map-marker"></span> 北京市朝阳区雅宝路2号</p>
  753.                     </aside>
  754.                     <img src="img/yuyue.png" class="img2">
  755.                 </div>
  756.                 <div>
  757.                     <img src="img/hospital-2.jpg" class="img1">
  758.                     <h4>
  759.                         中日友好医院<small>三级甲等</small>
  760.                     </h4>
  761.                     <aside class="introduce_text">
  762.                         <p><span class="glyphicon glyphicon-time"></span> 放号时间 8:30</p>
  763.                         <p><span class="glyphicon glyphicon-earphone"></span> 010-84205288</p>
  764.                         <p><span class="glyphicon glyphicon-map-marker"></span> 北京市朝阳区樱花东路2号</p>
  765.                     </aside>
  766.                     <img src="img/yuyue.png" class="img2">
  767.                 </div>
  768.                 <div>
  769.                     <img src="img/hospital-3.jpg" class="img1">
  770.                     <h4>
  771.                         首都医科大学附属北京友谊医院<small>三级甲等</small>
  772.                     </h4>
  773.                     <aside class="introduce_text">
  774.                         <p><span class="glyphicon glyphicon-time"></span> 放号时间 9:30</p>
  775.                         <p><span class="glyphicon glyphicon-earphone"></span> 010-63016616</p>
  776.                         <p><span class="glyphicon glyphicon-map-marker"></span> 北京市西城区永安路95号</p>
  777.                     </aside>
  778.                     <img src="img/yuyue.png" class="img2">
  779.                 </div>
  780.             </div>
  781.             <!-- 分页区 -->
  782.             <div class="page_nav">
  783.                 <ul>
  784.                     <li>
  785.                         <a href="#">首页</a>
  786.                     </li>
  787.                     <li>
  788.                         <a href="#">上一页</a>
  789.                     </li>
  790.                     <li>
  791.                         <a href="#">
  792.                             <span class="first_page">1</span>
  793.                         </a>
  794.                     </li>
  795.                     <li>
  796.                         <a href="#">2</a>
  797.                     </li>
  798.                     <li>
  799.                         <a href="#">3</a>
  800.                     </li>
  801.                     <li>
  802.                         <a href="#">4</a>
  803.                     </li>
  804.                     <li>
  805.                         <a href="#">下一页</a>
  806.                     </li>
  807.                     <li>
  808.                         <a href="#">尾页</a>
  809.                     </li>
  810.                     <li>
  811.                         <a href="#">共计4页</a>
  812.                     </li>
  813.                     <li style="margin-right: 2px;">
  814.                         <a href="#">到</a>
  815.                     </li>
  816.                     <li style="margin-right: 2px;">
  817.                         <input type="number">
  818.                     </li>
  819.                     <li>
  820.                         <a href="#">页</a>
  821.                     </li>
  822.                     <li>
  823.                         <span class="glyphicon glyphicon-search"></span>
  824.                     </li>
  825.                 </ul>
  826.             </div>
  827.         </div>
  828.     </section>
  829.     <!-- 页脚区 -->
  830.     <footer>
  831.         <img src="img/footer-logo.jpg">
  832.         <p>CopyRight &copy; 渡课IT教育 Java128班 葛嘉伟</p>
  833.     </footer>
  834. </body>
  835. </html>

CSS部分

page1

*{
    margin: 0;
    padding: 0;
}

/*页面顶部*/
/*导航栏*/
header nav{
    width: 100%;
    height: 30px;
    background-color: #eceef2;
    position: relative;
}

header nav .telephone{
    position: absolute;
    left: 20%;
    top: 5px;
}

header nav .telephone p{
    display: inline;
    color: gray;
}

header nav .login{
    position: absolute;
    right: 20%;
    top: 5px;
}

header nav .login p{
    display: inline;
    color: gray;
}

header nav .login a{
    text-decoration: none;
    color: #60bff2;
}
header nav .login a:last-child{
    margin-left: 20px;
}

/*LOGO+搜索框*/
header>div{
    margin: 0 auto;
    width: 1141.8px;
    height: 70px;
    position: relative;
}

header>div>img{
    position: absolute;
    left: 0px;
    height: 68px;
}

header>div .search{
    float: right;
    position: absolute;
    right: 0px;
    top: 20px;
    width: 326px;
    height: 38px;
    background-image: url(../img/ui-search.jpg);
}

.search a{
    text-decoration: none;
}

.search .choose{
    width: 68px;
    padding-left: 13px;
    line-height: 37px;
    color: #fff;
}

.search input{
    width: 67%;
    height: 96%;
    position: absolute;
    left: 21%;
    top: 2%;
    border: transparent;
}

.choose1{
    width: 66px;
    height: 70px;
    position: absolute;
    right: 22.6%;
    top: 83%;
    float: right;
    z-index: 10;
    padding-left: 13px;
    color: gray;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 20px 2px #ccc;
}

.choose1 p{
    margin: 2px 0px 2px;
    cursor: pointer;
}

/*页面主体*/
/*第一部分 导航栏*/
section{
    margin: 0 auto;
    width: 1141.8px;
}

section>nav{
    height: 30px;
    line-height: 30px;
    background-color: #60bff2;
    position: relative;
}

section>nav span{
    color: #fff;
    cursor: pointer;
    padding: 7px 50px;
}
section>nav>span:first-child{
    background-color: #1fa4f0;
}
section>nav>span:last-child{
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 0px 100px;
}

/*第二部分 第一小组 主页*/
/*主菜单*/
section .page1{
    position: relative;
}

section .page1 .main_menu{
    width:156px;
    height: 440px;
    background-color: #1fa4f0;
}

section .page1 .main_menu div{
    height: 40px;
    line-height: 40px;
    color: #fff;
    cursor: pointer;
    border: 1px solid #1fa4f0;
}
section .page1 .main_menu div:hover{
    color: #1fa4f0;
    background-color: #fff;
    border-right: none;
}

section .page1 .main_menu div span{
    margin-left: 3px;
    float: left;
}

section .page1 .main_menu div small{
    margin-right: 5%;
    float: right;
}

section .page1 .main_menu div img{
    float: left;
    margin-top: 8px;
    margin-left: 2px;
}

/*副菜单*/
section .page1 .sub_menu{
    float: left;
    z-index: 10;
    position: absolute;
    left: 156px;
    top: 0px;
    width: 600px;
    height: 440px;
    background-image: url("../img/bg-menu.jpg");
    background-size: 100% 100%;
    display: none;
}

section .page1 .sub_menu h4{
    margin: 5% 9% 3%;
    font-weight: bold;
    color: gray;
}

section .page1 .sub_menu div{
    margin: 0px 9% 5%;
}

section .page1 .sub_menu div a{
    margin: 10px 20px 10px 0px;
    display: inline-block;
    text-decoration: none;
    color: gray;
}

/*轮播区域*/
.banner_content{
    width: 700px;
    height: 440px;
    position: absolute;
    top: 0px;
    left: 156px;
}

.banner{
    overflow: hidden;
}

.banner-slide{
    width: 700px;
    height: 440px;
    float: left;
    background-repeat: no-repeat;
    background-size: 96% 96%;
    background-position: center;
    display: none;
}
.slide-active{
    display: block;
}

.slide1{
    background-image: url(../img/banner1.jpg);
}
.slide2{
    background-image: url(../img/banner2.jpg);
}
.slide3{
    background-image: url(../img/banner3.jpg);
}

.button{
    position: absolute;
    width: 40px;
    height: 80px;
    left: 14px;
    background: url(../img/arrow.png) center center no-repeat;
    top: 50%;
    margin-top: -40px;
    transform: rotate(180deg);
}
.button:hover{
    background-color: #333;
    opacity: .8;
}
.next{
    left: auto;
    right: 14px;
    transform: rotate(0deg);
}

/*小圆点*/
.dots{
    position: absolute;
    right: 28px;
    bottom: 24px;
    line-height: 12px;
}
.dots span{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(7,17,27,.4);
    margin-left: 8px;
    box-shadow: 0 0 0 2px rgba(255,255,255,.8) inset;
    cursor: pointer;
}
.dots span.active{
    background-color: #fff;
    box-shadow: 0 0 0 2px rgba(7,17,27,.4) inset; 
}

/*详细信息*/
.information_content{
    width: 856px;
    height: 440px;
    position: relative;
}

.information{
    width: 98.5%;
    height: 96%;
    border: 1px solid transparent;
    position: absolute;
    left: 0;
    top: 2%;
}

.information>nav{
    height: 40px;
    line-height: 40px;
    background-color: #f5f5f5;
}

.information>nav span{
    color: #fff;
    cursor: pointer;
    padding: 12px 50px;
}
.information>nav span:first-child{
    background-color: #1fa4f0;
    color: #fff;
}
.information>nav span:last-child{
    color: #1fa4f0;
}

/*医院分页*/
.information_yy nav{
    margin-top: 2px;
    margin-bottom: 10px;
    height: 30px;
    line-height: 30px;
}

.information_yy nav span{
    margin-left: 5px;
    padding: 5px 7px;
    cursor: pointer;
    color: #8a8887;
}
.information_yy nav span:first-child{
    background-color: #1fa4f0;
    color: #fff;
}

.info_yy_diqu{
    height: 352.39px;
    display: none;
}

/*“全部”标签下的页面*/
.info_yy_all .info_yy_all_img{
    margin: 5px;
    width: 400px;
    height: 100px;
    float: left;
    position: relative;
}

.info_yy_all .info_yy_all_img img{
    width: 100px;
    height: 100%;
}

.info_yy_all .info_yy_all_img h6{
    display: inline-block;
    position: absolute;
    left: 120px;
    top: 5px;
    color: #1fa4f0;
    font-size: 16px;
    cursor: pointer;
}

.info_yy_all .info_yy_all_img small{
    position: absolute;
    right: 10px;
    top: 15px;
    color: gray;
}

.info_yy_all .info_yy_all_img p{
    display: inline-block;
    color: gray;
    position: absolute;
    left: 120px;
    top: 35px;
}

.info_yy_all .info_yy_all_img span{
    display: inline-block;
    color: gray;
    position: absolute;
    left: 120px;
    top: 55px;
}

.info_yy_all_a_all{
    width: 820px;
    height: 80px;
    position: absolute;
    left: 5px;
    bottom: 35px;
}

.info_yy_all_a{
    margin: 4px;
    width: 400px;
    height: 20px;
    float: left;
    position: relative;
    line-height: 20px;
    border-bottom: 1px dashed gray;
    padding-bottom: 20px;
}

.info_yy_all_a small{
    position: absolute;
    right: 10px;
    top: 0px;
    color: gray;
}

.info_yy_all_a a{
    color: gray;
    text-decoration: none;
}

.info_yy_all>a{
    text-decoration: none;
    color: #1fa4f0;
    position: absolute;
    bottom: 5px;
    left: 45%;
}

/*快速预约*/
.ksyy{
    border: 1px solid transparent;
    width: 285.44px;
    height: 30%;
    position: absolute;
    right: 0%;
    top: 1.1%;
    background-color: #f5f5f5;
}

.ksyy h3{
    color: #fecd09;
    position: absolute;
    left: 32%;
    top: 0%;
}

.ksyy_input{
    border: 1px solid transparent;
    width: 200px;
    height: 150px;
    position: absolute;
    left: 15%;
    top: 20%;
    text-align: center;
}

.ksyy_select{
    width: 150px;
    margin: 8px 0px;

}

.ksyy_button{
    background-color: #fecd09;
    width: 100px;
    height: 30px;
    border-radius: 5px;
    color: #fff;
    position: absolute;
    left: 32%;
    bottom: 8%;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}

/*帮助中心*/
.bzzx{
    border: 1px solid transparent;
    width: 285.44px;
    height: 17.1%;
    position: absolute;
    right: 0%;
    top: 32%;
    background-color: #f5f5f5;
}

.bzzx h3{
    color: #60bff2;
    position: absolute;
    left: 32%;
    top: 0%;
}

.zhzn{
    color: #60bff2;
    position: absolute;
    left: 13%;
    top: 35%;
    cursor: pointer;
}

.yyzn{
    color: #60bff2;
    position: absolute;
    left: 60%;
    top: 35%;
    cursor: pointer;
}

.zhzh{
    color: #60bff2;
    position: absolute;
    left: 13%;
    top: 60%;
    cursor: pointer;
}

.cjwt{
    color: #60bff2;
    position: absolute;
    left: 60%;
    top: 60%;
    cursor: pointer;
}

/*最新公告*/
.zxgg{
    border: 1px solid transparent;
    width: 285.44px;
    height: 24%;
    position: absolute;
    right: 0%;
    top: 51%;
    /*background-color: yellow;*/
}

.zxgg nav{
    width: 100%;
    height: 30px;
    background-color: #f5f5f5;
    line-height: 30px;
}

.zxgg nav span{
    font-size: 16px;
    color: #fecd09;
    margin-left: 15px;
}

.zxgg nav small{
    float: right;
    margin-right: 20px;
    color: gray;
    cursor: pointer;
}

.zxgg img{
    display: inline-block;
    width: 7%;
    height: 80%;
    position: absolute;
    left: 15px;
    top: 35px;
}

.zxgg div{
    /*background-color: red;*/
    width: 80%;
    height: 80%;
    position: absolute;
    left: 35px;
    top: 35px;
}

.zxgg div a{
    display: block;
    font-size: 13px;
    margin-bottom: 11.5px;
    text-decoration: none;
    color: gray;
}

/*停诊公告*/
.tzgg{
    border: 1px solid transparent;
    width: 285.44px;
    height: 23%;
    position: absolute;
    right: 0px;
    bottom: 1%;
    /*background-color: yellow;*/
}

.tzgg nav{
    width: 100%;
    height: 30px;
    background-color: #f5f5f5;
    line-height: 30px;
}

.tzgg nav span{
    font-size: 16px;
    color: #60bff2;
    margin-left: 15px;
}

.tzgg nav small{
    float: right;
    margin-right: 20px;
    color: gray;
    cursor: pointer;
}

.tzgg img{
    display: inline-block;
    width: 7%;
    height: 80%;
    position: absolute;
    left: 15px;
    top: 35px;
}

.tzgg div{
    /*background-color: red;*/
    width: 80%;
    height: 80%;
    position: absolute;
    left: 35px;
    top: 35px;
}

.tzgg div a{
    display: block;
    font-size: 13px;
    margin-bottom: 10.3px;
    text-decoration: none;
    color: gray;
}

/*第二部分 第二小组 按医院挂号*/
.page2{
    height: 880px;
    width: 60%;
}

/*页脚区*/
footer{
    border: 1px solid transparent;
    width: 100%;
    margin-top: 20px;
    background-color: #eceef2;
    text-align: center;
}

footer p{
    color: gray;
}

footer img{
    height: 100px;
}

page2

/*医院类型/医院等级/医院位置*/
.retrieval{
    margin-top: 10px;
    width: 1141px;
    height: 210px;
    background-color: #f5f5f5;
}

.retrieval div{
    height: 70px;
    line-height: 70px;
}

.retrieval div label{
    margin-left: 50px;
    margin-right: 50px;
    color: gray;
}

.span1{
    display: inline;
}

.span1 span{
    margin-left: 25px;
    margin-right: 25px;
    color: gray;
    padding: 3px 4px;
    cursor: pointer;
    border: 1px solid lightgray;
    border-top: none;
    border-bottom: none;
}
.span1 span:first-child{
    background-color: #60bff2;
    color: #fff;
}

/*医院详细信息*/
.introduce{
    width: 1141px;
    height: 600px;
    margin-top: 20px;
}

.introduce div{
    height: 200px;
    border: 1px solid #f5f5f5;
    position: relative;
}

.introduce div .img1{
    position: absolute;
    left: 50px;
    top: 25px;
}

.introduce div h4{
    position: absolute;
    left: 280px;
    top: 30px;
}

.introduce div h4 small{
    margin-left: 20px;
    font-size: 10px;
    color: #fecd09;
}

.introduce_text{
    position: absolute;
    left: 280px;
    top: 70px;
}

.introduce div .img2{
    position: absolute;
    right: 100px;
    top: 80px;
    cursor: pointer;
}

/*分页区*/
.page_nav{
    width: 1141px;
    height: 60px;
    border: 1px solid #f5f5f5;
    margin-top: 5px;
    line-height: 60px;
}

.page_nav ul{
    margin: auto;
    overflow: hidden;
    width: 600px;
}

.page_nav ul li{
    float: left;
    margin-right: 20px;
    list-style: none;
}
.page_nav ul li a{
    text-decoration: none;
}
.page_nav ul li a:link{
    color: black;
}
.page_nav ul li a:visited{
    color: black;
}
.page_nav ul li a:hover{
    color: red;
}

.page_nav ul li .first_page{
    color: #fff;
    border-radius: 50%;
    background-color: #1fa4f0;
    padding: 3px 9px;
}

.page_nav input{
    width: 40px;
    height: 20px;
}

.page_nav span{
    cursor: pointer;
}

.glyphicon{
    color: #1fa4f0;
}

JavaScript部分

menu

// 所有菜单切换部分
$(document).ready(function(){
    // page1
    // 导航栏页面切换
    $('#qbks').click(function(){
        $('#page1').css({display:'block'});
        $('#page2').css({display:'none'});
        $(this).css({backgroundColor:'#1fa4f0'})
        .siblings().css({backgroundColor:'#60bff2'});
    });
    $('#ayygh').click(function(){
        $('#page2').css({display:'block'});
        $('#page1').css({display:'none'});
        $(this).css({backgroundColor:'#1fa4f0'})
        .siblings().css({backgroundColor:'#60bff2'});
    });
    $('#aksgh').click(function(){
        alert('此功能尚未开发 请使用前两个功能');
    });
    $('#ajbgh').click(function(){
        alert('此功能尚未开发 请使用前两个功能');
    });
    $('#zxgg_nav').click(function(){
        alert('此功能尚未开发 请使用前两个功能');
    });
    $('#shzmyy').click(function(){
        alert('此功能尚未开发 请使用前两个功能');
    });

    // 医院/科室页面切换
    $('#yy').click(function(){
        $('#page_yy').css({display:'block'});
        $('#page_ks').css({display:'none'});
        $(this).css({backgroundColor:'#1fa4f0',color:'white'})
        .siblings().css({backgroundColor:'#f5f5f5',color:'#1fa4f0'});
    });
    $('#ks').click(function(){
        $('#page_ks').css({display:'block'});
        $('#page_yy').css({display:'none'});
        $(this).css({backgroundColor:'#1fa4f0',color:'white'})
        .siblings().css({backgroundColor:'#f5f5f5',color:'#1fa4f0'});
    });

    // 北京地区页面切换
    $('#bjdq span').click(function(){
        $(this).css({backgroundColor:'#1fa4f0',color:'white'})
        .siblings().css({backgroundColor:'white',color:'#8a8887'});
    });
    $('#info_yy_all').click(function(){
        $('.info_yy_all').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#info_yy_dcq').click(function(){
        $('.info_yy_dcq').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#info_yy_xcq').click(function(){
        $('.info_yy_xcq').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#info_yy_cyq').click(function(){
        $('.info_yy_cyq').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#info_yy_ftq').click(function(){
        $('.info_yy_ftq').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#info_yy_sjsq').click(function(){
        $('.info_yy_sjsq').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#info_yy_hdq').click(function(){
        $('.info_yy_hdq').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#info_yy_mtgq').click(function(){
        $('.info_yy_mtgq').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#info_yy_fsq').click(function(){
        $('.info_yy_fsq').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#info_yy_qt').click(function(){
        $('.info_yy_qt').css({display:'block'})
        .siblings().css({display:'none'});
    });

    // 主菜单切换
    // mouseover
    $('#main_nk').mouseover(function(){
        $('.sub_menu_nk').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#main_wk').mouseover(function(){
        $('.sub_menu_wk').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#main_fck').mouseover(function(){
        $('.sub_menu_fck').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#main_szzx').mouseover(function(){
        $('.sub_menu_szzx').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#main_ek').mouseover(function(){
        $('.sub_menu_ek').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#main_gwk').mouseover(function(){
        $('.sub_menu_gwk').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#main_yk').mouseover(function(){
        $('.sub_menu_yk').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#main_kqk').mouseover(function(){
        $('.sub_menu_kqk').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#main_ebyhtjk').mouseover(function(){
        $('.sub_menu_ebyhtjk').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#main_zlk').mouseover(function(){
        $('.sub_menu_zlk').css({display:'block'})
        .siblings().css({display:'none'});
    });
    $('#main_qtks').mouseover(function(){
        $('.sub_menu_qtks').css({display:'block'})
        .siblings().css({display:'none'});
    });
    // mouseenter
    $('.sub_menu_nk').mouseenter(function(){
        $('.sub_menu_nk').css({display:'block'});
    });
    $('.sub_menu_wk').mouseenter(function(){
        $('.sub_menu_wk').css({display:'block'});
    });
    $('.sub_menu_fck').mouseenter(function(){
        $('.sub_menu_fck').css({display:'block'});
    });
    $('.sub_menu_szzx').mouseenter(function(){
        $('.sub_menu_szzx').css({display:'block'});
    });
    $('.sub_menu_ek').mouseenter(function(){
        $('.sub_menu_ek').css({display:'block'});
    });
    $('.sub_menu_gwk').mouseenter(function(){
        $('.sub_menu_gwk').css({display:'block'});
    });
    $('.sub_menu_yk').mouseenter(function(){
        $('.sub_menu_yk').css({display:'block'});
    });
    $('.sub_menu_kqk').mouseenter(function(){
        $('.sub_menu_kqk').css({display:'block'});
    });
    $('.sub_menu_ebyhtjk').mouseenter(function(){
        $('.sub_menu_ebyhtjk').css({display:'block'});
    });
    $('.sub_menu_zlk').mouseenter(function(){
        $('.sub_menu_zlk').css({display:'block'});
    });
    $('.sub_menu_qtks').mouseenter(function(){
        $('.sub_menu_qtks').css({display:'block'});
    });
    // mouseleave
    $('.sub_menu').mouseleave(function(){
        $('.sub_menu').css({display:'none'});
    });
    $('.main_menu').mouseleave(function(){
        $('.sub_menu').css({display:'none'});
    });

    // hover
    $('#main_nk').hover(function(){
        $('#main_nk>img').attr('src','img/screenshot/1_.png');
    },function(){
        $('#main_nk>img').attr('src','img/screenshot/1.png');
    });
    $('#main_wk').hover(function(){
        $('#main_wk>img').attr('src','img/screenshot/2_.png');
    },function(){
        $('#main_wk>img').attr('src','img/screenshot/2.png');
    });
    $('#main_fck').hover(function(){
        $('#main_fck>img').attr('src','img/screenshot/3_.png');
    },function(){
        $('#main_fck>img').attr('src','img/screenshot/3.png');
    });
    $('#main_szzx').hover(function(){
        $('#main_szzx>img').attr('src','img/screenshot/4_.png');
    },function(){
        $('#main_szzx>img').attr('src','img/screenshot/4.png');
    });
    $('#main_ek').hover(function(){
        $('#main_ek>img').attr('src','img/screenshot/5_.png');
    },function(){
        $('#main_ek>img').attr('src','img/screenshot/5.png');
    });
    $('#main_gwk').hover(function(){
        $('#main_gwk>img').attr('src','img/screenshot/6_.png');
    },function(){
        $('#main_gwk>img').attr('src','img/screenshot/6.png');
    });
    $('#main_yk').hover(function(){
        $('#main_yk>img').attr('src','img/screenshot/7_.png');
    },function(){
        $('#main_yk>img').attr('src','img/screenshot/7.png');
    });
    $('#main_kqk').hover(function(){
        $('#main_kqk>img').attr('src','img/screenshot/8_.png');
    },function(){
        $('#main_kqk>img').attr('src','img/screenshot/8.png');
    });
    $('#main_ebyhtjk').hover(function(){
        $('#main_ebyhtjk>img').attr('src','img/screenshot/9_.png');
    },function(){
        $('#main_ebyhtjk>img').attr('src','img/screenshot/9.png');
    });
    $('#main_zlk').hover(function(){
        $('#main_zlk>img').attr('src','img/screenshot/10_.png');
    },function(){
        $('#main_zlk>img').attr('src','img/screenshot/10.png');
    });
    $('#main_qtks').hover(function(){
        $('#main_qtks>img').attr('src','img/screenshot/11_.png');
    },function(){
        $('#main_qtks>img').attr('src','img/screenshot/11.png');
    });

    // page2
    $('.span1 span').click(function(){
        $(this).css({backgroundColor:'#60bff2',color:'white'})
        .siblings().css({backgroundColor:'#f5f5f5',color:'#8a8887'});
    });
});

lunbo

// 轮播图部分
window.onload = function(){
    //此处声明全局变量
var index = 0,//当前显示图片的索引 默认0
    timer = null,//定时器
    banner_content = byId('banner_content'),
    prev = byId('prev'),
    next = byId('next'),
    pics = byId('banner').getElementsByTagName('div'),
    dots = byId('dots').getElementsByTagName('span'),
    banner = byId('banner'),
    size = pics.length;

//封装 getElementById()
function byId(id){
    return typeof(id) === 'string' ? document.getElementById(id) : id;
}
//封装 DOM二级事件监听 一般用于非IE浏览器
function addHandler(element,type,handler){
    if (element.addEventListener) {
        element.addEventListener(type,handler,true);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type,handler);
    } else {
        element['on' + type] = null;
    }
}
//封装 切换图片的函数
function changeImg(){
    for (var i=0;i<size;i++){
        pics[i].style.display = 'none';
        //先全部删除 再找到需要的显示出来
        dots[i].className = '';
        //先全部删除小圆点 再高亮需要的
    }
    pics[index].style.display = 'block';
    dots[index].className = 'active';
}
//封装 开启自动轮播
function startAutoplay(){
    timer = setInterval(function(){
        index++;
        if (index>=size) {
            index = 0
        }
        changeImg();
    },2000)
}
//封装 清除定时器 停止定时器
function stopAutoplay(){
    //timer有值才需要清除
    if (timer) { 
        clearInterval(timer);
    }
}

//调用自动轮播
startAutoplay();
//鼠标划入container 停止轮播
addHandler(banner_content,'mouseover',stopAutoplay);
//鼠标划出container 开启轮播
addHandler(banner_content,'mouseout',startAutoplay);

//点击下一张按钮显示下一张图片
addHandler(next,'click',function(){
    //点击下一张按钮的时候，使得索引递增
    index++;
    if (index>=size) {
        index = 0;
    }
    changeImg();
});
//点击上一张按钮显示上一张图片
addHandler(prev,'click',function(){
    //单击上一张按钮，使得索引递减
    index--;
    if (index<0) {
        index = size - 1;
    }
    changeImg();
});

//点击小圆点索引切换图片
for (var d=0;d<size;d++){
    //dots[d].id = d;//默认给每一个span添加id的属性
    dots[d].setAttribute('data-id',d);//自定义属性
    addHandler(dots[d],'click',function(){
        //只能获取最后一个值 作用域问题
        index = this.getAttribute('data-id');
        changeImg();
    });
}
}

search

// 搜索框部分
$(document).ready(function(){
    var flag = true;

    // 点击事件
    $('.choose').click(function(){
        if (flag) {
            $('.choose1').slideToggle("fast");
            flag = false;
        } else {
            $('.choose1').slideToggle("fast");
            flag = true;
        }
    });

    // 修改内容
    $('#p1').click(function(){
        $('.choose').text('科室');
        $('.choose1').slideToggle("fast");
        flag = true;
    });
    $('#p2').click(function(){
        $('.choose').text('疾病');
        $('.choose1').slideToggle("fast");
        flag = true;
    });
    $('#p3').click(function(){
        $('.choose').text('医院');
        $('.choose1').slideToggle("fast");
        flag = true;
    });
});

select

// 快速预约部分的四级联动
$(document).ready(function(){
    var dj = ['',
        '<option value="1">三级甲等</option>',
        '<option value="2">三级乙等</option>',
        '<option value="3">三级丙等</option>'
        ],
        yy = ['',
        '<option value="1">北京协和医院</option>',
        '<option value="2">北京大学第一医院</option>',
        '<option value="3">北京大学人民医院</option>',
        '<option value="4">北京大学第三医院</option>',
        '<option value="5">中国医学科学院肿瘤医院</option>',
        '<option value="6">中国医学院科学院医院</option>',
        '<option value="7">首都医科大学附属北京天坛医院</option>',
        '<option value="8">首都医科大学附属北京安贞医院</option>',
        '<option value="9">首都医科大学宣武医院</option>',
        '<option value="10">首都医科大学附属北京同仁医院</option>'
        ],
        bm = ['',
        '<option value="1">部门1</option>',
        '<option value="2">部门2</option>',
        '<option value="3">部门3</option>',
        '<option value="4">部门4</option>',
        '<option value="5">部门5</option>',
        '<option value="6">部门6</option>'
        ];

    // 添加等级
    $('#ksyy_dq').change(function(){
        $('#ksyy_dj>option').remove();
        $('#ksyy_dj').append('<option value="0">请选择等级</option>');
        $('#ksyy_yy>option').remove();
        $('#ksyy_yy').append('<option value="0">请选择医院</option>');
        $('#ksyy_bm>option').remove();
        $('#ksyy_bm').append('<option value="0">请选择部门</option>');
        // console.log(typeof $(this).val());
        switch ($(this).val()) {
            case '1':
            case '2':
            case '3':
            case '4':
            case '5':
                for(var i=1;i<3;i++){
                    $('#ksyy_dj').append(dj[i]);
                }
                break;
            case '6':
            case '7':
            case '8':
            case '9':
                for(var i=1;i<4;i++){
                    $('#ksyy_dj').append(dj[i]);
                }
                break;
        }
    });

    // 添加医院
    $('#ksyy_dj').change(function(){
        $('#ksyy_yy>option').remove();
        $('#ksyy_yy').append('<option value="0">请选择医院</option>');
        $('#ksyy_bm>option').remove();
        $('#ksyy_bm').append('<option value="0">请选择部门</option>');
        switch ($(this).val()) {
            case '1':
                for(var j=1;j<yy.length+1;j++){
                    $('#ksyy_yy').append(yy[j]);
                }
                break;
            case '2':
                for(var j=1;j<6;j++){
                    $('#ksyy_yy').append(yy[j]);
                }
                break;
            case '3':
                for(var j=1;j<4;j++){
                    $('#ksyy_yy').append(yy[j]);
                }
                break;    
        }
    });

    // 添加部门
    $('#ksyy_yy').change(function(){
        $('#ksyy_bm>option').remove();
        $('#ksyy_bm').append('<option value="0">请选择部门</option>');
        switch ($(this).val()) {
            case '1':
            case '4':
            case '7':
            case '10':
                for(var k=1;k<yy.length+1;k++){
                    $('#ksyy_bm').append(bm[k]);
                }
                break;
            case '2':
            case '5':
            case '8':
                for(var k=1;k<5;k++){
                    $('#ksyy_bm').append(bm[k]);
                }
                break;
            case '3':
            case '6':
            case '9':
                for(var k=1;k<3;k++){
                    $('#ksyy_bm').append(bm[k]);
                }
                break;    
        }
    });
});