Java教程
项目实践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号     
电话: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行,吓死人,真的太臃肿了.
明天去看看别人是怎么完成的,优化一下.
这篇关于项目实践2:(答卷)成品的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
springboot项目无法注册到nacos-icode9专业技术文章分享07-02
-
结对编程到底难不难？答案在这里06-26
-
《2023版Java工程师》课程升级公告06-19
-
matplotlib作图不显示3D图，怎么办？06-15
-
03-Loki 日志监控06-15
-
04-让LLM理解知识 -Prompt06-15
-
做软件测试需要懂代码吗？06-05
-
14-ShardingSphere的分布式主键实现06-05
-
为什么以及如何要进行架构设计权衡？06-03
-
全网首发第二弹！软考2024年5月《软件设计师》真题+解析+答案！（11-20题）05-31
-
全网首发！软考2024年5月《软件设计师》真题+解析+答案！（21-30题）05-31
-
【Java】百万数据excel导出功能如何实现05-30
-
我们小公司，哪像华为一样，用得上IPD（集成产品开发）？05-30
-
java excel上传--poi05-30
-
安装笔记本应用商店的pycharm，再安排pandas等模块，说是没有打包工具?05-30
栏目导航
