项目实训-vue（九）

项目实训-vue（九）

1.概述

2.首页医院动态新闻链接部分

主要的前端代码如下：

<div class="main_top_right"><h2 class="main_title main_top_title" style="display: flex;"><ahref="javascript:;"class=""style="margin-left: 30px;color: #1a4287;font-size: 20px;text-decoration: none;font-family: 'Microsoft YaHei';">医院动态</a></h2><ul class="news_list news_list1"><liclass="Li_Odd"style="width: 350px; height: 70px; display: flex"><ahref="https://www.sph.com.cn/Html/News/Articles/31766.html"style="font-size: 16px;text-decoration: none;color: #333333;width: 280px;height: 52px;"target="_blank"title="【省医健康科普】“试”献希望，终达梦想——关于临床试验那些事儿"class="title_type"rel="noopener noreferrer">【省医健康科普】“试”献希望，终达梦想——关于临床试验那些事儿</a><spanclass="span_date"style="margin-left: 30px; color: #999999; margin-top: 10px">05-30</span></li><liclass="Li_Even"style="width: 350px; height: 70px; display: flex"><ahref="https://www.sph.com.cn/Html/News/Articles/31765.html"target="_blank"style="font-size: 16px;text-decoration: none;color: #333333;width: 280px;height: 52px;"title="山东第一医科大学附属省立医院举办“527我爱膝·全国保膝义诊”活动"class="title_type"rel="noopener noreferrer">山东第一医科大学附属省立医院举办“527我爱膝·全国保膝义诊”活动</a><spanclass="span_date"style="margin-left: 30px; color: #999999; margin-top: 10px">05-30</span></li><liclass="Li_Odd"style="width: 350px; height: 70px; display: flex"><ahref="https://www.sph.com.cn/Html/News/Articles/31764.html"target="_blank"style="font-size: 16px;text-decoration: none;color: #333333;width: 280px;height: 52px;"title="我院参加“传承红医精神，护佑百姓健康”义诊活动"class="title_type"rel="noopener noreferrer">我院参加“传承红医精神，护佑百姓健康”义诊活动</a><spanclass="span_date"style="margin-left: 30px; color: #999999; margin-top: 10px">05-30</span></li><liclass="Li_Even"style="width: 350px; height: 70px; display: flex"><div style="width: 280px; height: 40px"><ahref="https://www.sph.com.cn/Html/News/Articles/31763.html"target="_blank"style="font-size: 16px;text-decoration: none;color: #333333;width: 280px;"title="山东第一医科大学附属省立医院承办山东省医师协会肝胆胰疾病精准医疗专业委员会成立大会暨首届学术研讨会"class="title_type"rel="noopener noreferrer">山东第一医科大学附属省立医院承办山东省医师协会肝胆胰疾病精准医疗..</a></div><spanclass="span_date"style="color: #999999; margin-left: 30px; margin-top: 10px">05-30</span></li><li class="Li_Odd last" style="display: flex"><ahref="https://www.sph.com.cn/Html/News/Articles/31762.html"target="_blank"style="font-size: 16px;text-decoration: none;color: #333333;width: 280px;height: 52px;"title="山东第一医科大学附属省立医院成功举办“早产宝宝回家过六一”联谊活动"class="title_type"rel="noopener noreferrer">山东第一医科大学附属省立医院成功举办“早产宝宝回家过六一”联谊活动</a><spanclass="span_date"style="margin-left: 30px; color: #999999; margin-top: 10px">05-30</span></li></ul></div></div>

该结构使用了 flex 布局，使得标题和新闻列表能够水平居中对齐。每个新闻条目由 元素表示，包括一个链接和发布日期 。链接指向医院网站上具体的新闻页面，并设置了样式以确保文本内容易读且页面整洁。

这样的设计不仅突出了医院动态的重要性，还为用户提供了快速访问和浏览医院最新动态的便捷方式。通过在博客中详细描述这段代码，读者能够了解到你在网页设计中如何实现动态内容展示和用户体验的优化。

运行结果如下：

3.总结

路漫漫其修远兮。