aside部分设置margin-top会侵占上面图片。两部分间隙显示不出来。
来源：4-12 小慕医生项目开发（7）
Vigorous阿炎
2020-10-18 19:56:58
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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> <!--第一板块先填写头部标签，然后设计网页主题logo-->
<!-- 网页的logo -->
<div class="header-top">
<!-- 网页的logo -->
<div class="logo">
<h1>小慕医生</h1>
</div>
<!-- 页面的功能 -->
<div class="tool">
<!-- 分两部分来完成 -->
<div class="ri">
<img class="tel" src="images/tel.png">
<span class="telnumber">088-88888888</span>
<a href=""><img class="chinese_icon icon" src="images/chinese_icon.png" alt="图片"></a>
<a href=""> <img class="english_icon icon" src="images/english_icon.png"></a>
</div>
<div class="r2">
<input class="zys" type="text" placeholder="找医生找科室">
<!-- 图片放在按钮上 -->
<button>
<img class="tp" src="images/search.png" alt="">
</button>
</div>
</div>
</div>
<!-- 页面的导航条 -->
<nav class="main-nav">
<ul>
<li class="sy"><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 class="A" src="images/banner.png" alt="">
<div class="a1">
<h2>责任，科学，严谨</h2>
<a class="a3" href=""><</a>
<a class="a4" href="">></a>
</div>
<!-- 小圆点 -->
<ol>
<li class="a2">
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ol>
</section>
<!-- 网页的主要内容 --> <!--第三板块-->
<section class="content">
<!-- 常用的链接 -->
<div class="useful-links">
<ul>
<li>
<a href="">
<img src="images/icon_jzxz.png">
<span>就诊须知</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_jylc.png">
<span>就医流程</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_zjjs.png">
<span> 专家介绍</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_ksjs.png">
<span>科室介绍</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_ybjy.png">
<span>医保就医</span>
</a>
</li>
<li>
<a href="">
<img src="images/icon_jktj.png">
<span>健康体检</span>
</a>
</li>
</ul>
</div>
<!-- 医院动态医院公告区域 --> <!--第四板块-->
<div class="news-and-notice">
<!-- 医院动态 -->
<div class="news">
<h3>医院动态</h3>
<div class="news-content">
<!-- 新闻图片 -->
<div class="hot-news">
<!-- 放新闻大图片 -->
<a href="">
<p><img src="images/news_pic.png"></p>
<div class="c5">
“全国首届健康预防与商业医疗保险论坛”在北京医院举办
</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="c4" 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>
</ul>
</div>
</div>
<!--医院公告 -->
<div class="notice">
<h3>医院公告</h3>
<ol tpye="1">
<li>
<span>01</span>
<dl>
<dt><a href="">养生堂</a></dt>
<dd><a href="">新主人特殊时期糖尿病患者...</a></dd>
</dl>
</li>
<li>
<span>02</span>
<dl>
<dt><a href="">养生堂</a></dt>
<dd><a href="">王少为主任 新型冠状病毒防控指控十八</a></dd>
</dl>
</li>
<li>
<span>03</span>
<dl>
<dt><a href="">我要当医生</a></dt>
<dd><a href="">谭玲副主任 李同舟 姚晨蕊药师</a></dd>
</dl>
</li>
<li>
<span>04</span>
<dl>
<dt><a href="">《全民健康学院》</a></dt>
<dd><a href="">王建业院长“医”路有你健康同行</a></dd>
</dl>
</li>
<li>
<span>05</span>
<dl>
<dt><a href="">《健康北京》</a></dt>
<dd><a href="">王建业院长莫把衰老当病治</a></dd>
</dl>
</li>
</ol>
</div>
<!--广告图片 -->
<aside class="ad-images">
<a href="">
<img src="images/xuanchuan.png" alt="">
</a>
</aside>
<!-- 科室介绍 -->
<div class="dep-infor">
<h3>科室介绍</h3>
<div class="dep-concent">
<div>
<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>
<div>
</div>
<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>
</div>
<div>
<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>
</div>
<div>
<h4>儿科</h4>
<ul>
<li><a href="">小儿内科</a></li>
<li><a href="">小儿外科</a></li>
<li><a href="">新生儿科</a></li>
<li><a href="">儿童营养科</a></li>
</ul>
</div>
</div>
</div>
<!-- 专家介绍 -->
<div class="exp-infor">
<h3>专家介绍</h3>
<a href="">查看更多</a>
<div>
<ul>
<li>
<div class="picbox"></div>
<a href="">
<img src="images/lilin.png" alt="">
</a>
<div class="wordbox">
<p>姓名：李琳</p>
<p>科室：肿瘤内科</p>
<p>职称：主任医师</p>
</div>
</li>
<li>
<div class="picbox"></div>
<a href="">
<img src="images/maoxiaohui.png">
</a>
<div class="wordbox">
<p>姓名：毛永辉</p>
<p>科室：肾脏内科</p>
<p>职称：主任医师</p>
</div>
</li>
<li>
<div class="picbox"></div>
<a href="">
<img src="images/jack.png">
</a>
<div class="wordbox">
<p>姓名：Jack</p>
<p>科室：肾脏内科</p>
<p>职称：主任医师</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<!-- 友情链接 -->
<h3>友情链接</h3>
<div class="friend-links">
<ul>
<li><a href="">院长信箱</a></li>
<li><a href="">院长信箱</a></li>
<li><a href="">院长信箱</a></li>
<li><a href="">院长信箱</a></li>
</ul>
</div>
<!-- 小慕医生联系方式 -->
<adress>
<h3>小慕医生</h3>
<ul>
<li>地址：北理工国防大厦111号</li>
<li>电话：088-88888888</li>
<li>邮箱：kefu@imooc.com</li>
<li>邮编：666666</li>
<li>网址：http://imooc.com</li>
<li>举报热线：088-88888888</li>
</ul>
</adress>
</footer>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
ul,ol{
/* 去掉所有ul和ol的小圆点 */
list-style: none;
}
a{
/* 去掉所有的下划线 */
text-decoration: none;
}
/* 使用继承性，给body标签设置字体 */
body{
font: normal 14px/25px "微软雅黑";
}
/* 头部 */
header{
}
header .header-top{
/* width=小慕医生字体为最左边，电话为最右边之和。 */
width: 1201px;
margin: 0 auto;
/* 清除浮动 */
overflow: hidden;
}
header .header-top .logo{
padding-top: 27px;
width: 221px;
height: 63px;
float: left;
}
/* 被父亲向下挤了27px */
header .header-top .logo h1{
width: 221px;
height: 63px;
}
header .header-top .tool{
float: right;
width: 266px;
height: 77px;
padding-top: 22px;
}
header .header-top .tool .ri .tel{
width: 32px;
height: 25px;
}
header .header-top .tool .ri .telnumber{
/* 电话号码是文本，要设置背景宽高等需要转换为行内块级元素 */
display: inline-block;
font-size: 20px;
width: 140px;
height:26px;
text-align: center;
}
header .header-top .tool .ri .icon{
width: 24px;
height:27px;
}
header .header-top .tool .ri .chinese_icon {
margin-right: 15px;
}
header .header-top .tool .r2 {
width: 264px;
height: 28px;
border:1px solid rgba(202,202,202,.6);
margin-bottom: -14px;
}
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: 5px;
right: 9px;
}
.main-nav{
height: 60px;
background-color: #00978E;
}
.main-nav ul{
margin:0 auto;
width: 1200px;
height: 60px;
}
.main-nav ul li{
float: left;
width: 150px;
height: 60px;
line-height: 60px;
text-align: center;
font-family: Helvetica;
font-size: 16px;
}
.main-nav ul li.sy{
background-color: #015E58;
}
.main-nav ul li a{
/* 转为块级元素，是点击范围增大 */
display: block;
width: 150px;
height: 60px;
}
.main-nav ul li a:hover{
/* color表示给字体添加悬浮颜色效果， */
background-color: rgb(145, 206, 95);
color: white;
}
.banner{
position: relative;
width: 100%;
height: 570px;
}
.banner .A{
width: 100%;
height: 570px;
}
.banner .a1{
position: absolute;
width: 1200px;
height: 300px;
background-color: #009900;
top: 50%;
margin-top: -150px;
left: 50%;
margin-left: -600px;
}
.banner .a1 h2{
position: absolute;
width: 480px;
height: 79px;
background-color: rgb(158, 223, 115);
font-size: 60px;
color: #015E58;
font-weight: normal;
}
.banner .a1 .a3{
position: absolute;
width: 56px;
height: 64px;
background-color:rgba(11,22,33,.3);
left: 0;
top: 50%;
margin-top: -32px;
}
.banner .a1 .a4{
position: absolute;
width: 56px;
height: 64px;
background-color:rgba(11,22,33,.3);
right: 0;
top: 50%;
margin-top: -32px;
}
.banner ol{
position: absolute;
width: 120px;
height: 12px;
left: 50%;
margin-left: -60px;
/* 在绝对定位中top和margin-top是同时使用的
先定位大的方向然后再微调，
所以下面不能直接写margin-bottom:20px,
应该先定位bottom底部后再微调 */
bottom: 20px;
}
.banner ol li{
float: left;
width: 20px;
height: 12px;
background-color:white;
margin-right: 10px;
}
.banner ol li:nth-child(4){
margin-right: 0;
}
.banner ol li.a2{
width: 30px;
height: 12px;
background-color:#00978E ;
}
.useful-links{
width: 906px;
height: 148px;
margin:0 auto;
margin-top: 71.3px;
}
.useful-links ul{
width: 906px;
height: 148px;
}
.useful-links ul li{
float: left;
width: 106px;
height: 148px;
margin-right: 54px;
}
.useful-links ul li:last-child{
margin-right: 0;
}
.useful-links ul li span{
display: block;
width: 80px;
height: 26px;
font-size: 20px;
line-height: 24px;
margin-top: 15.7px;
text-align: center;
}
.news-and-notice{
width: 1201px;
height: 377px;
background-color: rgb(231, 141, 141);
margin: 0 auto;
margin-top: 56px;
}
.news-and-notice .news{
float: left;
width: 890px;
height: 377px;
background-color: rgb(152, 224, 68);
}
.news-and-notice .notice{
float: left;
width: 311px;
height: 377px;
background-color: rgb(159, 209, 233);
}
/* 浮动是并排的， */
}
.news-and-notice .news h3{
float: left;
font-size: 16px;
line-height: 19px;
}
.news-and-notice .news .news-content .hot-news{
float: left;
position: relative;
width: 422px;
height: 328px;
}
.news-and-notice .news .news-content .hot-news .c5{
position: absolute;
left: 0;
bottom: 0;
background-color:rgba(11,22,33,.3);
}
.news-and-notice .news .news-content ul{
float: left;
width: 460px;
height: 328px;
background-color: rgb(124, 69, 69);
}
.news-and-notice .news .news-content ul li{
font-size: 14px;
line-height: 40px;
overflow: hidden;
}
.news-and-notice .news .news-content ul li a{
float: left;
}
.news-and-notice .news .news-content ul li span{
float: right;
}
.news-and-notice .news .news-content ul li a.c4{
color: rgb(216, 247, 78);
}
.news-and-notice .notice h3{
float: left;
margin-bottom: 10px;
}
.news-and-notice .notice ol{
float: left;
}
.news-and-notice .notice ol li{
/* li里面两个元素为了防止侵占需要添加overflow: hidden; */
overflow: hidden;
}
.news-and-notice .notice ol li span {
float: left;
display: block;
width:53px;
height: 57px;
background-color: #62aa8a;
font-size: 30px;
line-height: 57px;
color: white;
text-align: center;
margin-right: 5px;
margin-bottom: 14px;
}
.news-and-notice .notice ol li dl dt a{
color: #666;
}
.news-and-notice .notice ol li dl dd a{
color: #999;
}
aside .ad-images{
width: 1200px;
height: 138px;
margin: 20px auto;
}
在这里输入代码，可通过选择【代码语言】突出显示
2回答
-
同学很棒哦，能够自己找到问题在哪里，继续加油呀！
祝学习愉快！
0 -
Vigorous阿炎
提问者
2020-10-18
老师我找出来了，是上半部分少写一个</div>.
0
相似问题