4-14 小慕医生项目开发
老师，请检查代码是否有问题
index.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" alt=""> <span class="telnumber">088-88888888</span> <a href=""><img class="cn-icon icon" src="images/chinese_icon.png" alt=""></a> <a href=""><img class="'en-icon icon" src="images/english_icon.png" alt=""></a> </div> <div class="r2"> <input type="text" placeholder="找医生/科室"> <button><img src='images/search.png'></button> </div> </div> </div> <!-- 网页头部中绿色的导航条 --> <nav class="main-nav"> <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> </nav> </header> <!-- 网页的banner --> <section class="banner"> <img class="pic" 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="useful-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"> <!-- 医院动态 --> <div class="news-content"> <h3>医院动态</h3> <!-- 图片新闻 --> <div class="hot-news"> <img src="images/news_pic.png" alt=""> <div class="remark">全国首届健康预防与商业医疗保险论坛在北京医院举办</div> </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 class="notice"> <h3>医院公告</h3> <ol> <li> <div class="num">01</div> <dl> <dt><a href=''>《养生堂》</a></dt> <dd><a href=''>公郭立新主任 特殊时期糖尿病人的新冠…</a></dd> </dl> </li> <li> <div class="num">02</div> <dl> <dt><a href=''>《养生堂》</a></dt> <dd><a href=''>王少为主任 新型冠状病毒防控指引十八…</a></dd> </dl> </li> <li> <div class="num">03</div> <dl> <dt><a href=''>《我要当医生》</a></dt> <dd><a href=''>谭玲副主任 李同舟 姚晨蕊药</a></dd> </dl> </li> <li> <div class="num">04</div> <dl> <dt><a href=''>《全民健康学院》</a></dt> <dd><a href=''>王建业院长 “医”路有你 健康</a></dd> </dl> </li> <li> <div class="num">05</div> <dl> <dt><a href=''>《健康北京》</a></dt> <dd><a href=''>王建业院长 莫把衰老当病治</a></dd> </dl> </li> </ol> </div> </div> <!-- 宣传图片 --> <aside class="ad-images"> <img src="images/xuanchuan.png" alt=""> </aside> <!-- 科室介绍 --> <div class="department-info"> <div class="center"> <h3>科室介绍</h3> <a class="more" href="">查看更多>></a> <div class="dep-content"> <div class="item"> <h4>内科</h4> <ul> <li><a class="cur" href=''>呼吸内科</a></li> <li><a class="cur" 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="item"> <h4>肿瘤科</h4> <ul> <li><a class="cur" href=''>肿瘤内科</a></li> <li><a class="cur" 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="item"> <h4>外科</h4> <ul> <li><a class="cur" href=''>普通内科</a></li> <li><a class="cur" 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="item"> <h4>儿科</h4> <ul> <li><a class="cur" href=''>儿科综合</a></li> <li><a class="cur" 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> </div> <!-- 专家介绍 --> <div class="exp-info"> <h3>专家介绍</h3> <a href="" class="more">查看更多;>></a> <ul> <li> <!-- 左侧专家照片 --> <div class="exp-pic"> <img src="images/lilin.png" alt=""> </div> <!-- 右侧专家信息--> <div class="exp-info"> <p>姓名：李琳</p> <p>科室：肿瘤内科</p> <p>职称：主任医师</p> <p>介绍：北京医院肿瘤内科科室主任，党支部书记，副教授，硕士研究生导师，中国老年肿瘤专业委员会肺癌分委会常务委员，北京医学……</p> </div> </li> <li> <!-- 左侧专家照片 --> <div class="exp-pic"> <img src="images/maoxiaohui.png" alt=""> </div> <!-- 右侧专家信息--> <div class="exp-info"> <p>姓名：毛永辉</p> <p>科室：肾脏内科</p> <p>职称：主任医师</p> <p>介绍：北京医院肾内科主任，主任医师，硕士研究生导师。1989年毕业于华西医科大学临床医学院，后在北京医院内科、肾内科工作……</p> </div> </li> <li> <!-- 左侧专家照片 --> <div class="exp-pic"> <img src="images/huangcibo.png" alt=""> </div> <!-- 右侧专家信息--> <div class="exp-info"> <p>姓名：黄慈波</p> <p>科室：风湿免疫科</p> <p>职称：主任医师</p> <p>介绍：教授主任医师研究生导师卫生部北京医院风湿免疫科主任，北京大学医学部风湿免疫系副主任；海峡两岸医师交流协会风湿免疫……</p> </div> </li> <li> <!-- 左侧专家照片 --> <div class="exp-pic"> <img src="images/huangcibo.png" alt=""> </div> <!-- 右侧专家信息--> <div class="exp-info"> <p>姓名：曹素艳</p> <p>科室：特需医疗部</p> <p>职称：主任医师</p> <p>介绍：北京医院特需医疗部（健康管理中心）/全科医疗部主任，老年与全科医学中心副主任，主任医师，医学硕士。北京大学医学部硕士……</p> </div> </li> <li> <!-- 左侧专家照片 --> <div class="exp-pic"> <img src="images/chenhaibo.png" alt=""> </div> <!-- 右侧专家信息--> <div class="exp-info"> <p>姓名：陈海波</p> <p>科室：神经内科</p> <p>职称：主任医师</p> <p>介绍：北京医院神经内科主任，主任医师，北京大学医学部神经病学系副主任、教授。中国医师协会神经内科医师分会副会长兼帕金……</p> </div> </li> <li> <!-- 左侧专家照片 --> <div class="exp-pic"> <img src="images/jack.png" alt=""> </div> <!-- 右侧专家信息--> <div class="exp-info"> <p>姓名：Jack</p> <p>科室：普通外科</p> <p>职称：主任医师</p> <p>介绍：北京医院普通外科主任，胃肠外科主任，北京大学医学部硕士研究生导师，1985年毕业于白求恩医科大学，从事普外科临床工……</p> </div> </li> </ul> </div> <!-- 页脚 --> <footer> <div class="center"> <!-- 友情链接 --> <div class="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> </div> </footer> </section> </body> </html>
css.css--
* {
padding: 0;
margin: 0;
}
/* 去掉所有ul和ol 的小圆点 */
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: 36px;
width: 192px;
height: 63px;
float: left;
font-size: 24px;
color: #00978E
}
header .header-top .logo h1 {
width: 192px;
height: 63px;
}
header .header-top .tool {
width: 266px;
height: 67px;
float: right;
padding-top: 22px;
}
header .header-top .tool .r1 {
margin-bottom: 10px;
}
header .header-top .tool .r1 .tel {
width: 32px;
height: 25px;
vertical-align: middle;
}
header .header-top .tool .r1 .telnumber {
font-size: 20px;
color: #00978E;
display: inline-block;
width: 146.9px;
height: 26px;
text-align: center;
vertical-align: middle;
}
header .header-top .tool .r1 .icon {
width: 24px;
height: 24px;
vertical-align: middle;
}
header .header-top .tool .r1 .cn-icon {
margin-right: 14px;
vertical-align: middle;
}
header .header-top .tool .r2 {
border: 1px solid rgba(202, 202, 202, 0.60);
width: 264px;
height: 28px;
}
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;
}
header .main-nav {
height: 60px;
background: #00978E;
margin-top: 20px;
}
header .main-nav ul {
width: 1200px;
height: 60px;
margin: 0 auto;
}
header .main-nav ul li {
float: left;
width: 150px;
height: 60px;
text-align: center;
line-height: 60px;
}
header .main-nav ul li:first-child {
background-color: #015E58;
}
header .main-nav ul li a {
display: block;
width: 150px;
height: 60px;
font-size: 16px;
color: white;
}
header .main-nav ul li a:hover {
background-color: orange;
}
section.banner {
width: 100%;
height: 570px;
position: relative;
}
section.banner img {
width: 100%;
height: 570px;
margin: 0 auto;
}
section.banner div.center {
width: 1200px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -600px
}
section.banner div.center .left-btn {
width: 56px;
height: 64px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
left: 0;
top: 50%;
margin-top: -32px;
}
section.banner div.center .right-btn {
width: 56px;
height: 64px;
background-color: rgba(0, 0, 0, .3);
position: absolute;
right: 0;
top: 50%;
margin-top: -32px;
}
section.banner div.center h2 {
width: 480px;
height: 79px;
font-size: 60px;
color: #015E58;
position: absolute;
left: 148px;
top: 50%;
margin-top: -50px;
}
section.banner ol {
width: 120px;
height: 12px;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -60px;
}
section.banner ol li {
width: 20px;
height: 12px;
margin-right: 10px;
float: left;
background: #FFFFFF;
}
section.banner ol li:last-child {
margin-right: 0;
}
section.banner ol li.cur {
background: #00978E;
width: 30px;
height: 12px;
}
section.content {
padding-top: 71px;
}
section.content .useful-links {
width: 906px;
height: 148px;
margin: 0 auto;
overflow: hidden;
}
section.content .useful-links li {
float: left;
width: 106px;
height: 106px;
margin-right: 54px;
text-align: center;
}
section.content .useful-links li:last-child {
margin-right: 0;
}
section.content .useful-links span {
display: block;
height: 26px;
margin-top: 13px;
font-size: 20px;
color: #000000;
text-align: center;
}
section.content .news-and-notice {
width: 1200px;
height: 376px;
margin: 0 auto;
margin-top: 56px;
margin-bottom: 20px;
}
section.content .news-and-notice .news-content {
float: left;
width: 878px;
height: 376px;
}
section.content .news-and-notice .news-content h3 {
font-size: 16px;
color: #000000;
}
section.content .news-and-notice .news-content img {
width: 422px;
height: 328px;
margin-top: 27px;
display: block;
}
section.content .news-and-notice .news-content .hot-news {
float: left;
position: relative;
}
/* 遮罩层 */
section.content .news-and-notice .news-content .hot-news .remark {
position: absolute;
left: 0;
bottom: 0;
width: 422px;
height: 40px;
background: rgba(8, 8, 8, 0.40);
text-align: center;
line-height: 40px;
font-size: 14px;
color: #FFFFFF;
}
section.content .news-and-notice .news-content ul {
float: right;
width: 441px;
height: 328px;
margin-top: 27px;
line-height: 40px;
}
section.content .news-and-notice .news-content ul li {
overflow: hidden;
}
section.content .news-and-notice .news-content ul li a {
float: left;
font-size: 14px;
color: #000000;
}
section.content .news-and-notice .news-content ul li a.spec {
color: #00978E;
}
section.content .news-and-notice .news-content ul li span {
float: right;
font-size: 14px;
color: #000000;
padding-right: 40px;
}
section.content .news-and-notice .notice {
float: right;
width: 322px;
height: 376px;
}
section.content .news-and-notice .notice h3 {
font-size: 16px;
color: #000000;
margin-bottom: 16px;
}
section.content .news-and-notice .notice ol {
width: 322px;
height: 331px;
}
section.content .news-and-notice .notice ol li {
width: 332px;
margin-top: 14px;
overflow: hidden;
}
section.content .news-and-notice .notice ol li .num {
float: left;
background: #00978E;
width: 53px;
height: 57px;
font-size: 30px;
color: #FFFFFF;
margin-right: 16px;
text-align: center;
line-height: 57px;
}
section.content .news-and-notice .notice ol li dl {
float: left;
}
section.content .news-and-notice .notice ol li dl a {
font-size: 14px;
color: #000000;
}
section.content .ad-images {
margin: 0 auto;
width: 1200px;
}
section.content .department-info {
width: 100%;
height: 437px;
background: #FAFAFA;
margin-top: 28px;
}
section.content .department-info .center {
width: 1202px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
section.content .department-info .center .item {
float: left;
width: 271px;
padding-left: 29px;
}
section.content .department-info .center h3 {
font-size: 16px;
color: #000000;
padding-top: 36px;
}
section.content .department-info .center a.more {
position: absolute;
font-size: 14px;
color: #999999;
top: 39px;
right: 0px;
}
section.content .department-info .center .item h4 {
font-size: 14px;
color: #000000;
margin-bottom: 14px;
margin-top: 17px;
text-align: center;
position: relative;
}
section.content .department-info .center .item h4::before {
content: '';
background-color: #00978E;
width: 40px;
height: 2px;
position: absolute;
left: 65px;
bottom: 12px;
}
section.content .department-info .center .item h4::after {
content: '';
background-color: #00978E;
width: 40px;
height: 2px;
position: absolute;
right: 65px;
bottom: 12px;
}
section.content .department-info .center .item ul {
width: 267px;
margin-right: 37px;
overflow: hidden;
}
section.content .department-info .center .item ul li {
float: left;
width: 121px;
height: 36px;
background: #FFFFFF;
border: 1px solid #AAA9A9;
margin-bottom: 25px;
text-align: center;
line-height: 36px;
margin-right: 21px;
}
section.content .department-info .center .item ul li:nth-child(2n) {
margin-right: 0;
}
section.content .department-info .center .item ul li a.cur {
font-size: 14px;
color: #00978E;
text-align: right;
}
section.content .department-info .center .item ul li a {
font-size: 14px;
color: #000000;
text-align: right;
}
section.content div.exp-info {
width: 1200px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
section.content div.exp-info h3 {
font-size: 16px;
color: #000000;
padding-top: 60px;
}
section.content div.exp-info a.more {
position: absolute;
right: 0;
top: 64px;
width: 77px;
height: 18px;
font-size: 14px;
color: #999999
}
section.content div.exp-info ul {
margin-top: 20px;
overflow: hidden;
}
section.content div.exp-info ul li {
float: left;
width: 400px;
overflow: hidden;
margin-bottom: 58px;
}
section.content div.exp-info ul li .exp-pic {
float: left;
width: 152px;
height: 190px;
}
section.content div.exp-info ul li .exp-info {
float: left;
margin-left: 13px;
width: 222px;
height: 190px;
font-size: 14px;
color: #000000;
line-height: 27px;
}
footer {
height: 395px;
background-color: #FAFAFA;
}
footer .center {
width: 1200px;
margin: 0 auto;
padding-top: 67px;
}
footer .center .friend-links ul {
overflow: hidden;
margin-top: 20px;
}
footer .center .friend-links ul li {
float: left;
padding-left: 100px;
}
footer .center .friend-links ul li a {
font-size: 16px;
color: #000000;
}
footer .center .friend-links h3 {
font-size: 20px;
color: #000000;
}
footer .center address {
font-style: normal;
padding-top: 30px;
}
footer .center address h3 {
font-size: 20px;
color: #000000;
}
footer .center address ul {
width: 715px;
padding-top: 18px;
overflow: hidden;
}
footer .center address ul li {
float: left;
width: 204px;
height: 24px;
margin-right: 33px;
margin-bottom: 20px;
font-size: 16px;
color: #000000;
line-height: 24px;
}6
收起
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星