项目实践2:(答卷)成品

本文主要是介绍项目实践2:(答卷)成品，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

好家伙

大概效果如下:

 总的来说效果还行,但部分区域还是比较拉胯

 代码部分感觉有些过于臃肿了,

<template>
<div>
  <div class="header">
    
    <div class="column shi"><h1>Rococo</h1></div>
    <div class="column qishi"></div>
    <div class="column san">
        <img src="./assets/tel.png" alt="">
    </div>
    <div class="column shiyi">
        <h3>088-88888888</h3>
    </div>
    <div class="column san">
        <img src="./assets/chinese_icon.png" alt="">
    </div>
    <div class="column san">
        <img src="./assets/english_icon.png" alt="">
    </div>
<!--input框-->
  </div>
  <div class="header">
    <input type="text" placeholder="找医生/科室">
  </div>
<!--导航栏-->
<div class="topnav">
  <a href="#">首页</a>
  <a href="#">医院概况</a>
  <a href="#">医院动态</a>
  <a href="#">专家学科</a>
  <a href="#">服务指南</a>
  <a href="#">医院文化</a>
  <a href="#">信息工资</a>
  <a href="#">互动交流</a>

</div>

<div class="row">

  <!--这里放图片轮播-->
 
  
  <div class="column baifenbai">
    
    <div class="container">
        <ul style="">
            <li><img src="./assets/banner.png" alt=""></li>
            <li><img src="./assets/banner.png" alt=""></li>
            <li><img src="./assets/banner.png" alt=""></li>
        </ul>
        <ol style="
    position: absolute;
    bottom: 0;
    left: 50%;
    padding: 10px;
    margin-left: -50px;
    z-index: 999;

">
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    </div>
  
  
  <!--以下是图片廊-->
  <div class="column ershi"></div>
  <div class="column bashi">
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg">
          <img src="./assets/icon_jzxz.png" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">就诊需知</div>
      </div>
    </div>
     
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="//static.runoob.com/images/demo/demo2.jpg">
          <img src="./assets/icon_jylc.png" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">就医流程</div>
      </div>
    </div>
     
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="//static.runoob.com/images/demo/demo3.jpg">
          <img src="./assets/icon_zjjs.png" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">专家介绍</div>
      </div>
    </div>
     
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
          <img src="./assets/icon_ksjs.png" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">科室介绍</div>
      </div>
    </div>
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
          <img src="./assets/icon_ybjy.png" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">医保就医</div>
      </div>
    </div>
    <div class="responsive">
      <div class="img">
        <a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
          <img src="./assets/icon_jktj.png" alt="图片文本描述" width="300" height="200">
        </a>
        <div class="desc">健康体检</div>
      </div>
    </div>

  </div>
   <!--以下是医院动态-->
  <div class="column qi">
    
  </div>

  <div class="column ershiwu">
    <h2>医院动态</h2>
    <br>
    <img src="./assets/news_pic.png" alt="莫得啦">
  </div>

  <div class="column ershiwu">
    <br>
    <br>
<ul class="b">
 <a href="www.baidu.com">好家伙</a>
 <br>
 <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX  11-16</li>
 <br>
 <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX  11-16</li>
 <br>
 <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX  11-16</li>
 <br>
 <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX  11-16</li>
 <br>
 <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX  11-16</li>
 <br>
 <li>XXXXXXXXXXXXXXXXXXXXXXXXXXXX  11-16</li>
 <br>
</ul>  
    
  </div>

  <!--以下是医院公告-->

  <div class="column sishisan">
    <h2>医院公告</h2>
    <div class="column shi">
      <div class="square"><h1 class="xuhaozi">01</h1></div>
      <br>
      <div class="square"><h1 class="xuhaozi">02</h1></div>
      <br>
      <div class="square"><h1 class="xuhaozi">03</h1></div>
      <br>
      <div class="square"><h1 class="xuhaozi">04</h1></div>

      </div>
      <div class="column ershi">
      <h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
      <h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
      <br>
      <h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
      <h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
      <br>
      <br>
      <h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
      <h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
      <br>
      <br>
      <h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
      <h3>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</h3>
    </div>
  </div>

  <div class="column next">
    <h2>这里塞宣传图片</h2>
    <img src="./assets/xuanchuan.png" alt="莫得啦" class="photo">
<br>
    <br> 
  </div>

  <!--以下是科室介绍的四个板块-->
  <div class="column qi">
  </div>


  <div class="column ershiyidianwu">
    <div id="rectangle"></div>
    <h1>科室介绍</h1>
    <h2>内科</h2>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>

    
  </div>
  <div class="column ershiyidianwu">
    <br>
    <br>
    <h2>肿瘤科</h2>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
  </div>
  <div class="column ershiyidianwu">
    <br>
    <br>
    <h2>外科</h2>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
  </div>
  <div class="column ershiyidianwu">
    <br>
    <br>
    <h2>儿科</h2>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
    <br>
    <button class="button1">呼吸内科</button>
    <button class="button1">呼吸内科</button>
    <br>
  </div>
  <div class="column qi">
    <a href="www.baidu.com">查看更多</a>
  </div>
 <!--以下是专家介绍板块-->
 <div class="column next">
    <a href="www.baidu.com"></a>
  </div>

 <div class="column qi">
  </div>
  <div class="column shi">
    <h2>专家介绍</h2>
  </div>
  <div class="column qishiliu">

  </div>
  
  <div class="column qi">
    <a href="www.baidu.com">查看更多</a>
    </div>
    <div class="column next">
    
  </div>
  <!--以下是真正的专家介绍板块-->
  <div class="column qi">
  </div>
  <div class="column shi">
    <img src="./assets/lilin.png" alt="">
  </div>
  <div class="column ershi">
    <h3>姓名:rococo n号</h3>
    <h3>科室:肿瘤科</h3>
    <h3>职称:主任医师</h3>
    <h3>介绍:...........</h3>
  </div>
  <div class="column shi">
    <img src="./assets/maoxiaohui.png" alt="">
  </div>
  <div class="column ershi">
    <h3>姓名:rococo n号</h3>
    <h3>科室:肿瘤科</h3>
    <h3>职称:主任医师</h3>
    <h3>介绍:...........</h3>
  </div>
  <div class="column shi">
    <img src="./assets/huangcibo.png" alt="">
  </div>
  <div class="column ershisan">
    <h3>姓名:rococo n号</h3>
    <h3>科室:肿瘤科</h3>
    <h3>职称:主任医师</h3>
    <h3>介绍:...........</h3>
  </div>
  <div class="column next">
  </div>
  <div class="column qi">
  </div>
  <div class="column shi">
    <img src="./assets/caosuyan.png" alt="">
  </div>
  <div class="column ershi">
    <h3>姓名:rococo n号</h3>
    <h3>科室:肿瘤科</h3>
    <h3>职称:主任医师</h3>
    <h3>介绍:...........</h3>
  </div>
  <div class="column shi">
    <img src="./assets/chenhaibo.png" alt="">
  </div>
  <div class="column ershi">
    <h3>姓名:rococo n号</h3>
    <h3>科室:肿瘤科</h3>
    <h3>职称:主任医师</h3>
    <h3>介绍:...........</h3>
  </div>
  <div class="column shi">
    <img src="./assets/jack.png" alt="">
  </div>
  <div class="column ershisan">
    <h3>姓名:rococo n号</h3>
    <h3>科室:肿瘤科</h3>
    <h3>职称:主任医师</h3>
    <h3>介绍:...........</h3>
  </div>
</div>

<div class="footer">
      <h2 class="d">友情链接</h2>
      <div class="topnava">
        <a href="#">院长信箱</a>
        <a href="#">头绪信箱</a>
        <a href="#">在线调查</a>
        <a href="#">地理位置</a>
        <a href="#">网站地图</a>
        <a href="#">网站帮助</a>
        <a href="#">隐私声明</a>
      </div>
      <br>
      <br>
      <h3>地址:国防大厦111号 &emsp;&emsp;&emsp;&emsp;
      电话:088-88888888 &emsp;&emsp;&emsp;&emsp;
      邮箱:kefu@rococo.com &emsp;&emsp;&emsp;&emsp;</h3>
      <br>
      <br>
      <h3>邮编:666666 &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
      网址:<a href="www.rococo.com">www.rococo.com</a>
      &emsp;&emsp;&emsp;
      举报热线:088-88888888 &emsp;&emsp;&emsp;&emsp;</h3>
   </div>


  <view-router></view-router>
</div>
</template>

400行,吓死人,真的太臃肿了.

明天去看看别人是怎么完成的,优化一下.

这篇关于项目实践2:(答卷)成品的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！