*{

margin:0;

padding:0;

}

/*去掉所有ul ol的小圆点*/

ul,ol{

list-style:none

}

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

a{

text-decoration:none;

}

/* 使用继承性，给body标签设置字体 */

body{

font:noraml 14px/27px '微软雅黑'；

}

/* 头部 */

header{

}

/*板心 */

header .header-top{

width:1199px;

/* 水平居中 */

margin:0 auto;

/* top大盒子要消除浮动才能形成bfc */

overflow:hidden;

}

header .header-top .logo{

/* logo 盒子用padding-top向下挤了27px，一般不用h1子元素去踹父亲 margin是踹兄弟元素的 */

padding-top:27px;

width:192px;

height:63px;

float:left;

}

header .header-top .logo h1{

width:192px;

height:63px;

color:#00978E

}

header .header-top .tool{

float:right;

width:266px;

height:79px;

padding-top:22px

}

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

width:32px;

height:25px;

}

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

font-size:20px;

color:#00978E;

/* 把span电话号码转为块级元素才能设置尺寸 */

display:inline-block;

width:158px;

height:26px;

/* 书写字体居中属性 */

text-align:center;

}

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

width:24px;

height:24px

}

header .header-top .tool .r1 .chinese_icon{

margin-right:12px;

}

header .header-top .tool .r2{

width:264px;

height:28px;

border: 1px solid rgba(207, 201, 201, 0.5);

/* 也可以通过上面的块 ri 用padding向下踹 */

position:relative;

top:14px;

}

header .header-top .tool .r2 input {

/* 框内文本框和按钮有二个块也需要浮动 */

float:left;

/* 文本框可以设置为减去按钮宽度即可,244 但是调整了padding 224*/

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:4px;

}

header .main-nav{

/* 不写宽度，自动撑满 100% */

width:100%;

height:60px;

background-color: #00978E;

/* 可以header-top向下踹，也可以这块向上踹 */

margin-top:20px;

}

header .main-nav ul{

width:1200px;

height:60px;

/* 有文字一般都使用居中 */

margin:0 auto;

}

/* li并排浮动 */

header .main-nav ul li{

float:left;

width: 150px;

text-align: center;

line-height: 60px;

}

/* 交集选择器，又是li又是cur, */

header .main-nav ul li.cur{

background-color: #015E58;

}

/* li里面需要a标签,并且需要转块才能设置尺寸设置字体和颜色 */

header .main-nav ul li a{

display:inline-block;

width:150px;

height:60px;

font-size:16px;

color:white;

}

header .main-nav ul li a:hover{

background-color: orange;

}

.banner{

width:100%;

position:relative;

}

.banner .banner-img{

width:100%;

}

.banner .center{

position:absolute;

width:1200px;

height:200px;

/* 绝对定位居中 */

top:50%;

left:50%;

margin-top:-100px;

margin-left:-600px;

}

.banner .center .left-btn{

width:56px;

height:64px;

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

position:absolute;

left:0;

top:50%;

margin-top:-37px;

}

.banner .center .right-btn{

width:56px;

height:64px;

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

position:absolute;

right:0;

top:50%;

margin-top:-37px;

}

.banner .center h2{

position:absolute;

color:#015E58;

width:480px;

height:79px;

font-size:60px;

font-weight: normal;

top:50%;

margin-top:-60px;

left:114px;

}

.banner ol{

position:absolute;

width:120px;

height:12px;

bottom:20px;

/* 水平居中 */

left:50%;

margin-left:-60px;

}

.banner ol li{

float:left;

width:20px;

height:12px;

margin-right:10px;

background-color:white;

}

.banner ol li:last-child{

/* 最后一个不用踹 */

margin-right:0;

}

.banner ol li.cur{

background-color:#00978E;

width:30px;

}

.content.{

width:100%;

position:relative;

}

.content .usefule-links{

width:100%;

height:148px;

position:relative;

overflow: hidden;

}

.content .usefule-links ul{

width:982px;

height:148px;

position:absolute;

top:50%;

left:50%;

margin-top:-73.5px;

margin-left:-491px;

text-align: center;

}

.content .usefule-links ul li{

float:left;

width:106px;

height:147.7px;

margin-right:54px;

}

.content .usefule-links ul li a,span{

display: block;

}

.content .usefule-links ul li a{

width:106px;

height:106px;

margin-bottom:15.7px;

}

.content .usefule-links ul li a span{

width:80px;

height:24px;

padding-bottom:2px;

color:#00000000;

font-size:20px;

line-height:24px;

}

html

<!DOCTYPE html>

<html lang="en/zh">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="Description" content="小慕医生是是专业的医院">

<meta name="Keywords" content="养生，老年公寓，老人护理，心理咨询">

<link rel="stylesheet" href="css/css.css">

<title>小慕医生</title>

</head>

<body>

<!--header-->

<header>

<!--网页logo-->

<div class="header-top">

<div class="logo">

<h1>小慕医生</h1>

</div>

<!--网页功能区-->

<div class="tool">

<div class="r1">

<img class="tel" src="images/tel.png" alt="">

<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" alt=""></a>

</div>

<div class="r2">

<input type="text" placeholder="找医生/科室..">

<button><img src="images/search.png" alt=""></button>

</div>

</div>

</div>

<!--网页导航条-->

<nav class="main-nav">

<ul>

<!-- 设置第一个为高光 -->

<li class="cur"><a href="" class="">首页</a></li>

<li><a href="" class="">医院概况</a></li>

<li><a href="" class="">医院动态</a></li>

<li><a href="" class="">专家学科</a></li>

<li><a href="" class="">服务指南</a></li>

<li><a href="" class="">医院文化</a></li>

<li><a href="" class="">信息公开</a></li>

<li><a href="" class="">互动交流</a></li>

</ul>

</nav>

</header>

<!--网页banner-->

<section class="banner">

<img class="banner-img" src="images/banner.png" alt="">

<div class="center">

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

<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">

<!--常用链接-->

<div class="usefule-links">

<ul>

<li>

<a href="">

<img src="images/icon_jzxz.png" alt="">

<span>就诊须知</span></a>

</li>

<li>

<a href="">

<img src="images/icon_jylc.png" alt="">

<span>就医流程</span></a>

</li>

<li>

<a href="">

<img src="images/icon_zjjs.png" alt="">

<span>专家介绍</span></a>

</li>

<li>

<a href="">

<img src="images/icon_ksjs.png" alt="">

<span>科室介绍</span></a>

</li>

<li>

<a href="">

<img src="images/icon_ybjy.png" alt="">

<span>医保就医</span></a>

</li>

<li>

<a href="">

<img src="images/icon_jktj.png" alt="">

<span>健康体检</span></a>

</li>

</ul>

</div>

<!--医院动态和公告区域-->

<div class="news-and-notice">

<h3>医院动态</h3>

<div class="news-content">

<!--图片新闻-->

<div class="hot-news">

<!--放大图片-->

<a href="">

<img src="images/news_pic.png" alt="">

<div>

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

</div>

</a>

</div>

<!--新闻列表-->

<div>

<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="">人力资源社会保障部关于将36种药品纳入国家… </a></li>

</ul>

</div>

</div>

<!--医院公告-->

<div class="notice">

<h3>医院公告</h3>

<ol>

<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>

<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>

<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-info">

<h3>科室介绍</h3>

<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>

<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>

</ul>

</div>

</div>

<!--专家介绍-->

<div class="exp-info">

<h3>专家介绍</h3>

<a href="">查看更多</a>

<ul>

<li>

<div class="picbox">

<a href="">

<img src="images/lilin.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/maoxiaohui.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/huangcibo.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/caosuyan.png">

</a>

</div>

<div class="wordbox">

<p>姓名：曹素艳</p>

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

<p>职称：主任医师</p>

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

</div>

</li>

<li>

<div class="picbox">

<a href="">

<img src="images/chenhaibo.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/jack.png" alt="">

</a>

</div>

<div class="wordbox">

<p>姓名：Jack</p>

<p>科室：普通外科</p>

<p>职称：主任医师</p>

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

</div>

</li>

</ul>

</section>

<!--页脚-->

<footer>

<!--友情链接-->

<div calss="friend-links">

<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>