老师帮我看看我的科室排班表的页面布局，感觉写的有问题但是找不出哪里的问题

index.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>城市预约挂号统一平台</title>
    <link rel="stylesheet" href="css/layout.css"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="css/ui.css"/>
    <script src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
    <div id="top" class="top">
        <div class="wrap">
            <p class="call">010-114/116114电话预约</p>
            <p class="welcome">欢迎来到城市预约挂号统一平台&nbsp;&nbsp;请&nbsp;&nbsp;&nbsp;&nbsp;
 <a href="#">登录</a>&nbsp;&nbsp;
 <a href="#">注册</a>
            </p>
        </div>
    </div>

    <div id="header" class="header">
        <div class="wrap">
            <div class="logo">
                <img src="img/logo.png"/>
            </div>
            <div class="search ui-search">
                <div class="ui-search-selected">医院</div>
                <div class="ui-search-select-list">
                    <a href="#">科室</a>
                    <a href="#">疾病</a>
                    <a href="#">医院</a>
                </div>
                <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容"/>
                <a href="#" class="ui-search-submit">&nbsp;</a>
            </div>
        </div>
    </div>

    <div id="nav" class="nav">
        <div class="wrap">
            <a href="#">首页</a>
            <a href="#">按医院挂号</a>
            <a href="#">按科室挂号</a>
            <a href="#">按疾病挂号</a>
            <a href="#">最新公告</a>
        </div>
    </div>

    <div class="hospital_intro">
        <div class="wrap">
            <div class="hospital">
                <div class="hospital_caption">
                    <p class="name">北京协和医院<span class="subname">关注医院</span></p>
                    <p class="info">
                        <a href="#">等级: <span>三级甲等</span></a>
                        <a href="#">区域: <span>东城区</span></a>
                        <a href="#">分类: <span>中国医科院所属医院</span></a>
                    </p>
                </div>
                <div class="hospital_content">
                    <div class="left"></div>
                    <div class="center">
                        <div class="item">
                            <i></i><span>[东院]北京市东城区帅府园一号 [西院]北京市西城区大木胡同41号</span>
                        </div>
                        <div class="item">
                            <i></i><span>http://www.pumch.cn/</span>
                        </div>
                        <div class="item">
                            <i></i>东院咨询台:010-69155564;西院咨询台:010-69158010
                        </div>
                        <div class="item">
                            <i></i><span>东院：106,108,110,111,116,684,685到东单路口北；41,104块，814到东单路口南；1,52,728,802到东单路口西；
                            地铁1/5号线到东单。西院：68到比才胡同口；更多乘车路线详见须知</span>
                        </div>
                    </div>
                    <div class="right"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="hospital_system">
        <div class="wrap">
            <div class="hospital_system_caption">
                <a class="item item_focus" href="javascript:;">预约挂号</a>
                <a class="item " href="javascript:;">医院介绍</a>
                <a class="item " href="javascript:;">预约通知</a>
                <a class="item " href="javascript:;">停诊信息</a>
                <a class="item " href="javascript:;">查询取消</a>
            </div>
            <div class="hospital_system_content">
                <div class="item">
                    <div class="appointment_office">
                        <div class="appointment_office_caption">预约开放科室</div>
                        <div class="appointment_office_content">
                            <div class="item">
                                <div class="item_caption">2301</div>
                                <div class="item_content">
                                    <a href="#" onclick="openSche()" class="link">特殊门诊科</a>
                                    <a href="#" onclick="openSche()" class="link">特殊门诊科</a>
                                    <a href="#" onclick="openSche()" class="link">特殊门诊科</a>
                                    <a href="#" onclick="openSche()" class="link">特殊门诊科</a>
                                    <a href="#" onclick="openSche()" class="link">特殊门诊科</a>
                                    <a href="#" onclick="openSche()" class="link">特殊门诊科</a>
                                    <a href="#" onclick="openSche()" class="link">特殊门诊科</a>
                                    <a href="#" onclick="openSche()" class="link">特殊门诊科</a>
                                    <a href="#" onclick="openSche()" class="link">特殊门诊科</a>
                                    <a href="#" onclick="openSche()" class="link">特殊门诊科</a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_caption">专科</div>
                                <div class="item_content">
                                    <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">门诊麻醉科</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">门诊麻醉科</a>
                                    <a href="#" class="link">门诊麻醉科</a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_caption">内科</div>
                                <div class="item_content">
                                    <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">肿瘤内科门诊</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">肿瘤内科门诊</a>
                                    <a href="#" class="link">肿瘤内科门诊</a>
                                </div>
                            </div>
                            <div class="item">
                                <div class="item_caption">内科</div>
                                <div class="item_content">
                                    <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">特需血液内科</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">特需血液内科</a>
                                    <a href="#" class="link">特需血液内科</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="rule">
                        <div class="rule_caption">预约规则 <span>(更新时间每日8:30更新)</span></div>
                        <div class="rule_content">
                            <div class="rule_content_item">
                                <p>预约周期：<span>7天</span></p>
                            </div>
                            <div class="rule_content_item">
                                <p>放号时间：<span>8:30</span></p>
                            </div>
                            <div class="rule_content_item">
                                <p>停挂时间：<span>下午14:00停止次日预约挂号（周五14:00后停挂至下周一）</span></p>
                            </div>
                            <div class="rule_content_item">
                                <p>退号时间：<span>就诊前一工作日14:00前取消</span></p>
                            </div>
                            <div class="rule_content_item">
                                <p>特殊规则：<span>取号地点不同：西园区预约取号地点：西园区门诊一号大厅挂号窗口取号。
                                    东园区预约取号地点：东园区门诊一号大厅挂号窗口取号</span></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item" style="display: none"><img src="img/page2.jpg"/></div>
                <div class="item" style="display: none"><img src="img/page3.jpg"/></div>
                <div class="item" style="display: none"><img src="img/page4.jpg"/></div>
                <div class="item search" style="display: none">
                    <div class="search_detail">
                        <span>预约识别码&nbsp;&nbsp;:&nbsp;&nbsp;</span>
                        <input type="text"/>
                        <p class="button">
                            <a href="#">查询订单</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="footer" class="footer">
        Copyright&nbsp;&nbsp;&nbsp;&nbsp;&copy;&nbsp;&nbsp;&nbsp;&nbsp;2017慕课网版权所有
    </div>
    <script src="js/ui.js"></script>
    <script>
        function openSche(){
            window.open('scheduling.html','_self');
        }
    </script>
</body>
</html>

scheduling.html
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>城市预约挂号平台</title>
    <link rel="stylesheet" href="css/scheduling_layout.css"/>
    <link rel="stylesheet" href="css/scheduling.css"/>
    <link rel="stylesheet" href="css/ui.css"/>
    <script src="js/jquery-1.7.1.min.js"></script>
</head>
<body>
    <div id="top" class="top">
        <div class="wrap">
            <p class="call">010-114/116114电话预约</p>
            <p class="welcome">欢迎来到城市预约挂号统一平台&nbsp;&nbsp;请&nbsp;&nbsp;&nbsp;&nbsp;
 <a href="#">登录</a>&nbsp;&nbsp;
 <a href="#">注册</a>
            </p>
        </div>
    </div>

    <div id="header" class="header">
        <div class="wrap">
            <div class="logo">
                <img src="img/logo.png"/>
            </div>
            <div class="search ui-search">
                <div class="ui-search-selected">医院</div>
                <div class="ui-search-select-list">
                    <a href="#">科室</a>
                    <a href="#">疾病</a>
                    <a href="#">医院</a>
                </div>
                <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容"/>
                <a href="#" class="ui-search-submit">&nbsp;</a>
            </div>
        </div>
    </div>

    <div id="nav" class="nav">
        <div class="wrap">
            <a href="#">首页</a>
            <a href="#">按医院挂号</a>
            <a href="#">按科室挂号</a>
            <a href="#">按疾病挂号</a>
            <a href="#">最新公告</a>
        </div>
    </div>

    <div class="hospital_intro">
        <div class="wrap">
            <div class="hospital">
                <div class="hospital_caption">
                    <p class="name">北京协和医院<span class="subname">关注医院</span></p>
                    <p class="info">
                        <a href="#">等级: <span>三级甲等</span></a>
                        <a href="#">区域: <span>东城区</span></a>
                        <a href="#">分类: <span>中国医科院所属医院</span></a>
                    </p>
                </div>
                <div class="hospital_content">
                    <div class="left"></div>
                    <div class="center">
                        <div class="item">
                            <i></i><span>[东院]北京市东城区帅府园一号 [西院]北京市西城区大木胡同41号</span>
                        </div>
                        <div class="item">
                            <i></i><span>http://www.pumch.cn/</span>
                        </div>
                        <div class="item">
                            <i></i>东院咨询台:010-69155564;西院咨询台:010-69158010
                        </div>
                        <div class="item">
                            <i></i><span>东院：106,108,110,111,116,684,685到东单路口北；41,104块，814到东单路口南；1,52,728,802到东单路口西；
                                地铁1/5号线到东单。西院：68到比才胡同口；更多乘车路线详见须知</span>
                        </div>
                    </div>
                    <div class="right"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="scheduling">
        <div class="wrap">
            <div class="scheduling_caption">科室排班表<a href="#" onclick="openIndex()">返回科室列表</a></div>
            <div class="scheduling_content">
                <div class="scheduling_list">
                    <div class="scheduling_list_left">
                        <div class="date"><a href="#" class="iconfont icon_left">&#xe645;</a></div>
                        <div class="status">上午</div>
                        <div class="status">下午</div>
                        <div class="status">晚上</div>
                    </div>
                    <div class="scheduling_list_box">
                        <div class="scheduling_list_box_wrap clearfix" id="scheduling_list_box_wrap">
                            <div class="scheduling_list_box_item date">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="scheduling_list_box_item">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="scheduling_list_box_item full">
                                <div>约满</div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="scheduling_list_box_item">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                    <div class="scheduling_list_right">
                        <div class="date"><a href="#" class="iconfont icon_right">&#xe645;</a></div>
                        <div class="status"></div>
                        <div class="status"></div>
                        <div class="status"></div>
                    </div>
                </div>
                <div class="scheduling_rule">
                    <div class="scheduling_rule_caption">预约规则</div>
                    <div class="scheduling_rule_content">
                        <div class="rule_content_item">
                            <p>预约周期：<span>7天</span></p>
                        </div>
                        <div class="rule_content_item">
                            <p>放号时间：<span>8:30</span></p>
                        </div>
                        <div class="rule_content_item">
                            <p>停挂时间：<span>下午14:00停止次日预约挂号（周五14:00后停挂至下周一）</span></p>
                        </div>
                        <div class="rule_content_item">
                            <p>退号时间：<span>就诊前一工作日14:00前取消</span></p>
                        </div>
                        <div class="rule_content_item">
                            <p>特殊规则：<span>取号地点不同：西园区预约取号地点：西园区门诊一号大厅挂号窗口取号。
                                    东园区预约取号地点：东园区门诊一号大厅挂号窗口取号</span></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scheduling_tip">
                <i class="iconfont icontip">&#xe662;</i><span>您还没有选择就诊日期</span>
            </div>
        </div>
    </div>

    <div id="footer" class="footer">
        Copyright&nbsp;&nbsp;&nbsp;&nbsp;&copy;&nbsp;&nbsp;&nbsp;&nbsp;2017慕课网版权所有
    </div>
</body>
<script src="js/ui.js"></script>
<script>
    function openIndex(){
        window.open('index.html','_self');
    }

    //加载排班表数据

</script>
</html>

layout.css
/*页面布局样式*/
*{
    padding: 0;
    margin: 0;
}
.wrap{
    width: 1000px;
    margin: 0 auto;
    position: relative;
}
select,input{
    border: 0;
    outline: 0;
}
#top{
    height: 30px;
    background-color: #f5f5f5;
}
#header{
    height: 92px;
}
#nav{
    height: 35px;
    background-color: #60bff2;
}
.hospital_intro{
    height: 258px;
    margin: 30px 0 40px 0;
}
.hospital{
    height: 230px;
    background-color: #f7f7f7;
}
.hospital_system{
    height: 460px;
    margin-bottom: 80px;
}
.hospital_system_caption{
    height: 30px;
    border-bottom: 2px solid #60bff2;
    margin-bottom: 20px;
}
.hospital_system_content{
    height: 410px;
}
.appointment_office{
    width: 708px;
    height: 408px;
    border: 1px solid #f4f6fa;
    float: left;
}
.rule{
    width: 273px;
    height: 282px;
    border: 1px solid #f4f6fa;
    float: right;
}
#footer{
    height: 70px;
    background-color: #eceef2;
}

index.css
/*页面样式*/
/*top模块*/
a {
    text-decoration: none;
}

.top {
    line-height: 30px;
    color: #868686;
    font-size: 14px;
}

.top p.call {
    float: left;
    background: url("../img/icon-call.png") no-repeat 0 5px;
    text-indent: 20px;
}

.top p.welcome {
    float: right;
}

.top p.welcome a {
    color: #2da5e1;
}

/*header 模块*/
.header .logo {
    width: 350px;
    height: 58px;
    padding: 20px 15px;
}

.header .logo img {
    width: 100%;
    height: 100%;
}

.header .search {
    width: 328px;
    height: 38px;
    background-color: orange;
    position: absolute;
    right: 0;
    top: 29px;
}

/*nav 模块*/
.nav {
    line-height: 35px;
}

.nav a {
    display: inline-block;
    padding-left: 53px;
    color: #fff;
}

.nav a:hover {
    color: #d7f3ff;;
}

/*hospital_intro 医院介绍*/
.hospital {
    padding: 15px 25px 20px 25px;
}

.hospital_caption {
    height: 35px;
    border-bottom: 2px solid #dcdddd;
}

.hospital_caption p {
    font-size: 16px;
}

.hospital_caption .subname {
    font-size: 14px;
    color: #f29600;
    margin-left: 13px;
}

.hospital_caption p.name {
    float: left;
}

.hospital_caption p.info {
    float: right;
}

.hospital_caption p.info a {
    color: #0000ff;
    margin-right: 14px;
}

.hospital_caption p.info a:last-child {
    margin-right: 0;
}

.hospital_caption p.info span {
    color: #000;
}

.hospital_content {
    margin-top: 10px;
}

.hospital_content .left {
    width: 200px;
    height: 150px;
    background: url("../img/hospital-1.jpg");
    float: left;
}

.hospital_content .center {
    width: 447px;
    height: 157px;
    float: left;
    margin-left: 30px;
}

.center .item {
    font-size: 14px;
    color: #888888;
    margin-bottom: 18px;
}

.center .item span {
    line-height: 23px;
}

.center .item i {
    display: inline-block;
    width: 15px;
    height: 16px;
    margin-right: 15px;
}

.center .item:first-child i {
    background: url("../img/icon-web.png") 0 0;
}

.center .item:nth-child(2) i {
    background: url("../img/icon-web.png") 0 -22px;
}

.center .item:nth-child(3) i {
    background: url("../img/icon-web.png") 0 -44px;
}

.center .item:last-child i {
    background: url("../img/icon-web.png") 0 -65px;
}

.hospital_content .right {
    float: right;
    width: 250px;
    height: 165px;
    background: url("../img/map-1.png");
}

/*hospital_system 医院体系*/
.hospital_system_caption a {
    display: inline-block;
    width: 110px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #60bff2;
}

.hospital_system_caption a.item_focus {
    background-color: #60bff2;
    color: #fff;
}

.hospital_system_content .search {
    margin-top: 90px;
    height: 200px;
    border: 1px solid #DCDDDD;
    position: relative;
}

.search .search_detail {
    width: 420px;
    height: 30px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 50%;
    margin-left: -210px;
}

.search_detail span {
    float: left;
}

.search_detail input {
    height: 30px;
    width: 194px;
    border: 1px solid #dcdcdc;
    float: left;
}

.search_detail .button {
    float: left;
    width: 110px;
    height: 30px;
    margin-left: 5px;
    line-height: 30px;
    text-align: center;
    background-color: #00B3EC;
}

.search_detail .button a {
    color: #fff;
}

.appointment_office_caption {
    height: 44px;
    background-color: #f4f6fa;
    line-height: 40px;
    padding-left: 30px;
}

.appointment_office_content .item {
    height: 90px;
    border-bottom: 1px solid #f4f6fa;
}

.appointment_office_content .item_caption {
    width: 144px;
    height: 80px;
    background-color: #f2fbff;
    float: left;
    text-align: center;
    padding-top: 10px;
}

.appointment_office_content .item_content {
    width: 560px;
    height: 100%;
    float: left;
}
.appointment_office_content .item_content .link{
    display: inline-block;
    width: 100px;
    height: 27px;
    margin-left: 20px;
    padding-top: 3px;
    color: #4c4948;
}
.rule {
    overflow: auto;
}

.rule_caption {
    height: 40px;
    padding-left: 10px;
    background-color: #f4f6fa;
    line-height: 40px;
    color: #606060;
}

.rule_caption span {
    font-size: 14px;
    color: #00b3ea;
}

.rule_content {
    height: 244px;
    padding: 15px 10px;
}

.rule_content .rule_content_item {
    line-height: 22px;
    margin-bottom: 10px;
}

.rule_content .rule_content_item p {
    width: 100%;
    color: #555555;
}

.rule_content .rule_content_item span {
    color: #888888;
}

/*footer 模块*/
.footer {
    text-align: center;
    line-height: 70px;
    color: #acacac;
    font-size: 14px;
}

ui.css
/* 搜索 */
.ui-search{
    background: url(../img/ui-search.jpg) center no-repeat;
    font-size: 14px;
    color: #fff;
    position: relative;
}
.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: 7px;
    left: 73px;
    line-height: 26px;
    font-size: 13px;
    color: #A5A2A2;

}
.ui-search-submit{
    display: block;
    position: absolute;
    right: 0;
    top: 1px;
    width: 40px;
    height: 36px;
}

scheduling_layout.css
/*科室排班表页面布局样式*/
* {
    padding: 0;
    margin: 0;
}

.wrap {
    width: 1000px;
    margin: 0 auto;
    position: relative;
}

select, input {
    border: 0;
    outline: 0;
}
.clearfix:after{
    content: '';
    display: block;
    clear: both;
    zoom: 1;
}
/*iconfont 字体*/
@font-face {
    font-family: 'iconfont';
    src: url('../fonts/iconfont.eot');
    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/iconfont.woff') format('woff'),
    url('../fonts/iconfont.ttf') format('truetype'),
    url('../fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont {
    font-family: "iconfont" !important;
    font-size: 40px;
    color: #01b3f1;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon_left{
    transform: rotate(180deg);
}
.icontip{
    font-size: 30px;
    vertical-align: middle;
    margin-right: 5px;
    color: #a5a5a5;
}
#top {
    height: 30px;
    background-color: #f5f5f5;
}

#header {
    height: 92px;
}

#nav {
    height: 35px;
    background-color: #60bff2;
}

.hospital_intro {
    height: 258px;
    margin: 30px 0 40px 0;
}

.hospital {
    height: 230px;
    background-color: #f7f7f7;
}

.scheduling {
    height: 425px;
    margin-bottom: 110px;
}
.scheduling_content{
    height: 325px;
}
.scheduling_list{
    width: 752px;
    height: 100%;
    float: left;
    border: 1px solid #dcdddd;
}
.scheduling_rule{
    width: 244px;
    height: 100%;
    float: right;
    border: 1px solid #dcdddd;
}
.scheduling_tip{
    width: 100%;
    height: 65px;
    border: 1px solid #dcdddd;
}



#footer {
    height: 70px;
    background-color: #eceef2;
}

scheduling.css
/*科室排班表页面样式 */
/*top模块*/
a {
    text-decoration: none;
}

.top {
    line-height: 30px;
    color: #868686;
    font-size: 14px;
}

.top p.call {
    float: left;
    background: url("../img/icon-call.png") no-repeat 0 5px;
    text-indent: 20px;
}

.top p.welcome {
    float: right;
}

.top p.welcome a {
    color: #2da5e1;
}

/*header 模块*/
.header .logo {
    width: 350px;
    height: 58px;
    padding: 20px 15px;
}

.header .logo img {
    width: 100%;
    height: 100%;
}

.header .search {
    width: 328px;
    height: 38px;
    background-color: orange;
    position: absolute;
    right: 0;
    top: 29px;
}

/*nav 模块*/
.nav {
    line-height: 35px;
}

.nav a {
    display: inline-block;
    padding-left: 53px;
    color: #fff;
}

.nav a:hover {
    color: #d7f3ff;;
}

/*hospital_intro 医院介绍*/
.hospital {
    padding: 15px 25px 20px 25px;
}

.hospital_caption {
    height: 35px;
    border-bottom: 2px solid #dcdddd;
}

.hospital_caption p {
    font-size: 16px;
}

.hospital_caption .subname {
    font-size: 14px;
    color: #f29600;
    margin-left: 13px;
}

.hospital_caption p.name {
    float: left;
}

.hospital_caption p.info {
    float: right;
}

.hospital_caption p.info a {
    color: #0000ff;
    margin-right: 14px;
}

.hospital_caption p.info a:last-child {
    margin-right: 0;
}

.hospital_caption p.info span {
    color: #000;
}

.hospital_content {
    margin-top: 10px;
}

.hospital_content .left {
    width: 200px;
    height: 150px;
    background: url("../img/hospital-1.jpg");
    float: left;
}

.hospital_content .center {
    width: 447px;
    height: 157px;
    float: left;
    margin-left: 30px;
}

.center .item {
    font-size: 14px;
    color: #888888;
    margin-bottom: 18px;
}

.center .item span {
    line-height: 23px;
}

.center .item i {
    display: inline-block;
    width: 15px;
    height: 16px;
    margin-right: 15px;
}

.center .item:first-child i {
    background: url("../img/icon-web.png") 0 0;
}

.center .item:nth-child(2) i {
    background: url("../img/icon-web.png") 0 -22px;
}

.center .item:nth-child(3) i {
    background: url("../img/icon-web.png") 0 -44px;
}

.center .item:last-child i {
    background: url("../img/icon-web.png") 0 -65px;
}

.hospital_content .right {
    float: right;
    width: 250px;
    height: 165px;
    background: url("../img/map-1.png");
}

/*scheduling 科室排班区域*/
.scheduling_caption {
    height: 33px;
    padding-left: 10px;
}

.scheduling_caption a {
    margin-left: 15px;
    color: #00b3ec;
    font-size: 14px;
}

.scheduling_list {
    position: relative;
}

.scheduling_list_left {
    float: left;
}

.scheduling_list_right {
    float: right;
}

.scheduling_list_right,
.scheduling_list_left {
    width: 35px;
    height: 100%;
    border: 1px solid #DCDDDD;
}

.scheduling_list_right .date,
.scheduling_list_left .date {
    height: 45px;
}

.scheduling_list_right .status,
.scheduling_list_left .status {
    height: 93px;
    line-height: 93px;
    background-color: #f2f8ff;
}

/*.scheduling_list_box {*/
    /*position: absolute;*/
    /*top: 0px;*/
    /*left: 36px;*/
/*}*/
.scheduling_list_box_wrap{
    position: absolute;
    top: 0px;
    left: 36px;
    width: 99999px;
    transition: all 1s;
}

.scheduling_list_box .full div{
    background-color: #e0eefd;
    color: #4ab4ed;
    text-align: center;
    line-height: 91px;
}
.scheduling_list_box .scheduling_list_box_item div {
    width: 95px;
    height: 91px;
    border: 1px solid #DCDDDD;
    float: left;
}

.scheduling_list_box .date div {
    width: 95px;
    height: 45px;
    border: 1px solid #DCDDDD;
}

.scheduling_rule {
    overflow: auto;
}

.scheduling_rule_caption {
    height: 44px;
    line-height: 44px;
    margin-left: 8px;
}

.scheduling_rule_content {
    height: 244px;
    padding: 15px 10px;
}

.rule_content_item {
    line-height: 22px;
    margin-bottom: 10px;
}

.rule_content_item p {
    width: 100%;
    color: #555555;
}

.rule_content_item span {
    color: #888888;
}

.scheduling_tip {
    line-height: 65px;
    text-align: center;
    color: #9f9f9f;
}

/*footer 模块*/
.footer {
    text-align: center;
    line-height: 70px;
    color: #acacac;
    font-size: 14px;
}

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();
        return false;
    });
}

//ui-tab定义
$.fn.UiTab=function(header,content){
    var ui=$(this);
    var tabs=$(header,ui);
    var cons=$(content,ui);

    tabs.on('click',function(){
        var index=$(this).index();
        tabs.removeClass('item_focus').eq(index).addClass('item_focus');
        cons.hide().eq(index).show();
        return false;
    })
}

//页面脚本逻辑
$(function(){
    $('.ui-search').UiSearch();
    $('.hospital_system').UiTab('.hospital_system_caption >.item','.hospital_system_content >.item');
    $('.hospital_system .appointment_office_content .item_content')
        .UiTab('.item_content .link','.section_schedule >.item');
})

天青色烟雨蒙 2019-07-18

源自：实战：挂号平台首页 5-12 项目作业

收起

2回答

好帮手慕夭夭 2019-07-18 19:29:09

你好同学，参考如下调整：

科室排班分成左中右三部分，所以三部分都应该设置浮动，才会显示在一行。中间的盒子应该设置固定宽度，然后设置超出隐藏，这样让它默认显示出第一个星期的排班

设置如下：

上面设置父元素为参照点，所以子元素位置调整一下：

调整之后布局就出来了哦，如下

祝学习愉快，望采纳。

收起回答

好帮手慕夭夭 2019-07-18 17:02:59

你好同学，科室排班表是如下区域：

同学给出的代码是如下：

是同学粘贴错了代码还是想要问预约开放科室的布局？把标题背景色去掉即可，这一块区域布局做的很不错了，不用修改哦。

如果是粘贴错了代码，请同学重新上传一下。祝学习愉快！望采纳。

收起回答

提问者天青色烟雨蒙 #1

是点击门诊链接之后，显示的科室排班表的布局，在scheduling.html，其中的scheduling_list_box_wrap是包裹动态的js添加的排班表的数据，我是想利用它的width设置它的left值，但是页面布局出来的效果不是很理想，所以想问老师该怎么解决

2019-07-18 18:36:13