项目实训-vue(十)

项目实训-vue(十)

文章目录

1.概述

本篇博客继续记录我的前端工作。

2.技术引领

html 复制代码
<div class="main_center_left fl">
            <a
              href="https://www.sph.com.cn/Html/News/Articles/31099.html"
              target="_blank"
              title=""
              rel="noopener noreferrer"
            >
              <img
                :src="require('@/assets/imgs/20240301101153.jpg')"
                alt=""
            /></a>
            <h2>
              <a
                href="https://www.sph.com.cn/Html/News/Articles/31099.html"
                target="_blank"
                title=""
                rel="noopener noreferrer"
              ></a>
            </h2>
          </div>

这段HTML代码用于在博客中插入一个带有链接和图片的内容块。链接指向一个特定的文章或页面,图片则用于视觉上的内容展示。这种布局可以增强博客文章的吸引力和互动性,让读者能够直接点击链接查看相关内容。

接下来需要编写具体的链接部分:

html 复制代码
 <div class="main_center_right fl">
            <h2 class="main_title">
              <a
                href="https://www.sph.com.cn/Html/News/Columns/110039/Index.html"
                style="
                  margin-left: 30px;
                  color: #1a4287;
                  font-size: 20px;
                  text-decoration: none;
                  font-family: 'Microsoft YaHei';
                "
                >技术引领</a
              >
            </h2>
            <ul class="jishu_list" style="list-style: none">
              <li class="Li_Odd">
                <a
                  href="https://www.sph.com.cn/Html/News/Articles/31100.html"
                  target="_blank"
                  title="省医血液科成功救治异基因造血干细胞移植后重度移植物抗宿主病患者"
                  class="title_type"
                  rel="noopener noreferrer"
                  >省医血液科成功救治异基因造血干细胞移植后重度移植物抗宿主病患者</a
                ><span class="span_date">2024/03/04</span>
              </li>
              <li class="Li_Even">
                <a
                  href="https://www.sph.com.cn/Html/News/Articles/31099.html"
                  target="_blank"
                  title="避免开胸开腹 省医血管外科改制开窗-分支支架技术治疗累及内脏动脉分支的复杂胸腹主动脉疾病"
                  class="title_type"
                  rel="noopener noreferrer"
                  >避免开胸开腹
                  省医血管外科改制开窗-分支支架技术治疗累及内脏动脉分支的复...</a
                ><span class="span_date">2024/02/29</span>
              </li>
              <li class="Li_Odd last">
                <a
                  href="https://www.sph.com.cn/Html/News/Articles/31098.html"
                  target="_blank"
                  title="腔镜乳房切除+重建 山东第一医科大学附属省立医院乳腺癌腔镜重建手术助力患者回归完美"
                  class="title_type"
                  rel="noopener noreferrer"
                  >腔镜乳房切除+重建
                  山东第一医科大学附属省立医院乳腺癌腔镜重建手术助力患...</a
                ><span class="span_date">2024/02/27</span>
              </li>
            </ul>
            <a href="https://www.sph.com.cn/Html/News/Columns/110039/Index.html" class="main_more"
              >查看更多</a
            >
          </div>
        </div>
      </div>
    </div>

这段HTML代码用于在博客中创建一个内容块,主要展示了一个标题和一个带有日期的列表。在标题下方,有三个列表项,每个列表项包含一个链接,点击后会打开新页面,并显示与文章相关的标题和日期。列表项交替使用不同的样式(Odd和Even),以增强可读性。最后,还包括一个链接按钮,用于查看更多相关内容。整体布局通过CSS类(如main_center_rightmain_titlejishu_list等)和内联样式(如字体、颜色、间距等)进行了样式化和排版,使内容具有视觉吸引力和结构清晰性。

最终实现效果如下:

3.总结

路漫漫其修远兮。

相关推荐
fruge1 天前
2025前端工程化与性能优化实战指南:从构建到监控的全链路方案
前端·性能优化
aesthetician1 天前
Node.js v25 重磅发布!革新与飞跃:深入探索 JavaScript 运行时的未来
javascript·node.js·vim
知识分享小能手1 天前
uni-app 入门学习教程,从入门到精通,uni-app基础扩展 —— 详细知识点与案例(3)
vue.js·学习·ui·微信小程序·小程序·uni-app·编程
demi_meng1 天前
reactNative 遇到的问题记录
javascript·react native·react.js
MC丶科1 天前
【SpringBoot 快速上手实战系列】5 分钟用 Spring Boot 搭建一个用户管理系统(含前后端分离)!新手也能一次跑通!
java·vue.js·spring boot·后端
千码君20161 天前
React Native:从react的解构看编程众多语言中的解构
java·javascript·python·react native·react.js·解包·解构
lijun_xiao20091 天前
前端最新Vue2+Vue3基础入门到实战项目全套教程
前端
90后的晨仔1 天前
Pinia 状态管理原理与实战全解析
前端·vue.js
杰克尼1 天前
JavaWeb_p165部门管理
java·开发语言·前端
EndingCoder1 天前
WebSocket实时通信:Socket.io
服务器·javascript·网络·websocket·网络协议·node.js