从预约挂号切换到科室排班表,前面的隐藏了但是科室排班表显示不出来了css
来源:6-6 作业题
qq_触掱钶忣倖福_0
2019-03-05 16:21:44
*{
margin: 0px;
padding: 0px;
}
a{
text-decoration: none;
}
input{
background:none;
outline:none;
border:0px;
}
.cleardisplay{
display: none;
}
.itemdisplay{
display: block;
}
.clearfix:after{
content: ' ';
display: block;
height: 0;
line-height: 0;
clear: both;
zoom:1;
}
.wrap{
width: 1000px;
margin:0 auto;
position: relative;
}
/*top区*/
.top{
background-color: #f5f5f5;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 15px;
}
.top p{
padding: 0;
margin: 0;
}
.top .call{
float: left;
padding-left: 20px;
color: #868686;
background:url(img/icon-call.png) center left no-repeat;
}
.top .wel span{
color: #868686;
}
.top .wel{
float: right;
}
.top a{
padding-left: 10px;
color:#2da5e1;
}
/*header区*/
.header .logo{
width: 400px;
height: 80px;
padding: 10px 0;
}
.header .logo img{
width: 400px;
height:80px;
}
.header .search{
width: 330px;
height: 40px;
position: absolute;
right: 0;
top: 30px;
}
/*nav区*/
.nav{
background-color: #60bff2;
width: 100%;
}
.nav .link{
display: inline-block;
line-height: 40px;
color: white;
font-size: 20px;
padding-left: 30px;
text-align: center;
}
.nav .right{
float: right;
padding-right:10px;
}
.nav a:hover{
color: #d7f3ff
}
/*医院简介区*/
.conttop .wrap{
background-color: #F7F7F7;
margin-top: 30px;
overflow: hidden;
}
.conttop .contleft{
float: left;
padding-left: 30px;
margin-top: 10px;
}
.conttop .contleft span{
font-size: 20px;
}
.conttop .contleft a{
font-size: 15px;
color: orange;
}
.conttop .contright{
float: right;
padding-right: 30px;
margin-top: 10px;
}
.conttop .contright .cr{
color: blue;
font-size: 15px;
}
/*下划线*/
.conttop .hr{
border-bottom: 2px #868686 solid;
margin:50px 30px 10px 30px;
}
/*图,文,地图*/
.conttop .left,
.conttop .middle,
.conttop .right{
float: left;
margin-bottom: 10px;
margin-top: 10px;
}
.conttop .left{
width: 200px;
height:200px;
padding-left: 30px;
}
.conttop .left img{
width: 200px;
height: 180px;
}
.conttop .middle{
width:430px;
padding-left: 40px;
color: #868686;
font-size: 15px;
}
.conttop .middle .frist {
background:url(img/qq1.png) no-repeat left;
padding-left: 30px;
}
.conttop .middle .sce{
background:url(img/qq2.png) left no-repeat;
padding-left: 30px;
}
.conttop .middle .thr{
background:url(img/qq3.png) left no-repeat;
padding-left: 30px;
}
.conttop .middle .fou{
background:url(img/qq4.png) left no-repeat;
padding-left: 30px;
}
.conttop .right{
width: 250px;
height: 180px;
padding-left: 30px;
}
.conttop .right img{
width: 250px;
height: 180px;
}
/*医院体系区*/
.contbottom{
background: none;
margin-top: 30px;
overflow: hidden;
position: relative;
}
.contbottom .connav{
border-bottom: 2px #2da5e1 solid;
}
.contbottom .connav .item{
background-color: #60bff2;
color: white;
}
.contbottom .connav a{
color: #2da5e1;
font-size: 18px;
display:inline-block;
width: 100px;
text-align: center;
margin-right: 20px;
}
.contbottom .connav a:hover{
color: white;
background-color:#2da5e1;
}
.contbottom .yuyue{
height: 400px;
}
.contbottom .yuyue .table{
margin-top: 20px;
width: 700px;
overflow: hidden;
}
.contbottom .yuyue .table table{
border:1px solid #f5f5f5;
}
.contbottom .table .table-big caption{
text-align: left;
background-color: #f5f5f5;
height: 50px;
font-size: 20px;
line-height: 50px;
padding-left: 30px;
}
.contbottom .table .table-big tr td{
width: 100px;
line-height: 20px;
font-size: 15px;
}
.contbottom .table .table-big tr td a{
padding-left: 10px;
}
.contbottom .table .table-big .rowspan{
background-color: #f2fbff;
color: #a2a5a6;
vertical-align: top;
text-align: center;
}
.contbottom .table .table-big tr td a{
color: black;
font-size: 13px;
}
.contbottom .table .tda{
background-color: #F7F7F7;
}
.contbottom .table,
.contbottom .rtable{
float: left;
}
.contbottom .yuyue .rtable{
width: 280px;
margin-left: 20px;
margin-top: 20px;
}
.contbottom .yuyue .rtable .rtable-p{
background-color:#f5f5f5;
height: 50px;
padding-left: 10px;
}
.contbottom .yuyue .rtable .rtable-p .rtable-p-span1{
font-size: 20px;
line-height: 50px;
}
.contbottom .yuyue .rtable .rtable-div{
width: 280px;
height:200px;
overflow-y: scroll;
border: 2px solid #f5f5f5;
}
.contbottom .yuyue .rtable .rtable-div .rtable-div-list{
padding-top: 10px;
padding-left: 10px;
}
.contbottom .yuyue .rtable .rtable-div .rtable-div-list span{
font-size: 15px;
}
.contbottom .yuyue .rtable .rtable-div .rtable-p-span3{
display: inline-block;
color: #868686;
font-size: 12px;
}
/*医院介绍*/
.contbottom .jieshao{
padding-top: 20px;
}
/*-预约须知*/
.contbottom .xuzhi{
}
.contbottom .xuzhi h2{
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
/*停诊信息*/
.contbottom .tingzhen{
}
.contbottom .tingzhen h4{
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
}
.contbottom .tingzhen .tingzhen-table{
border: 1px solid #f5f5f5;
text-align: center;
}
/*查询取消*/
.contbottom .chaxun{
}
.contbottom .chaxun .hr-top{
border-bottom: 1px solid #f5f5f5;
margin-top: 50px;
margin-bottom: 80px;
}
.contbottom .chaxun .hr-buttom{
border-bottom: 1px solid #f5f5f5;
margin-bottom: 50px;
margin-top: 80px;
}
.contbottom .chaxun .chaxun-search {
padding-left: 300px
}
.contbottom .chaxun .chaxun-search span{
font-size: 18px;
}
.contbottom .chaxun .chaxun-search .input1{
border:1px solid #f5f5f5;
width: 180px;
height: 30px;
}
.contbottom .chaxun .chaxun-search .input2{
background-color: #60bff2;
font-size: 15px;
color: white;
text-align: center;
line-height: 30px;
width: 100px;
}
/*科室排班表*/
.fixed{
margin-top: 30px;
}
.fixed .fixed-nav{
margin-bottom: 20px;
margin-left: 8px;
}
.fixed .fixed-nav span{
font-size: 18px;
}
.fixed .fixed-nav a{
font-size: 15px;
color: #66d1f4;
padding-left: 10px;
}
.fixed .fixed-table .tr1{
background-color: #f8fafc;
}
.fixed .fixed-table .tr1 th{
color: #babbbb;
font-size: 15px;
}
.fixed .fixed-table .tr1 img{
height:50px;
width: 40px;
}
.fixed .fixed-table .tr1 ul{
overflow-y: scroll;
}
.fixed .fixed-table .tr1 ul span{
font-size: 18px;
}
.fixed .fixed-table .tr1 ul ol{
font-size: 15px;
}
.fixed .fixed-table .tr-td{
background-color: #e0eefd;
color: #66d1f4;
text-align: center;
}
.fixed .fixed-table .rowspan3{
background-color: #f2f8ff;
}
.fixed .fixed-table .fixed-colspan{
text-align: center;
font-size: 20px;
height: 50px;
color: #bcbcbc;
}
/*footer区*/
.footer{
background-color:#acacac;
height: 50px;
text-align: center;
line-height: 50px;
margin-top: 50px;
overflow: hidden;
}
2回答
同学你好。
1、'.contbottom'是最外层的复元素,它包含预约挂号这一块的内容,所以切换到课时排班表的时候,“'.contbottom'”整个区域都隐藏掉了。
建议修改如下:
content区域和fixed区域是兄弟结构,当点击了按钮之后,让content区域隐藏,让fixed元素显示。
自己试一试哦,如果帮助到了你,欢迎采纳。
祝学习愉快~
山河远阔ZZ
2019-03-05
同学你好,在html中,应该给“返回科室列表添加上一样的类名”,参考下图:
自己试一试哦。
相似问题