项目实践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号      电话:088-88888888      邮箱:kefu@rococo.com     </h3> <br> <br> <h3>邮编:666666         网址:<a href="www.rococo.com">www.rococo.com</a>     举报热线:088-88888888     </h3> </div> <view-router></view-router> </div> </template>
400行,吓死人,真的太臃肿了.
明天去看看别人是怎么完成的,优化一下.
标签:答卷,emsp,实践,呼吸,成品,XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,肿瘤科,rococo,内科 来源: https://www.cnblogs.com/FatTiger4399/p/15570386.html