ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2021-11-18 02:31:54  阅读：159  来源： 互联网

标签：答卷 emsp 实践 呼吸 成品 XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX 肿瘤科 rococo 内科


好家伙

 

大概效果如下:

 

 

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

 

 

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

<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行,吓死人,真的太臃肿了.

 

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

标签：答卷,emsp,实践,呼吸,成品,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,肿瘤科,rococo,内科
来源： https://www.cnblogs.com/FatTiger4399/p/15570386.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有