老师帮忙看下
来源：5-12 项目作业
直鹢
2019-05-03 21:33:50
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/ui.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
<!-- top区域 -->
<div class="top">
<div class="wrap">
<p class="call">010-114/116114电话预约</p>
<p class="welcome">欢迎来到城市医院预约挂号统一平台 请
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">帮助中心</a>
</p>
</div>
</div>
<!-- header区域 -->
<div class="header">
<div class="wrap clearfix">
<a href="index.html" class="logo"><img src="img/logo.png"></a>
<div class="search ui-search">
<div class="ui-search-selected">医院</div>
<div class="ui-search-select-list">
<a href="#1">科室</a>
<a href="#1">疾病</a>
<a href="#1">医院</a>
</div>
<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
<a href="#" class="ui-search-submit"> </a>
</div>
</div>
</div>
<!-- nav区域 -->
<div class="nav">
<div class="wrap">
<a href="" class="link">首页</a>
<a href="" class="link">按医院挂号</a>
<a href="" class="link">按科室挂号</a>
<a href="" class="link">按疾病挂号</a>
<a href="" class="link">最新通告</a>
<a href="" class="link right">社会知名医院</a>
</div>
</div>
<!-- 科室值班表区域 -->
<div class="company">
<div class="wrap">
<div class='company-top'>北京协和医院<a href="javascript:;">关注医院</a>
<div class='company-top-right'>
<span>等级:</span>
<span>三级甲等 </span>
<span> 区域:</span>
<span>东城区 </span>
<span> 分类:</span>
<span>中国医科院所属医院 </span>
</div>
</div>
<div class="company-main">
<div class='company-text'>
<div>[东院]北京市东城区帅府园一号[西园]北京市西城区大木仓胡同41号</div>
<div>httdiv：//www.divumch.cn/</div>
<div>东院咨询台：010-69155564；西园咨询台：010-69158010</div>
<div>东院：106,108,110,111,116,684,685到东单路口北；41,104快，814到东单路</div>
<div>口南；1,52,728,802到西单路口西；20,25,37,39，到东单路口东；</div>
<div>103,104,420,803到新东安市场；地铁1、5号线到东单。西院：68到薛才胡同东</div>
<div>口；更多乘车路线详见须知</div>
</div>
<div class='company-img'><img src="../img/map-1.png" alt=""></div>
</div>
</div>
</div>
<!-- 排班表部分html -->
<div class="content-body">
<div class="wrap">
<div class="caption">
科室排班表 <a href="index.html">返回科室力列表</a>
</div>
<div class="duty-table clearfix">
<div class="left">
<a href="#" onfocus="this.blur();"><div class="left-button"></div></a>
<ul>
<li>上午</li>
<li>下午</li>
<li>晚上</li>
</ul>
</div>
<div class="mid">
<div class="frame">
<table class="ui-table">
<tr class="row1">
<th>星期二<br>2017-2-21</th>
<th>星期二<br>2017-2-21</th>
<th>星期二<br>2017-2-21</th>
<th>星期二<br>2017-2-21</th>
<th>星期二<br>2017-2-21</th>
<th>星期二<br>2017-2-21</th>
<th>星期二<br>2017-2-21</th>
</tr>
<tr class="row2">
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr class="row3">
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
<tr class="row4">
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
<th> </th>
</tr>
</table>
</div>
</div>
<div class="right">
<a href="#" onfocus="this.blur();"><div class="right-button"></div></a>
</div>
<div class="rule">
<p>预约规则</p>
<br>
<dl>
<dt>预约周期：</dt>
<dd>7天</dd>
</dl>
<dl>
<dt>放号时间：</dt>
<dd>8:30</dd>
</dl>
<dl>
<dt>停挂时间：</dt>
<dd>下午14:00停止次日预约挂号<br>
(周五14:00后停挂至下周一)</dd>
</dl>
<dl>
<dt>退号时间：</dt>
<dd>就诊前一工作日14：00前取消</dd>
</dl>
<dl>
<dt>特殊规则：</dt>
<dd> ① 取号地点不同：西院区预约取号地点：西院区门诊楼一层大厅挂号窗口取号。东院区预约取号地点：东院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号
<br><br><br><br><br><br><br><br><br><br><br><br></dd>
</dl>
</div>
<div class="notice">
<span><img src="../img/icon-info.jpg"></span>您还没有选择就诊日期
</div>
</div>
</div>
<!-- foot -->
<div class="footer">
Copyright @ 2017慕课网版权所有
</div>
<script type="text/javascript" src="js/ui.js"></script>
</body>
</html>
/*通用样式设置*/
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
select,input{
border: none;
outline: none;
}
.wrap{
width: 1000px;
margin: 0 auto;
position: relative;
}
/* 顶部样式*/
.top{
height: 30px;
background-color: #f5f5f5;
line-height: 30px;
font-size: 13px;
color: #868686;
position: relative;
}
.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{
height: 92px;
}
.header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search{
width: 326px;
height: 38px;
position: absolute;
right: 0px;
top: 29px;
}
/* nav样式*/
.nav{
height: 36px;
background-color: #60bff2;
}
.nav .link{
display: inline-block;
float: left;
padding-left: 30px;
line-height: 36px;
color: #fff;
font-size: 16px;
min-width: 80px;
text-align: center;
}
.nav .right{
float: right;
}
/* 医院简介区域 */
.company{
height: 250px;
background-color: #f7f7f7;
}
.company>.wrap{
background: #f7f7f7;
margin:30px auto;
overflow: hidden;
}
.company .company-top{
line-height: 61px;
height:51px;
margin:0 25px;
font-size:17px;
border-bottom: 1px solid #dcdddd;
}
.company .company-top a{
color:#f29600;
font-size: 12px;
margin:12px;
}
.company-top-right{
position: absolute;
top:0;
right:30px;
font-size: 12px;
}
.company-top-right span:nth-child(2n-1){
color:blue;
}
.company-main{
margin: 12px 25px 0 25px;
background: url(../img/hospital-1.jpg)left top no-repeat;
position: relative;
}
.company-text{
width:450px;
font-size: 12px;
margin-left:220px;
line-height: 18px;
color: #888888;
}
.company-text div{
margin:8px 0 8px 0;
text-indent: 20px;
}
.company-text div:nth-child(1){
background:url(../img/icon-web.png)0 0 no-repeat;
}
.company-text div:nth-child(2){
background:url(../img/icon-web.png)0 -21px no-repeat;
}
.company-text div:nth-child(3){
background:url(../img/icon-web.png)0 -42px no-repeat;
}
.company-text div:nth-child(4){
background:url(../img/icon-web.png)0 -63px no-repeat;
}
.company-img{
position: absolute;
top:0;
right:0;
width:250px;
height:165px;
}
.company-img img{
width:250px;
height:165px;
}
/*预约栏*/
.reserve{
padding-top: 40px;
font-size: 15px;
height: 410px;
position: relative;
}
.reserve-top{
border-bottom: 2px solid #60bff2;
margin-bottom: 20px;
}
.reserve-top .reserve-top-item{
display: inline-block;
width:110px;
height:30px;
line-height: 30px;
color:#60bff2;
text-align: center;
}
.reserve-top .reserve-top-item.focus{
background:#60bff2;
color:#fff;
}
.reserve-content h2{
padding-top: 40px;
font-size: 26px;
text-align: center;
padding-bottom: 20px;
}
.reserve-content>table{
text-align: center;
padding-bottom: 100px;
position: relative;
margin: 0 auto;
width: 1000px;
}
.reserve-content-tables{
border-collapse: collapse;
border: none;
line-height: 24px;
}
.reserve-content-tables td{
border: 1px solid #efefef;
}
.reserve-content-tabletop{
height:45px;
background:#f4f6fa;
line-height: 45px;
text-indent: 30px;
}
.reserve-content-table-line{
position: relative;
border-bottom: 1px solid #f4f6fa;
}
.reserve-content-department{
width: 144px;
font-size: 14px;
color: #888888;
height:90px;
border-left: 1px solid #f4f6fa;
text-align: center;
background-color: #f2fbff;
padding-top: 8px;
}
.reserve-content-detail{
width:562px;
position: absolute;
top:0;
left:144px;
font-weight: bold;
font-size: 14px;
padding-left: 18px;
}
.reserve-content-detail a{
display: inline-block;
width:120px;
height:30px;
line-height: 30px;
margin-left: 10px;
color:#000;
}
.reserve-content{
font-size: 12px;
position: relative;
}
.reserve-content h3{
text-align: center;
}
,
.reserve-content span{
display: inline-block;
text-align: center;
}
.reserve-content p{
}
.reserve-content-side{
position: absolute;
top: 0;
right:0;
width:272px;
height:282px;
border:1px solid #f4f6fa;
}
.reserve-content-side-top{
height:40px;
line-height: 40px;
background:#f4f6fa;
font-size:14px;
text-indent:10px;
}
.reserve-content-side-top span{
color:#00b3ea;
font-size: 12px;
}
.reserve-content-side-text{
height:240px;
overflow: auto;
}
.reserve-content-side-text>div{
margin:10px;
font-size: 12px;
position: relative;
line-height: 20px;
}
.reserve-content-side-text>div>div{
width:170px;
color:#888;
margin:-20px 0 0 65px;
}
.reserve-content.hospital p{
line-height: 30px;
text-indent: 2em;
margin:20px;
}
.reserve-content.find{
margin-top:100px;
border-top:1px solid #d8d9d9;
border-bottom:1px solid #d8d9d9;
position: relative;
font-size: 26px;
}
.find-input{
text-align: center;
padding:60px 0 60px 0;
}
.find-input input{
width:200px;
height:35px;
border: 1px solid #d8d9d9;
}
.find-input button{
width:100px;
height:36.5px;
margin-left:5px;
background:#60bff2;
text-align: center;
line-height: 36.5px;
color:#fff;
border:none;
}
/*排班表格内部css*/
.content-body{
padding-bottom: 110px;
}
.caption{
padding: 50px 0 15px 0;
}
.caption a{
color: #00b3ec;
}
.duty-table{
height: 390px;
position: relative;
padding-bottom: 110px;
}
.left{
height: 325px;
width: 35px;
border-top: 1px solid #dbdede;
border-left: 1px solid #dbdede;
border-bottom: 1px solid #dbdede;
}
.left ul{
font-size: 13px;
text-align: center;
background:#f1f9ff;
height:279px;
line-height: 93px;
}
.left-button{
height: 45px;
background:url(../img/icon-scheduling-left.jpg)left no-repeat;
}
.mid{
width: 660px;
height: 325px;
position: absolute;
top: 0;
left: 35px;
overflow: hidden;
float: left;
}
.frame{
width: 660px;
position: absolute;
left: 0;
transition: all 1s;
}
.row1{
width:9999px;
height:45px;
line-height: 22.5px;
font-size: 12px;
text-align: center;
float: left;
color: #868686;
}
.row1 th{
font-weight:normal;
font-size: 12px;
}
.row2,
.row3,
.row4{
width: 9999px;
height: 93px;
position: relative;
}
.row1 th{
width: 93px;
height: 45px;
border-top: 1px solid #dbdede;
border-left: 1px solid #dbdede;
border-bottom: 1px solid #dbdede;
float: left;
}
.row2 th,
.row3 th,
.row4 th{
width: 93px;
height: 92px;
border-left: 1px solid #dbdede;
border-bottom: 1px solid #dbdede;
float:left;
}
.row th{
line-height: 92px;
text-align: center;
background: #e0effd;
color: #4eb4e0;
}
.right{
height: 325px;
width: 35px;
border-top: 1px solid #dbdede;
border-right: 1px solid #dbdede;
border-bottom: 1px solid #dbdede;
position: absolute;
top:0;
left:694px;
}
.right-button{
width: 35px;
height: 45px;
background:url(../img/icon-scheduling-right.jpg)right no-repeat;
}
.right-button,
.left-button:hover{
cursor: pointer;
}
.rule{
display: block;
width: 270px;
height: 325px;
float: left;
position: absolute;
top: 0px;
left: 732px;
margin: 21px 0 0 12px;
}
.rule p{
font-size: 16px;
}
.rule dl{
line-height: 22px;
}
.rule dt{
font-size: 13px;
}
.rule dd{
font-size: 12px;
color: #888888;
}
.notice{
height: 65px;
text-align: center;
font-size: 16px;
line-height: 65px;
color: #9f9f9f;
border: 1px solid #dbdede;
}
.notice span img{
}
/*foot部分*/
.footer{
height:70px;
background:#efeeec;
line-height: 70px;
text-align: center;
color:#acacac;
font-size:12px;
}// ui-search 定义
$.fn.UiSearh = 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-top定规
$.fn.UiReserve=function(){
var ui=$(this);
$('.reserve-top-item').on('click',function(){
var index=$(this).index();
console.log(index);
$('.reserve-top-item').removeClass('focus').eq(index).addClass('focus');
$('.reserve-content').hide().eq(index).show();
})
}
// 科室排版表初始化
// 删除原先内容，重新获取从当前日期开始的7个星期时间，然后填充表格
$.fn.uiTable = function(){
var table = $(this)
var row1 = $('.row1', table);
var row2 = $('.row2', table);
var row3 = $('.row3', table);
var row4 = $('.row4', table);
$('th', row1).remove();
$('td', row2).remove();
$('td', row3).remove();
$('td', row4).remove();
var sum = 7*7;
for(i=0; i<sum; i++){
var num = getNDate(i);
var date = num.slice(0,10);
var week = num.slice(10);
var word = '<th>'+week+'<br>'+date+'</th>';
row1.append(word);
row2.append('<td> </td>');
row3.append('<td>约满</td>');
row4.append('<td> </td>');
}
$('td', row3).addClass('tdfocus');
}
// 获取日期函数
function getNDate(num){
var date = new Date();
date.setDate(date.getDate()+num);
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var week = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()];
return year+'-'+(month<10?('0'+month):month)+'-'+(day<10?('0'+day):day)+week;
}
// 左右按键移动表格
$.fn.uiButton = function(){
var ui = $(this);
var table = $('.ui-table', ui);
var index = 0;
var width = $('.frame', ui).width();
$('.left-button', ui).on('click', function(){
index--;
if(index < 0)
index = 0;
table.css('left', index*width*-1);
return false;
});
$('.right-button', ui).on('click', function(){
index++;
if(index > 6)
index = 6;
table.css('left', index*width*-1);
return false;
});
}
//调用
$(document).ready(function(){
$('.ui-table').uiTable();
$('.duty-table').uiButton();
});
// 页面的脚本逻辑
$(function () {
$('.ui-search').UiSearh();
$('reserve-top').UiReserve();
});1为什么社会知名医院上面有个透明的边框
2.为什么预约规则没有滚动栏？
3.为什么科室排班表左右图标没有用
写回答
1回答
-
同学，你好。
问题比较多，又涉及到了大量的图片，建议你提交作业吧，批作业的老师会为你找出每一个问题，以及回答你的每一个问题，可以在作业中标注一下。我这儿要给你写的话，可能要写好几页的文档。
祝学习愉快！
0
相似问题