hi ， 小伙伴们，通过学习课程，我们了解了整个web项目开发中的流程，知道了整个过程中所涉及到的角色。现在希望大家运用所学知识，完成页面的编写。

        网页效果可参考图片素材中的大图“作业-医院详情 大图”和“作业-医院详情 分页大图”。

一、语言和环境

1、实现语言

HTML、CSS、jQuery

2、环境要求及开发工具

建议 Sublime text

二、网页整体要求：

1、要求页面整洁、美观，与提供的页面效果图、结构保持一致，

2、要求代码书写、命名符合规范，在代码中添加必要的注释。

3、网页文件夹管理，样式、脚本、图片等资料独立文件夹

4、网页内容居中显示。

三、具体要求：

1、项目由两个页面组成，单击第一个页面（hospital_detail）中门诊科室的任意一项可跳转到第二个页面（scheduling）；单击第二个页面中的“返回科室列表”，可返回第一个页面

2、两个页面的top区域、header区域、nav区域、医院简绍区域、footer区域布局样式一样；

3、top区域：

（1）  背景颜色为：#f5f5f5;宽度要占屏幕宽度的100%；

（2）  文字垂直居中显示；

（3）  分为左侧电话信息和右侧导航

（4）  右侧导航的登录、注册、帮助中心项，鼠标移入时变成小手状

4、header区域：

（1）  左侧为logo，鼠标移入时变成小手状

（2）  右侧为搜索；搜索部分可分为3个部分，左侧为按钮；中间为搜索框，要有提示文字；右侧为搜索按钮

（3）  左侧按钮，默认显示医院，当鼠标单击时出现下拉列表，单击下拉列表的某一项时，按钮中字相应的发生改变

（4）  当鼠标移入下拉列表的某一项时，背景颜色变为：#ebeef5

（5）  搜索按钮，要有搜索的图标，鼠标移入时变成小手状

5、nav区域：

（1）  背景颜色为：#60bff2，宽度要占屏幕宽度的100%；

（2）  导航项分左右两部分，左侧5项，右侧一项；

（3）  鼠标移入每一项时，背景颜色变为#87CEEB，且鼠标变成小手状；

（4）  各项要实现垂直居中。

6、医院简绍区域：

（1）  背景颜色为：#F7F7F7；

（2）  整个区域可分为上下两个部分完成，上部分左侧为医院的名字，右侧为医院的分类等；

（3）  下部分，与上部分之间有横线分割，左侧为医院图片，中间为医院的简介，以及对应的小图标，右侧为医院地址的定位图片；

7、医院体系区域：

（1）  此部分为一个选项卡，默认显示“预约挂号”部分的内容；

（2）  预约挂号部分；内容中的每一项科室单击时都可跳转到scheduling页面；

（3）  单击选项卡的其他选项时，下边区域显示对应的内容，其他内容隐藏

（4）  被单击的选项卡字体及背景颜色发生改变，背景变为：#60bff2；字体变为白色。且鼠标移入时变成小手状；

（5）  “查询取消”按钮所对应的页面，查询订单按钮，鼠标移入时变成小手状

8、科室排班区域：

（1）  整个区域可分为上中下三部分；上部分为标题“科室排班表”以及“返回科室列表”的按钮；单击按钮课跳转到hospital_detail页面

（2）  中间部分，左侧为排班情况分布，右侧为预约规则显示

（3）  排班情况表，水平方向有左右两个箭头状的按钮，单击时，可以变换日期，点击左侧箭头按钮切换为上一个星期的预约情况，点击右侧箭头按钮切换为下一个星期的预约情况。

（4）  获取的排班（即星期的显示）是从今天（获取当前日期）之后7个星期的排班

（5）  水平方向是为期一个星期的显示；垂直分上午、中午、晚上显示

（6）  排班的表格及日期的显示从js中导入。

（7）  预约规则，垂直方向上要有滚动条，内容超出部分使用滚动条显示

（8）  下部分是“没有就诊日期”的提示，以及在文字前面添加警告小图标。

9、footer区域布局：

（1）  背景颜色:#eceef2 ; 文字颜色为：#acacac；宽度要占屏幕宽度的100%；

（2）  版权声明信息相对于footer区域在垂直与水平方向上都要实现居中；

规范【4分】

• 网页文件夹管理，图片、css、js资料独立文件夹

• 代码规范及添加适量注释

网页整体【5分】

页面整体结构使用HTML布局，网页居中显示，每个区域背景色贯穿整个页面。

top区域【5分】

• 与效果图结构保持一致；

• 背景颜色为#f5f5f5;文字垂直居中显示；

• 左侧有电话图片，以及联系电话；

• 右侧导航的登录、注册、帮助中心项，鼠标移入时变成小手状

header区域【11分】

• 与效果图结构保持一致；

• 左侧为logo，鼠标移入有链接状态；

• 右侧为搜索部分，搜索部分可分为3个部分，左侧为按钮，默认显示医院，当鼠标单击时出现下拉列表，单击下拉列表的某一项时，按钮中字相应的发生改变；当鼠标移入下拉列表的某一项时，背景颜色变为：#ebeef5；中间为搜索框，要有提示文字；右侧为搜索按钮，要有搜索的图标，鼠标移入时要有链接状态；

nav区域【6分】

• 与效果图结构保持一致；

• 背景颜色为：#60bff2；

• 文字分左右两部分，左侧5项，右侧一项；字体垂直居中，鼠标移入每一项时，背景颜色变为#87CEEB；且鼠标变成小手状；各项要实现垂直居中

医院简介区域【5分】

• 与效果图结构保持一致；背景颜色为：#F7F7F7；

• 整体可分为上下两部分，上部分左侧为医院的名字，右侧为医院的分类等。下部分，与上部分之间有横线分割，左侧为医院图片，中间为医院的简介，要有小图标，右侧为医院地址的图片；

医院体系区域【23分】

• 与效果图保持一致；此部分为一个选项卡，默认显示预约挂号部分，预约挂号部分；

• 内容中的每一项科室单击时都可跳转到scheduling页面，鼠标移入时变成小手状；

• 单击其他选项时，下边区域显示对应的内容，其他内容隐藏；

• 被单击的选项卡字体及背景颜色发生改变；背景变为：#60bff2；字体变为白色；

• “查询取消”艘所对应的页面，搜索部分上下要有横线，按钮要没有边框，且鼠标移入时变成小手状

科室排班区域【39分】

• 返回科室列表按钮与效果图保持一致；单击第二个页面（scheduling）中的“返回科室列表”,可跳转到第一个页面hospital_detail）

• 左侧与效果图保持一致；水平方向是为期一个星期的显示；垂直分上午、中午、晚上显示；水平方向有左右两个箭头状的按钮，单击时，可以变换日期，点击左侧箭头按钮切换为上一个星期的预约情况，点击右侧箭头按钮切换为下一个星期的预约情况。获取的排班（即星期的显示）是从今天（获取当前日期）之后7个星期的排班；排班的表格及日期的显示，要在js中导入

• 右侧与效果图保持一致；预约规则的显示，这块内容在垂直方向上要有滚动条，内容超出部分使用滚动条显示。底部显示没有选择日期的提示，以及图片，内容要居中显示；

• 下部分与效果图保持一致；下部分是“没有就诊日期”的提示，以及在文字前面添加警告小图标

footer区域【2分】

• 与效果图保持一致；背景颜色:#eceef2 ; 文字颜色为：#acacac；

• 宽度要占屏幕宽度的100%；

• 版权声明信息在垂直与水平方向上都要实现居中；