体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

麻烦老师帮我检查一下代码，谢谢

来源：4-9 小慕医生项目开发（6）

芜湖呼

2021-08-03 07:47:24

<!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" />
    <meta name="Keywords" content="美容,外科,内科" />
    <meta name="Description" content="责任，科学，严谨" />
    <title>小慕医生-责任，科学，严谨</title>
    <link rel="stylesheet" href="CSS/CSS.CSS"></link>

  </head>
  <body>
    <!-- 头部 -->
    <header>
      <div class="header-top">

        <!-- logo -->
        <div class="logo"><h1>小慕医生</h1></div>
        <!-- 功能区 -->
        <div class="tool">
          <!-- <audio
            src="F:\网易云音乐PC版\下载曲目\随风+-+周深《古董局中局》插曲.mp3"
            controls
            autoplay
          ></audio> -->
          <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" name="" id="" placeholder="找医生/找科室...">
            <button><img src="images/search.png" alt=""></button>
          </div>
        </div>
      </div>
      <!-- 导航条 -->
      <nav class="main-nav">
        <ul>
          <li class="highlight"><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="banner-img" src="images/banner.png" alt=""/>
      <div class="center">
        <h2>责任，科学，严谨</h2>
        <a href="#" class="leftbtn"></a>
        <a href="#" class="rightbtn"></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">
          <h3>医院动态</h3>
          <div class="news-content">
            <!-- 图片新闻 -->
            <div class="hot-news">
              <a href="">
                <img src="images/news_pic.png" alt="" />
                <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><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><a href="">公郭立新主任 特殊时期糖尿病人的新冠…</a></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>
      <!-- 宣传图片 -->
      <aside class="ad-images">
        <img src="images/xuanchuan.png" alt="" />
      </aside>
      <!-- 科室介绍 -->
      <div class="dep-Info">
        <h3>科室介绍</h3>
        <a href="">查看更多</a>
        <div class="dep1">
          <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 class="dep2">
          <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 class="dep3">
          <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>
            <li><a href="">乳腺外科</a></li>
          </ul>
        </div>
        <div class="dep4">
          <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="exp1">
              <div class="image">
                <a href=""><img src="images/Mask group1.png" alt="" /></a>
              </div>
              <div class="word">
                <p>姓名：李琳</p>
                <p>科室：肿瘤内科</p>
                <p>职称：主任医师</p>
                <p>
                  介绍：北京医院肿瘤内科科室主任，党支部书记，副教授，硕士研究生导师，中国老年肿瘤专业委员会肺癌分委会常务委员，北京医学……
                </p>
              </div>
            </div>
          </li>
          <li>
            <div class="exp2">
              <div class="image">
                <a href=""><img src="images/Mask group2.png" alt="" /></a>
              </div>
              <div class="word">
                <p>姓名：毛永辉</p>
                <p>科室：肾脏内科</p>
                <p>职称：主任医师</p>
                <p>
                  介绍：北京医院肾内科主任，主任医师，硕士研究生导师。1989年毕业于华西医科大学临床医学院，后在北京医院内科、肾内科工作……
                </p>
              </div>
            </div>
          </li>
          <li>
            <div class="exp3">
              <div class="image">
                <a href=""><img src="images/Mask group3.png" alt="" /></a>
              </div>
              <div class="word">
                <p>姓名：黄慈波</p>
                <p>科室：风湿免疫科</p>
                <p>职称：主任医师</p>
                <p>
                  介绍：教授主任医师研究生导师卫生部北京医院风湿免疫科主任，北京大学医学部风湿免疫系副主任；海峡两岸医师交流协会风湿免疫……
                </p>
              </div>
            </div>
          </li>
          <li>
            <div class="exp4">
              <div class="image">
                <a href=""><img src="images/Mask group4.png" alt="" /></a>
              </div>
              <div class="word">
                <p>姓名：曹素艳</p>
                <p>科室：特需医疗部</p>
                <p>职称：主任医师</p>
                <p>
                  介绍：北京医院特需医疗部（健康管理中心）/全科医疗部主任，老年与全科医学中心副主任，主任医师，医学硕士。北京大学医学部硕士……
                </p>
              </div>
            </div>
          </li>
          <li>
            <div class="exp5">
              <div class="image">
                <a href=""><img src="images/Mask group5.png" alt="" /></a>
              </div>
              <div>
                <p>姓名：陈海波</p>
                <p>科室：神经内科</p>
                <p>职称：主任医师</p>
                <p>
                  介绍：北京医院神经内科主任，主任医师，北京大学医学部神经病学系副主任、教授。中国医师协会神经内科医师分会副会长兼帕金……
                </p>
              </div>
            </div>
          </li>
          <li>
            <div class="exp6">
              <div class="image">
                <a href=""><img src="images/Mask group6.png" alt="" /></a>
              </div>
              <div>
                <p>姓名：Jack</p>
                <p>科室：普通外科</p>
                <p>职称：主任医师</p>
                <p>
                  介绍：北京医院普通外科主任，胃肠外科主任，北京大学医学部硕士研究生导师，1985年毕业于白求恩医科大学，从事普外科临床工……
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <!-- 页脚 -->
    <footer>
      <!-- 链接 -->
      <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">网址：http://imooc.com</a></li>
          <li>举报热线：088-88888888</li>
        </ul>
      </address>
    </footer>
  </body>
</html>

​
*{
    margin: 0;
    padding: 0;
}
ul, ol{
    list-style: none;
}
a{
    text-decoration: none;
}
body{
    font: normal 14px/25px "微软雅黑";

}
header .header-top{
    width: 1199px;
    margin: 0 auto;
    overflow: hidden;
}
header .header-top .logo{
    width: 192px;
    height: 63px;
    padding-top: 39px;
    float: left;
    font-size: 20px;
    color: #00978E;
}
header .header-top .logo h1{
    width: 192px;
    height: 63px;
    /* background-color: orange; */
}
header .header-top .tool{
    float:right;
    width: 266px;
    height: 77px;
    /* background-color: green; */
    padding-top: 35px;
}
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: 24px;
    height: 24px;
}
header .header-top .tool .r1 .chinese_icon{
    margin-right: 14.1px;
}
header .header-top .tool .r2{
    width: 264px;
    height: 28px;
    background: #FFFFFF;
    border: 1px solid rgba(202,202,202,0.60);
    margin-top: 12px;
}
header .header-top .tool .r2 input{
    float: left;
    width: 224px;
    height: 28px;
    /* 去掉边框 */
    border: none;
    padding-left: 19px;
    /* 去掉鼠标点击时候的蓝色框 */
    outline: none;

}
header .header-top .tool .r2 button{
    float: right;
    width: 20px;
    height: 20px;
    /* 去掉背景 */
    background: none;
    /* 去边框 */
    border: none;
    /* 去掉鼠标点击时候的蓝色框 */
    outline: none;
    /* 设置触碰时鼠标指针的样式 */
    cursor: pointer;
    position: relative;
    top:3px;
    right: 4px;
}
header .main-nav{
    /* 不用写宽度，自动填满 */
    /* width: 100%; */
    height: 60px;
    background: #00978E;
    margin-top: 33px;
}
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.highlight{
    background: #015E58;
}
/* 如果不设置这个，只能按到文字那里才触发超链接 */
header .main-nav ul li a{
    display: block;
    width: 150px;
    height: 60px;
    font-size: 16px;
    color: #FFFFFF;
}
header .main-nav ul li a:hover{
    background: orange;
}
section.banner{
    width: 100%;
    position: relative;
}
section.banner .banner-img {
    width: 100%;
}
section.banner .center{
    position: absolute;
    width: 1200px;
    height: 300px;
    /* background: orange; */
    top:50%;
    left:50%;
    margin-top: -150px;
    margin-left: -600px;
}
section.banner .leftbtn{
    position:absolute;
    top:50%;
    margin-top: -32px;
    left: 0px;
    background: rgba(0, 0, 0, 0.3);
    width: 56px;
    height: 64px;
}
section.banner .rightbtn{
    position:absolute;
    top:50%;
    margin-top: -32px;
    right: 0px;
    background: rgba(0, 0, 0, 0.3);
    width: 56px;
    height: 64px;
}
section.banner h2{
    position: absolute;
    width: 480px;
    height: 79px;
    top: 50%;
    margin-top: -79px;
    left: 148px;
    font-size: 60px;
    font-weight: normal;
    color: #015E58;
}
section.banner ol{
    /* background: #000; */
    width: 120px;
    height: 12px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -60px;
}
section.banner ol li{
    background: #FFFFFF;
    float: left;
    width: 20px;
    height: 12px;
    margin-right: 10px;
}
/* 最后一个没有margin */
section.banner ol li:last-child{
    margin-right: 0px;
}
section.banner ol li.cur{
    background: #00978E;
    width: 30px;
}
.content{
    padding-top: 71px;
}
.content .useful-links{
    /* background: #000; */
    width: 906px;
    height: 147px;
    margin: 0 auto;

}
.content .useful-links ul{
    overflow: hidden;
}
.content .useful-links ul li{
    float: left;
    width: 106px;
    padding-right: 54px;
}
.content .useful-links ul li:last-child{
    padding-right: 0px;
}
.content .useful-links ul li span{
    display: block;
    text-align: center;
    font-size: 20px;
    color: #333;
    line-height: 40px;
}
.content .news-and-notice{
    width: 1200px;
    height: 376px;
    margin: 0 auto;
    /* background: orange; */
    margin-top: 56px;
    overflow: hidden;
}
.content .news-and-notice .news{
    float: left;
    width: 877px;
    height: 376px;
    /* background: red; */
}
.content .news-and-notice .notice{
    float: right;
    width: 323px;
    height: 376px;
    background: white;
}
.content .news-and-notice h3{
    font-size: 16px;
    color: #000000;
    height: 33px;
    margin-bottom: 10px;
}
.content .news-and-notice .news .news-content .hot-news{
    position: relative;
    width: 423px;
    height: 328px;
    float: left;
    margin-right: 10px;
}
.content .news-and-notice .news .news-content .hot-news div{
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0px;
    bottom: 0px;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;

}
.content .news-and-notice .news .news-content ul{
    float: left;
    width: 400px;
    height: 328px;
}
.content .news-and-notice .news .news-content ul li{
    font-size: 14px;
    line-height: 40px;
}
.content .news-and-notice .news .news-content ul a{
    float: left;
    color: #666;
}
.content .news-and-notice .news .news-content ul a.spec{
    color:#00978E;
}
.content .news-and-notice .news .news-content ul span{
    float: right;
}
.content .news-and-notice .notice li{
    overflow: hidden;
    margin-bottom: 8px;
}
.content .news-and-notice .notice .number{
    float: left;
    font-size: 20px;
    color: #FFFFFF;
    background-color: #00978E;
    width: 53px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    margin-right: 16px;
}
.content .news-and-notice .notice dl dt a{
    color: #666;
}
.content .news-and-notice .notice dl dt a{
    color: #666;
}
.ad-images{
    width: 1200px;
    height: 168px;
    margin: 20px auto;
    margin-bottom: 28px;
}


写回答

1回答

好帮手慕慕子

2021-08-03

同学你好，医院公告下的文字颜色不对，且内容换行显示了，如下图所示：

http://img.mukewang.com/climg/6108ab1609e3888608260370.jpg

建议修改：设置dd下的a文字颜色为#999

http://img.mukewang.com/climg/6108ad22092eea8012800526.jpg

然后调整numer的右间距即可，如下：

​http://img.mukewang.com/climg/6108ad61097bbff111000618.jpg

祝学习愉快~

1

0 学习 · 15276 问题

查看课程

相似问题

麻烦老师检查一下代码，谢谢

回答 2

麻烦老师帮我检查一下代码，谢谢

回答 1

麻烦老师帮我检查一下，谢谢

回答 1

麻烦老师帮我检查一下，谢谢

回答 1

麻烦老师帮忙看下代码是否有问题 谢谢

回答 1

打开慕课网App查看更多内容