老师请您帮忙检查一下代码谢谢
来源：4-9 小慕医生项目开发（6）
慕粉1924517932
2021-08-16 08:53:32
相关代码：小慕医生html代码
<!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">
<title>小慕医生--责任、爱心、品质、关爱</title>
<meta name="Description" content="小慕医生是一个非常专业的医院，我们的理念是责任、爱心、品质、关爱">
<meta name="keywords" content="主营业务：美容,减脂,内科,外科,肿瘤">
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<!-- 首部 -->
<header>
<div class="header-top">
<!-- 页面LOGO -->
<div class="LOGO">
<h1>小慕医生</h1>
</div>
<!-- 页面功能区-->
<div class="tool">
<div class="r1">
<img class="tel" src="images/tel.png">
<spen class="number">088880-888888</spen>
<a href=""><img class="chinese_icon cion"src="images/chinese_icon.png"></a>
<a href=""><img class="english_icon cion" src="images/english_icon.png"></a>
</div>
<div class="r2">
<input type="search" placeholder="找医生/科室..">
<button><img class="search" src="images/search.png"></button>
</div>
</div>
</div>
<!-- 导航条 -->
<nav class="main-nav">
<ul>
<li class="sur"><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>
<!-- 网页的banner -->
<section class="banner">
<img class="banner-img" src="images/banner.png" width="1500" height="300">
<div class="center">
<h2>责任、科学、严谨</h2>
<a href="#" class="left-btn"></a>
<a href="#" class="right-btn"></a>
</div>
<ol>
<!-- 小圆点中ol标签是绝对定位的，而li标签是进行浮动的 -->
<li class="cur"></li>
<li class=""></li>
<li class=""></li>
<li class=""></li>
</ol>
</section>
<!-- 网页的主要内容 -->
<section class="content">
<!-- 常用链接 -->
<div class="useful-link">
<ul>
<a href="">
<li>
<img src="images/icon_jzxz.png" alt="就诊须知">
<span> 就诊须知</span>
</li>
</a>
<a href="">
<li>
<img src="images/icon_jylc.png" alt="就医流程">
<span>就医流程</span>
</li>
</a>
<a href="">
<li>
<img src="images/icon_zjjs.png" alt="专家介绍">
<span>专家介绍</span>
</li>
</a>
<a href="">
<li>
<img src="images/icon_ksjs.png" alt="科室介绍">
<span>科室介绍</span>
</li>
</a>
<a href="">
<li>
<img src="images/icon_ybjy.png" alt="专家介绍">
<span>医保就医</span>
</li>
</a>
<a href="">
<li>
<img src="images/icon_jktj.png" alt="健康体检">
<span>健康体检</span>
</li>
</a>
</ul>
</div>
<div>
<!-- 医院动态和公告 -->
<div class="new-and-notice ">
<div class="new">
<h3>医院动态</h3>
<div class="new-content">
<!-- 图片新闻 -->
<div class="hot-new">
<!-- 放新闻的大图片 -->
<a href="images/news.png">
<img src="images/news_pic.png" alt="医院动态">
<div class="info">
“全国首届健康预防与商业医疗保险论坛”在北京医院成功举办。
</div>
</a>
</div>
<!-- 新闻列表 -->
<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 class="spec" 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="notice">
<h3>医院公告</h3>
<ol>
<li>
<div class="number">01</div>
<dl>
<dt><a href="">养生堂</a></dt>
<dd>公郭立新主任 特殊时期糖尿病的新冠...</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>
</div>
<!-- 广告图片 -->
<aside class="ad-images">
<div class="publicize">
<img src="images/xuanchuan.png" alt="宣传图片" width="800" height="200">
</div>
</aside>
<!-- 科室介绍 -->
<div class="dep-info">
<div class="Department introduction">
<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 href="">血液内科</a></li>
<li><a href="">免疫科</a></li>
<li><a href="">内分泌内科</a></li>
</ul>
<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 href="">肿瘤康复科</a></li>
<li><a href="">肿瘤综合科</a></li>
</ul>
<h4>外科</h4>
<ul>
<li><a href="">普通外科</li>
<li><a href="">神经外科</li>
<li><a href="">心胸外科</li>
<li><a href="">泌尿外科</li>
<li><a href="">肝胆外科</li>
<li><a href="">肛肠外科</li>
<li><a href="">心血管外科</li>
<li><a href="">烧伤科</li>
<li><a href="">骨外科</li>
<li><a href="">乳腺外科</li>
</ul>
<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 href="">消化内科</a></li>
</ul>
</div>
</div>
<!-- 专家介绍 -->
<div class="exp-info">
<h3>专家介绍</h3>
<a href="">查看更多>></a>
<ul>
<li>
<!-- 医生图片 -->
<div class="picbox">
<a href="images/lilin.png">
<img src="images/lilin.png" alt="李琳" width="152" height="180">
</a>
</div>
<div class="wordbox">
<p>姓名：李琳</p>
<p>科室：肿瘤内科</p>
<p>职称：主任医师</p>
<p>介绍：北京医院肿瘤内科科室主任，党支部书记，副教授，硕士研究生导师，中国老年肿瘤专业委员会肺癌分委会常务委员，北京医</p>
</div>
</li>
<li>
<!-- 医生照片 -->
<div class="picbox">
<a href="images/maoyonghui.png">
<img src="images/maoyonghui.png" alt="毛永辉" width="152" height="180">
</a>
</div>
<div class="wordbox">
<p>姓名：毛永辉</p>
<p>科室：肾脏内科</p>
<p>职称：主任医师</p>
<p>介绍：北京医院肾内科主任，主任医师，硕士研究生导师。1989年毕业于华西医科大学临床医学院，后再北京医学院内科，肾内科工作</p>
</div>
</li>
<li>
<!-- 医生照片 -->
<div class="picbox">
<a href="images/huangcibo.png">
<img src="images/huangcibo.png" alt="黄慈波" width="152" height="180">
</a>
</div>
<div class="wordbox">
<p>姓名：黄慈波</p>
<p>科室：风湿免疫科</p>
<p>职称：主任医师</p>
<p>介绍：教授主任医师研究生导师卫生部北京医院风湿免疫科主任，北京大学医学部风湿免疫系副主任；海峡两岸医师交流协会风湿免疫</p>
</div>
</li>
<li>
<!--医生照片 -->
<div class="picbox">
<a href="images/caosuyan.png">
<img src="images/caosuyan.png" alt="曹素艳" width="152" height="180">
</a>
</div>
<div class="wordbox">
<p>姓名:曹素艳</p>
<p>科室：特需医疗部</p>
<p>职称：主任医师</p>
<p>介绍：北京特需医疗部（健康管理中心）/全科医疗部主任，老年与全科医学中心副主任，主任医师，医学硕士。北京大学医学部硕士...</p>
</div>
</li>
<li>
<!-- 医生照片 -->
<div class="picbox">
<a href="images/chenhaibo.png"></a>
<img src="images/chenhaibo.png" alt="陈海波" width="152" height="180">
</div>
<div class="wordbox">
<p>姓名：陈海波</p>
<p>科室：神经内科</p>
<p>职称：主任医师</p>
<p>介绍：北京医院神经内科主任，主治医师，北京大学医学部神经学系副主任、教授。中国医师协会神经内科分会副会长兼帕金...</p>
</div>
</li>
<li>
<!-- 医生照片 -->
<div class="picbox">
<a href="images/jack-jack.png">
<img src="images/jack-jack.png" alt="jack-jack" width="152" height="180">
</a>
</div>
<div class="wordbox">
<p>姓名：jack</p>
<p>科室：普通外科</p>
<p>职称：主任医师</p>
<p>介绍：北京医院普通外科主任，胃肠外科主任北京大学硕士研究生导师，1985年毕业于白求恩医科大学从事普外科临时床工作</p>
</div>
</li>
</ul>
</div>
<div>
<!-- 页脚 -->
<div class="footer"></div>
<!-- 友情链接 -->
<div class="friend-link">
<h3>友情链接</h3>
<div>
<ul>
<li>院长信箱</li>
<li>投诉信箱</li>
<li>在线调查</li>
<li>地理位置</li>
<li>网站地图</li>
<li>网站帮助</li>
<li>隐私声明</li>
</ul>
</div>
</div>
<!-- 小慕医生地址和电话 -->
<div class="address">
<div>
<h3>小慕医生</h3>
<ul>
<li>地址：<a href="">北理工国防大厦111号</li></a>
<li>电话：<a href="">088-88888888</li></a>
<li>邮箱：<a href="">kofu@imooc.com</li></a>
<li>邮编：<a href="">6666666</li></a>
<li>网址：<a href="">http//imooc.com.</li></a>
<li>举报热线：<a href="">088-888888</li></a>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
相关代码：css代码
body,ul,p{
margin:0;
padding:0;
}
/* 清除小圆点 */
ul,ol{
list-style: none;
}
/* 去掉所有超级链接的下划线 */
a{
text-decoration: none;
}
/* 使用继承性来进行设置字体样式 */
body{
font:normal 14px/25px '微软雅黑';
}
header{
}
.header-top{
/* 形成BFC */
overflow: hidden;
margin:0 auto;
width:1199px;
}
header .header-top .LOGO{
float:left;
padding-top: 27px;
width:192px;
height:63px;
}
header .header-top .LOGO h1{
width:192px;
height:63px;
color:#00978E;
}
header .header-top .tool .r1{
margin-bottom:10px;
}
header .header-top .tool{
float:right;
padding-top: 22px;
width:266px;
height:77px;
/*background-color: #00978E;*/
}
header .header-top .tool .r1 .tel{
width:32px;
height:25px;
}
header .header-top .tool .r1 .number{
font-size: 20px;
color:#00978E;
display: inline-block;
width:158px;
height:26px;
text-align: center;
}
header .header-top .tool .r1 .cion{
width:24px;
height:24px;
}
header .header-top .tool .r1 .chinese_icon{
margin-right:14px;
}
header .header-top .tool .r1 .english_icon{
position: relative;
top:1px;
}
header .header-top .tool .r2{
width: 264px;
height: 28px;
border: 1px solid #CACACA;
}
header .header-top .tool .r2 input{
float: left;
width:224px;
height:28px;
/* 去掉边框线 */
border: none;
padding-left: 20px;
/* 去掉点击文本框时所有的黑色边框 */
outline: none;
}
header .header-top .tool .r2 button{
float:left;
width:20px;
height:20px;
/* 去掉背景 */
background:none;
/* 去掉边框 */
border:none;
/* 去掉点击文本框时所有的黑色边框 */
outline:none;
/* 鼠标碰到搜索键时的样式 */
cursor:pointer;
/* 相对定位 */
position: relative;
top: 3px;
right:3px;
}
.main-nav{
overflow: hidden;
margin-top: 20px;
height:60px;
background-color: #00978E;
}
.main-nav ul{
height:60px;
width: 1200px;
margin:0 auto;
}
.main-nav ul li{
float:left;
width:150px;
line-height: 60px;
text-align: center;
color: white;
}
/* 交集选择器既有li还有sur */
.main-nav ul li.sur{
background-color: #086b65;
}
.main-nav ul li a:hover{
/* 转为块级元素，给a标签设置宽高 */
display: block;
width:150px;
height:60px;
background-color: #086b65;
}
.main-nav ul li a{
color: white;
font-size: 16px;
}
.banner{
width:100%;
position: relative;
}
.banner .banner-img{
width: 100%;
}
.banner .center{
position:absolute;
top:50%;
left:50%;
width:1200px;
height:240px;
margin-top:-120px;
margin-left: -600px;
}
.center .left-btn{
position:absolute;
left:0;
top:50%;
margin-top:-37px;
width:56px;
height:74px;
background-color:rgba(63, 58, 58, .5)
}
.center .right-btn{
position:absolute;
right: 0;
top:50%;
margin-top:-37px;
width:56px;
height:74px;
background-color:rgba(63, 58, 58, .5);
}
.center h2{
position:absolute;
top:50%;
left:114px;
margin-top:-60px;
width:480px;
height: 79px;
color:#086b65;
font-weight:normal;
font-size: 60px;
}
/*.bannder ol{
width:120px;
height:12px;
}*/
.banner ol {
position:absolute;
width: 200px;
height:12px;
bottom:10px;
left:50%;
margin-left: -60px;
}
.banner ol li{
float:left;
width:15px;
height:12px;
margin-left: 10px;
background-color:rgba(255, 255, 255, .5);
/* 转为小圆点 */
border-radius: 30%;
}
.banner ol li:hover{
background-color: #00978E;
}
.content .useful-link {
margin: 71px auto;
width:1006px;
height: 148px;
}
content .useful-link ul{
overflow: hidden;
}相关截图：
.content .useful-link ul a li{
float:left;
margin-right: 54px;
}
.content .useful-link ul a li span{
/* 先转为块级元素，设置完宽和高时，使用文本水平居中，text-align:conter;进行文字水平居中 */
display:block;
width:100%;
text-align: center;
font-size: 20px;
font-family:'Helvetica';
color:#000000;
line-height: 40px;
}
.content .useful-link a list-child{
margin-right: 0;
}
.content .new-and-notice{
width:1200px;
height:376px;
margin:0 auto;
margin-top: 56px;
}
.content .new-and-notice .new{
float:left;
width:877px;
height:376px;
}
.content .new-and-notice .notice{
float:right;
width:323px;
height: 376px;
}
.content .new-and-notice .new h3{
height:33px;
margin-top: 10px;
}
.content .new-and-notice .new .new-content .hot-new{
float:left;
position: relative;
width:422px;
height:328px;
margin-right: 20px;
}
.content .new-and-notice .new .new-content .hot-new .info{
position:absolute;
width:100%;
height:40px;
bottom:0;
left:0;
color:white;
text-align: center;
line-height: 40px;
background-color: rgba(0, 0,0, .3);
}
.content .new-and-notice .new-content ul{
float:right;
width:400px;
height:328px;
}
.content .new-and-notice .new-content ul li{
line-height: 40px;
}
.content .new-and-notice .new-content ul li a{
float:left;
color:#666666;
}
.content .new-and-notice .new-content ul li span{
float:right;
/*margin-right: 10px;*/
}
.content .new-and-notice .new-content ul li .spec{
color:#00978E;
font-weight: bold;
}
.content .new-and-notice .notice h3{
height:33px;
margin-top: 10px;
}
/*.content .new-and-notice .notice ol li{
overflow: hidden;
margin-top: 11px;
}
.content .new-and-notice .notice ol li .number{
float:left;
width:53px;
height:57px;
font-size: 30px;
text-align: center;
line-height: 57px;
color:#ffffff;
background-color:#00978E;
}*/
相关截图：
问题描述：
老师为什么我打出的01到养生堂三个字的间距为什么会那么大。
还有就是医院公告那部分为什么不是并齐的呢？
写回答
1回答
-
好帮手慕然然
2021-08-16
同学你好，关于问题解答如下：
1、因为使用的dl标签带有默认的margin，导致间距变大，如图
2、同理，因为医院公告标题下面的内容使用的是ol标签，ol标签带有默认的padding，导致内容无法对齐，如图
因此，建议在css代码的开始位置，选中所有标签，将默认的margin和padding清除，如下
祝学习愉快！
0
相似问题