老师footer写了css但是没得效果

* {

margin: 0;

padding: 0;

}

/*去掉ul li的小圆点*/

ul,ol {

list-style: none;

}

/*去掉所有超级链接的下划线*/

a {

text-decoration: none;

}

/*根据继承性，给body标签设置字体属性*/

body {

font: normal 14px/25px '微软雅黑';

}

header {

}

header .header-top {

width: 1199px;

margin: 0 auto;

overflow: hidden;

}

header .header-top .logo {

padding-top: 27px;

width: 192px;

height: 63px;

float: left;

color: #00978E;

font-size: 20px;

}

header .header-top .logo h1 {

width: 192px;

height: 63px;

}

header .header-top .tool {

float: right;

width: 266px;

}

header .header-top .tool .r1 {

margin-top: 20px;

margin-bottom: 20px;

}

header .header-top .tool .r1 .tel{

width: 32px;

height: 25px;

}

header .header-top .tool .r1 .telnumber{

font-size: 20px;

color: #00978E;

display: inline-block;

width: 158px;

height: 26px;

text-align: center;

}

header .header-top .tool .r1 .icon{

width: 27px;

height: 27px;

}

header .header-top .tool .r2{

width: 264px;

height: 28px;

border: 1px solid black;

}

header .header-top .tool .r2 input{

float: left;

width: 220px;

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;

}

header .main-nav {

/*不用写宽度自动撑满*/

height: 60px;

background-color: #00978E;

margin-top: 20px;

}

header .main-nav ul{

width: 1200px;

height: 60px;

margin: 0 auto;

}

header .main-nav ul li{

float: left;

width: 150px;

text-align: center;

/*行高的等于盒子高*/

line-height: 60px;

}

header .main-nav ul li.cur{

background-color: #015E58;

}

header .main-nav ul li a{

/*转为块级元素*/

display: block;

width: 150px;

height: 60px;

font: 16px;

color:white;

}

header .main-nav ul li a:hover{

background-color: orange;

}

/*banner区域样式*/

.banner{

width: 100%;

position: relative;

}

.banner-img{

width: 100%;

}

.banner .center{

position: absolute;

width: 1200px;

height: 300px;

/*background-color:orange;*/

top: 50%;

left: 50%;

/*水平居中，拉回width的一半*/

margin-top: -150px;

margin-left: -600px;

}

.banner .center .left-btn{

position: absolute;

left: 0;

top: 50%;

/*水平居中，拉回width的一半*/

margin-top: -37px;

width: 56px;

height: 74px;

background-color: rgba(0,0,0,.3);

}

.banner .center .right-btn{

position: absolute;

right: 0;

top: 50%;

/*水平居中，拉回width的一半*/

margin-top: -37px;

width: 56px;

height: 74px;

background-color: rgba(0,0,0,.3);

}

.banner .center h2{

position: absolute;

width: 504px;

height: 79px;

font-size: 60px;

color: #015E58;

font-weight: normal;

top:50% ;

/*水平居中，拉回width的一半*/

margin-top: -40px;

left: 114px;

}

.banner ol{

position: absolute;

width: 120px;

height: 12px;

background-color: red;

bottom: 20px;

left: 50%;

/*水平居中，拉回width的一半*/

margin-left: -60px;

}

.banner ol li{

float: left;

width: 20px;

height: 12px;

background-color: white;

margin-right: 10px;

}

/*最后一个没有margin*/

.banner ol li:last-child{

margin-right: 0;

}

.banner ol li .cur{

width: 30px;

background-color: #00978E;

}

/*内容部分*/

.content{

padding: 71px;

}

.content .useful-links{

width: 904px;

height: 151px;

margin: 0 auto;

/* background-color: orange;*/

}

.content .useful-links ul{

/*清除浮动*/

overflow: hidden;

}

.content .useful-links ul li{

float: left;

width: 104px;

margin-right: 56px;

}

.content .useful-links ul li span{

/*转块不设置宽度相当于属性为100%了此时就可以text-aligh居中了 */

display: block;

text-align: center;

color: #333333;

font-size: 20px;

line-height: 40px;

}

.content .useful-links ul li:last-child{

margin-right: 0;

}

.content .news-and-notice{

width: 1200px;

height: 420px;

/*background-color: red;*/

margin: 0 auto;

margin-top: 56px;

}

.content .news-and-notice .news{

float: left;

width: 877px;

height: 376px;

/* background-color: blue;*/

}

.content .news-and-notice .notice{

float: left;

width: 323px;

height: 376px;

/*background-color: rgb(0, 255, 94);*/

}

.content .news-and-notice .news h3{

height: 33px;

margin-bottom: 10px;

}

.content .news-and-notice .news .news-content .hot-news{

float: left;

width: 422px;

height: 328px;

margin-right: 20px;

position: relative;

}

.content .news-and-notice .news .news-content .hot-news .info{

position: absolute;

width: 100%;

height: 40px;

bottom: 0;

left: 0;

background-color: rgba(0,0,0,.3);

text-align: center;

color: white;

line-height: 40px;

}

.content .news-and-notice .news .news-content ul{

float: left;

width: 400px;

height: 328px;

}

.content .news-and-notice .news .news-content ul li{

line-height: 41px;

}

.content .news-and-notice .news .news-content ul li a{

float: left;

color: #666666;

}

.content .news-and-notice .news .news-content ul li span{

float: right;

}

.content .news-and-notice .news .news-content ul li.spec a{

color: #00978E;

font-weight: bold;

}

.content .news-and-notice .notice h3{

height: 33px;

margin-top: 10px;

margin-bottom: 14px;

}

.content .news-and-notice .notice ol li {

overflow: hidden;

margin-bottom: 14px;

}

.content .news-and-notice .notice ol li .number{

float: left;

width: 53px;

height: 57px;

background-color: #00978E;

font-size: 30px;

color: white;

text-align: center;

line-height: 57px;

margin-right: 9px;

}

.content .news-and-notice .notice ol li dl dt a{

color: #666;

}

.content .news-and-notice .notice ol li dd a{

color: #999;

}

.content .ad-images{

width: 1200px;

margin: 0 auto;

}

.content .dep-info{

height: 400px;

background-color: #fafafa;

}

.content .dep-info .center{

width: 1200px;

margin: 0 auto;

overflow: hidden;

padding-top: 37px;

position: relative;

}

.content .dep-info .center .more{

position: absolute;

top: 37px;

right: 0;

color: #999999;

}

.content .dep-info .center .col{

float: left;

width: 270px;

padding-left: 30px;

}

.content .dep-info .center .col h4{

text-align: center;

margin-bottom: 18px;

margin-top: 20px;

position: relative;

}

.content .dep-info .center .col h4::before{

content:'' ;

position: absolute;

left: 72px;

top: 10px;

width: 40px;

height: 2px;

background-color: #00978E;

}

.content .dep-info .center .col h4::after{

content:'' ;

position: absolute;

left: 157px;

top: 10px;

width: 40px;

height: 2px;

background-color: #00978E;

}

.content .dep-info .center .col li{

float: left;

width: 119px;

height: 34px;

border: 1px solid black;

text-align: center;

line-height: 34px;

margin-right: 17px;

margin-bottom: 16px;

}

.content .dep-info .center .col li a{

color: #333333;

}

.content .dep-info .center .col li:nth-child(2n){

/*margin: 0;*/

margin-right: 0;

}

.content .dep-info .center .col li.spec a{

color: #00978E;

font-weight: bold;

}

.content .exp-info{

width: 1200px;

padding-top: 24px;

margin: 0 auto;

position: relative;

}

.content .exp-info .more{

position: absolute;

right: 0;

top: 37px;

color: #999999;

}

.content .exp-info ul{

overflow: hidden;

padding-top: 20px;

}

.content .exp-info ul li{

float: left;

width: 400px;

height: 240px;

}

.content .exp-info ul li .picbox{

float: left;

width: 152px;

}

.content .exp-info ul li .texbox{

float: left;

width: 230px;

padding-left: 10px;

color: #333;

line-height: 29px;

}

.content .exp-info ul li .picbox img{

width: 152px;

}

/*页脚*/

footer{

width: 395px;

background-color: #fafafa;

}

footer .center{

width: 1200px;

text-align: center;

margin: 0 auto;

padding-top: 26px;

}

footer .center h3{

font-size: 20px;

color: #333333;

}

footer .center .friend-links li ul{

overflow: hidden;

padding-top: 20px;

}

footer .center .friend-links li{

float: left;

padding: 0 50px;

}

footer .center .friend-links li a{

color: #333333;

font-size: 16px;

}

footer .center address{

font-style: normal;

padding-top: 30px;

}

footer .center address ul{

width: 730px;

padding-top: 20px;

}

footer .center address ul li{

float: left;

width: 207px;

margin-bottom: 20px;

}

<!DOCTYPE html>

<head>

<title>小慕医生-责任品质关爱</title>

</head>

<body>

</div>

</div>

</button>

</div>

<ul>

</ul>

</nav>

</header>

</div>

<h2>责任科学严谨</h2>

</div>

<ol>

</ol>

</section>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

“全国首届健康预防与商业医疗保险论坛”在北京医院举办

</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 class="spec"><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>

<ol>

<li>

<dl>

<dd><a href="">特殊时期糖尿病的新冠</a></dd>

</dl>

</li>

<li>

<dl>

<dd><a href="">王少为主任新型冠状病毒防控指引十八…</a></dd>

</dl>

</li>

<li>

<dl>

<dt><a href="">《我要当医生》</a></dt>

<dd><a href="">谭玲副主任李同舟姚晨蕊药师</a></dd>

</dl>

</li>

<li>

<dl>

<dt><a href="">《全民健康学院》</a></dt>

<dd><a href="">王建业院长 “医”路有你健康同行</a></dd>

</dl>

</li>

<li>

<dl>

<dd><a href="">王建业院长莫把衰老当病治</a></dd>

</dl>

</li>

</ol>

</div>

</a>

</aside>

<ul>

<li><a href="">心血管内科</a></li>

</ul>

</div>

<ul>

<li><a href="">肿瘤康复科</a></li>

<li><a href="">肿瘤综合科</a></li>

</ul>

</div>

<ul>

<li><a href="">心血管外科</a></li>

</ul>

</div>

<ul>

<li><a href="">儿童营养科</a></li>

</ul>

</div>

<ul>

<li>

</a>

</div>

<p>介绍：北京医院肿瘤内科科室主任，党支部书记，副教授，硕士研究生导师，中国老年肿瘤专业委员会肺癌分委会常务委员，北京医学……</p>

</div>

</li>

<li>

</a>

</div>

<p>介绍：北京医院肾内科主任，主任医师，硕士研究生导师。1989年毕业于华西医科大学临床医学院，后在北京医院内科、肾内科工作……</p>

</div>

</li>

<li>

</a>

</div>

<p>科室：风湿免疫科</p>

<p>介绍：教授主任医师研究生导师卫生部北京医院风湿免疫科主任，北京大学医学部风湿免疫系副主任；海峡两岸医师交流协会风湿免疫……</p>

</div>

</li>

<li>

</a>

</div>

<p>科室：特需医疗部</p>

<p>介绍：北京医院特需医疗部（健康管理中心）/全科医疗部主任，老年与全科医学中心副主任，主任医师，医学硕士。北京大学医学部硕士……</p>

</div>

</li>

<li>

</a>

</div>

<p>介绍：北京医院普通外科主任，胃肠外科主任，北京大学医学部硕士研究生导师，1985年毕业于白求恩医科大学，从事普外科临床工……</p>

</div>

</li>

<li>

</a>

</div>

<p>介绍：北京医院神经内科主任，主任医师，北京大学医学部神经病学系副主任、教授。中国医师协会神经内科医师分会副会长兼帕金……</p>

</div>

</li>

</ul>

</div>

</section>

<ul>

<li>地址：北理工国防大厦111号</li>

<li>邮箱：kefu@imooc.com</li>

<li>网址：<a href="">http://imooc.com</a></li>

</ul>

</address>

</div>

<ul>

</ul>

</div>

</body>

</html>

Jiaco 2022-06-23

源自：浮动与定位 4-14 小慕医生项目开发（9）

收起

1回答

imooc_慕慕回答被采纳获得+3积分 2022-06-23 18:05:10

同学你好，footer标签书写错误，修改参考如下：

祝学习愉快~

收起回答

Jiaco 提问者 #1

老师改了footer 效果是这样

2022-06-23 18:16:58
imooc_慕慕回复提问者 Jiaco #2

同学你好，footer应该设置的是高度；参考如下：
center盒子内容是上下写反了，应该包裹着里面的两个盒子，修改参考如下
祝学习愉快~

2022-06-23 18:34:13