科室介绍、专家介绍和页脚为什么会挤到一起去了？
来源：4-14 小慕医生项目开发（9）
慕村2106692
2021-09-26 21:56:34
相关代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="Keywords" content="医院，美容，减肥"> <meta name="Description" content="小慕医生网站是一个负责人的美容线上医院"> <title>小慕医生</title> <link rel="stylesheet" href="css/css.css"> </head> <body> <!-- 头部 --> <header> <div class="header-top"> <!-- log --> <div class="log"> <h1>小慕医生</h1> </div> <!-- 工具栏 --> <div class="tools"> <div class="r1"> <img class="tel" src="images/tel.png" alt=""> <span>088-88888888</span> <a href=""><img class="chinese icon" src="images/chinese_icon.png" alt=""></a> <a href=""><img class="icon" src="images/english_icon.png" alt=""></a> </div> <!-- 搜索框 --> <div class="r2"> <input type="text" placeholder="找医生/科室.."> <button><img src="images/search.png" alt=""></button> </div> </div> </div> <!-- 导航条 --> <nav> <ul> <li class="cur"><a href="">首页</a></li> <li><a href="">医院概况</a></li> <li><a href="">医院动态</a></li> <li><a href="">专家学科</a></li> <li><a href="">服务指南</a></li> <li><a href="">医院文化</a></li> <li><a href="">信息公开</a></li> <li><a href="">互动交流</a></li> </ul> </nav> </header> <section class="banner"> <img src="images/banner.png" alt=""> <h2>责任、科学、严谨</h2> <div class="arrow"> <a href="" class="left-btn"></a> <a href="" class="right-btn"></a> </div> <!-- 小圆点 --> <ol> <li class="cur"></li> <li></li> <li></li> <li></li> </ol> </section> <section class="content-main"> <!-- 常用链接 --> <div class="userful-link"> <ul> <li> <a href=""> <img src="images/icon_jzxz.png" alt=""> <p>就诊须知</p> </a> </li> <li> <a href=""> <img src="images/icon_jylc.png" alt=""> <p>就医流程</p> </a> </li> <li> <a href=""> <img src="images/icon_zjjs.png" alt=""> <p>专家介绍</p> </a> </li> <li> <a href=""> <img src="images/icon_ksjs.png" alt=""> <p>科室介绍</p> </a> </li> <li> <a href=""> <img src="images/icon_ybjy.png" alt=""> <p>医保就医</p> </a> </li> <li> <a href=""> <img src="images/icon_jktj.png" alt=""> <p>健康体检</p> </a> </li> </ul> </div> <div class="news-notices"> <!-- 医院动态 --> <div class="news"> <h3>医院动态</h3> <!-- 新闻照片 --> <div class="news-pic"> <a href=""> <img src="images/news_pic.png" alt=""> <p>“全国首届健康预防与商业医疗保险论坛”在北京医院举办 </p> </a> </div> <!-- 新闻列表 --> <div class="news-list"> <ul> <li><a href="">年度医疗机构用血自查评分表和科室基本信息表</a><span>03-30</span></li> <li><a href="">关于上报北京市医疗机构临床用血信息的通知</a><span>03-30</span></li> <li><a href="">北京医院输血科通过验收并获批开展“临床基…</a><span>03-30</span></li> <li><a href="">国家药品监督管理局关于修订都梁软胶囊非处…</a><span>03-30</span></li> <li><a href="">关于将多拉司琼注射剂等药品纳入本市基本医…</a><span>03-30</span></li> <li><a href="">关于调整完善本市基本医疗保险门诊特殊疾病…</a><span>03-30</span></li> <li><a href="">广东省药学会：关于印发《超药品说明书用药…</a><span>03-30</span></li> <li><a href="">人力资源社会保障部关于将36种药品纳入国家…</a><span>03-30</span></li> </ul> </div> </div> <!-- 医院公告 --> <div class="notices"> <h3>医院公告</h3> <ol> <li> <div class="number">01</div> <dl> <dt><a href="">《养生堂》</a></dt> <dd><a href="">公郭立新主任 特殊时期糖尿病人的新冠…</a></dd> </dl> </li> <li> <div class="number">02</div> <dl> <dt><a href="">《养生堂》</a></dt> <dd><a href="">王少为主任 新型冠状病毒防控指引十八…</a></dd> </dl> </li> <li> <div class="number">03</div> <dl> <dt><a href="">《我要当医生》</a></dt> <dd><a href="">谭玲副主任 李同舟 姚晨蕊药师</a></dd> </dl> </li> <li> <div class="number">04</div> <dl> <dt><a href="">《全民健康学院》</a></dt> <dd><a href="">王建业院长 “医”路有你 健康同行</a></dd> </dl> </li> <li> <div class="number">05</div> <dl> <dt><a href="">《健康北京》</a></dt> <dd><a href="">王建业院长 莫把衰老当病治</a></dd> </dl> </li> </ol> </div> </div> <!-- 广告 --> <aside> <img src="images/xuanchuan.png" alt=""> </aside> <!-- 科室介绍 --> <div class="dep-intro"> <div class="center"> <h3>科室介绍</h3> <!-- 查看更多 --> <a href="" class="more">查看更多>></a> <!-- 科室列表 --> <div class="dep-content"> <div class="col"> <h4>内科</h4> <ul> <li class="cur"><a href="">呼吸内科</a></li> <li class="cur"><a href="">消化内科</a></li> <li ><a href="">神经内科</a></li> <li><a href="">心血管内科</a></li> <li><a href="">肾内科</a></li> <li><a href="">血液内科</a></li> <li><a href="">免疫科</a></li> <li><a href="">內分泌科二</a></li> </ul> </div> <div class="col"> <h4>肿瘤科</h4> <ul> <li class="cur"><a href="">肿瘤内科</a></li> <li class="cur"><a href="">肿瘤外科</a></li> <li><a href="">肿瘤妇科</a></li> <li><a href="">骨肿瘤科</a></li> <li><a href="">放疗科</a></li> <li><a href="">肿瘤康复科</a></li> <li><a href="">肿瘤综合科</a></li> </ul> </div> <div class="col"> <h4>外科</h4> <ul> <li class="cur"><a href="">普通外科</a></li> <li class="cur"><a href="">神经外科</a></li> <li><a href="">心胸外科</a></li> <li><a href="">泌尿外科</a></li> <li><a href="">肝胆外科</a></li> <li><a href="">肛肠外科</a></li> <li><a href="">心血管外科</a></li> <li><a href="">烧伤科</a></li> <li><a href="">骨外科</a></li> <li><a href="">乳腺外科</a></li> </ul> </div> <div class="col"> <h4>儿科</h4> <ul> <li><a href="">儿科总和</a></li> <li><a href="">小儿内科</a></li> <li><a href="">小儿外科</a></li> <li><a href="">新生儿科</a></li> <li><a href="">儿童营养科</a></li> <li><a h ref="">消化内科</a></li> </ul> </div> </div> </div> <!-- 专 家介绍 --> <div class="doc-into"> <h3>专家介绍</h3> <a href="" class="more">查看更多>></a> <ul> <li> <div class="picbox"> <a href=""> <img src="images/Mask group1.png" alt=""> </a> </div> <div class="wordbox"> <p>姓名：李琳</p> <p>科室：肿瘤内科</p> <p>职称：主任医师</p> <p>介绍：北京医院肿瘤内科科室主任，党支部书记，副教授，硕士研究生导师，中国老年肿瘤专业委员会肺癌分委会常务委员，北京医学……</p> </div> </li> <li> <div class="picbox"> <a href=""> <img src="images/Mask group2.png" alt=""> </a> </div> <div class="wordbox"> <p>姓名：毛永辉</p> <p>科室：肾脏内科</p> <p>职称：主任医师</p> <p>介绍：北京医院肾内科主任，主任医师，硕士研究生导师。1989年毕业于华西医科大学临床医学院，后在北京医院内科、肾内科工作……</p> </div> </li> <li> <div class="picbox"> <a href=""> <img src="images/Mask group3.png" alt=""> </a> </div> <div class="wordbox"> <p>姓名：黄慈波</p> <p>科室：风湿免疫科</p> <p>职称：主任医师</p> <p>介绍：教授主任医师研究生导师卫生部北京医院风湿免疫科主任 北京大学医学部风湿免疫系副主任；海峡两岸医师交流协会风湿免疫……</p> </div> </li> <li> <div class="picbox"> <a href=""> <img src="images/Mask group4.png" alt=""> </a> </div> <div class="wordbox"> <p>姓名：曹素艳</p> <p>科室：特需医疗部</p> <p>职称：主任医师</p> <p>介绍：北京医院特需医疗部（健康管理中心）/全科医疗部主任，老年与全科医学中心副主任，主任医师，医学硕士。北京大学医学部硕士……</p> </div> </li> <li> <div class="picbox"> <a href=""> <img src="images/Mask group5.png" alt=""> </a> </div> <div class="wordbox"> <p>姓名：陈海波</p> <p>科室：神经内科</p> <p>职称：主任医师</p> <p>介绍：北京医院神经内科主任，主任医师，北京大学医学部神经病学系副主任、教授。中国医师协会神经内科医师分会副会长兼帕金……</p> </div> </li> <li> <div class="picbox"> <a href=""> <img src="images/Mask group6.png" alt=""> </a> </div> <div class="wordbox"> <p>姓名：Jack</p> <p>科室：普通外科</p> <p>职称：主任医师</p> <p>介绍：北京医院普通外科主任，胃肠外科主任，北京大学医学部硕士研究生导师，1985年毕业于白求恩医科大学，从事普外科临床工……</p> </div> </li> </ul> </div> </section> <!-- 页脚 --> <footer> <div class="friend-link"> <!-- 友情链接 --> <h3>友情链接</h3> <ul> <li><a href="">院长信箱</a></li> <li><a href="">投诉信箱</a></li> <li><a href="">在线调查</a></li> <li><a href="">地理位置</a></li> <li><a href="">网站地图</a></li> <li><a href="">网站帮助</a></li> <li><a href="">隐私声明</a></li> </ul> </div> <!-- 小慕医生 --> <address> <h3>小慕医生</h3> <ul> <li>地址：北理工国防大厦111号</li> <li>电话：088-88888888</li> <li>邮箱：kefu@imooc.com</li> <li>邮编：666666</li> <li>网址：<a href="">http://imooc.com</a></li> <li>举报热线：088-88888888</li> </ul> </address> </footer> </body> </html>
相关代码：
*{
padding: 0;
margin: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
body{
font: normal 14px/27px Helvetica;
color: #000000;
}
body header .header-top{
width: 1200px;
margin: 0 auto;
overflow: hidden;
padding-top: 39px;
}
body header .header-top .log{
width: 192px;
height: 63px;
float: left;
}
body header .header-top .tools{
width: 266px;
height: 77px;
float: right;
}
body header .header-top .tools .r1{
margin-bottom: 12px;
}
body header .header-top .tools .r1 img.tel{
width: 32px;
height: 25px;
}
body header .header-top .tools .r1 span{
display: inline-block;
width: 160px;
height: 26px;
line-height: 26px;
text-align: center;
font-size: 20px;
color: #00978E;
}
body header .header-top .tools .r1 .icon{
width: 24px;
height: 24px;
}
body header .header-top .tools .r1 .chinese{
margin-right: 14px;
}
body header .header-top .tools .r2{
width: 264px;
height: 28px;
border: 1px solid rgba(202,202,202,0.6);
}
body header .header-top .tools .r2 input{
width: 224px;
height: 28px;
border: none;
padding-left: 20px;
outline: none;
}
body header .header-top .tools .r2 button{
width: 20px;
height: 20px;
background: none;
border: none;
float: right;
outline: none;
position: relative;
top: 4px;
/* 设置触碰时候的鼠标指针的样式 */
cursor: pointer;
}
body nav{
width: 100%;
background-color: #00978E;
margin-top: 29px;
}
body nav ul{
width: 1200px;
height: 60px;
margin: 0 auto;
overflow: hidden;
}
body nav ul li{
width: 150px;
float: left;
}
body nav ul li a{
display: block;
width: 150px;
height: 60px;
text-align: center;
line-height: 60px;
color: white;
font-size: 16px;
}
body nav ul li.cur{
background-color: #015E58;
}
body .banner{
position: relative;
}
body .banner img{
width: 100%;
height: 570px;
display: block;
}
body .banner h2{
width: 480px;
height: 79px;
color: #015E58 ;
position: absolute;
top: 132px;
left: 508px;
font: normal 60px/72px Helvetica;
}
body .banner .arrow{
width: 1200px;
height: 74px;
position: absolute;
top: 50%;
margin-top: -37px;
left: 50%;
margin-left: -600px;
}
body .banner .arrow .left-btn{
float: left;
width: 56px;
height: 74px;
background: rgba(8,8,8,0.3);
}
body .banner .arrow .right-btn{
float: right;
width: 56px;
height: 74px;
background: rgba(8,8,8,0.3);
}
body .banner ol{
position: absolute;
left: 50%;
margin-left: -60px;
bottom: 20px;
width: 120px;
height: 12px;
}
body .banner ol li{
width: 20px;
height: 12px;
background-color: white;
float: left;
margin-right: 10px;
}
body .banner ol li.cur{
width: 30px;
background-color: #00978E;
}
body .banner ol li:last-child{
margin-right: 0;
}
body .content-main .userful-link{
width: 906px;
height: 147px;
margin: 0 auto;
margin-top: 71px;
}
body .content-main .userful-link ul{
overflow: hidden;
}
body .content-main .userful-link ul li{
float: left;
width: 106px;
margin-right: 54px;
}
body .content-main .userful-link ul li:last-child{
margin-right: 0;
}
body .content-main .userful-link ul li a img{
width: 106px;
height: 106px;
margin-bottom: 15px;
display: block;
}
body .content-main .userful-link ul li a p{
font: normal 20px/24px Helvetica;
color: #333;
text-align: center;
line-height: 40px;
}
body .content-main .news-notices{
width: 1200px;
overflow: hidden;
margin: 0 auto;
margin-top: 56px;
}
body .content-main .news-notices .news{
width: 838px;
float: left;
}
body .content-main .news-notices .news h3{
font-size: 16px;
margin-bottom: 27px;
}
body .content-main .news-notices .news .news-pic{
float: left;
width: 422px;
height: 328px;
position: relative;
margin-right: 15px;
}
body .content-main .news-notices .news .news-pic a p{
position: absolute;
left: 0;
bottom: 0;
width: 422px;
height: 40px;
background: rgba(8,8,8,0.40);
text-align: center;
font-size: 14px;
color: #FFFFFF;
line-height: 40px;
}
body .content-main .news-notices .news .news-list{
float: left;
overflow: hidden;
width: 401px;
height: 328px;
}
body .content-main .news-notices .news .news-list ul li{
height: 42px;
}
body .content-main .news-notices .news .news-list ul li a{
color: #000000;
font-size: 14px;
float: left;
}
body .content-main .news-notices .news .news-list ul li span{
float: right;
}
body .content-main .news-notices .notices{
width: 323px;
float: right;
}
body .content-main .news-notices .notices h3{
font-size: 16px;
margin-bottom: 27px;
}
body .content-main .news-notices .notices ol li{
overflow: hidden;
margin-bottom: 11px;
}
body .content-main .news-notices .notices ol li .number{
float: left;
width: 53px;
height: 57px;
background-color: #00978E ;
font-size: 30px;
color:#FFFFFF ;
text-align: center;
line-height: 57px;
margin-right: 14px;
}
body .content-main .news-notices .notices ol li dl{
float: left;
}
body .content-main .news-notices .notices ol li dl dt a{
color: #000000;
}
body .content-main .news-notices .notices ol li dl dd a{
color: #000000;
}
body .content-main aside{
width: 1200px;
margin: 0 auto;
margin-bottom: 28px;
}
body .content-main .dep-intro{
width: 100%;
height: 437px;
background-color: #FAFAFA;
}
body .content-main .dep-intro .center{
width: 1200px;
margin: 0 auto;
padding-top: 36px;
position: relative;
overflow: hidden;
}
body .content-main .dep-intro .center .more{
position: absolute;
top: 36px;
right: 0;
color: #999999;
}
body .content-main .dep-intro .center .dep-content{
margin-top: 18px;
}
body .content-main .dep-intro .center .dep-content .col{
width: 263px;
padding-left: 37px;
float: left;
}
body .content-main .dep-intro .center .dep-content .col h4{
margin-bottom: 14px;
text-align: center;
position: relative;
}
body .content-main .dep-intro .center .dep-content .col h4::before{
content: "";
width: 40px;
height: 2px;
background-color:#00978E;
position: absolute;
top: 12px;
left: 61px;
}
body .content-main .dep-intro .center .dep-content .col h4::after{
content: "";
width: 40px;
height: 2px;
background-color:#00978E;
position: absolute;
top: 12px;
left: 162px;
}
body .content-main .dep-intro .center .dep-content .col ul li{
width: 119px;
height: 34px;
float: left;
border: 1px solid #CDCDCD;
margin-bottom: 25px;
text-align: center;
line-height: 34px;
}
body .content-main .dep-intro .center .dep-content .col ul li a{
color: #000;
}
body .content-main .dep-intro .center .dep-content .col ul li.cur a{
color: #00978E;
font-weight: bold;
}
body .content-main .dep-intro .center .dep-content .col ul li:nth-child(odd){
margin-right: 19px;
}相关截图：
写回答
1回答
-
好帮手慕然然
2021-09-27
同学你好，是因为科室介绍部分的div盒子缺少了结束的标签</div>，导致解析时出现问题，如图
祝学习愉快！
0
相似问题