项目实训-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.总结

路漫漫其修远兮。

相关推荐
吃饺子不吃馅1 分钟前
✨ 你知道吗?SVG 里藏了一个「任意门」——它就是 foreignObject! 🚪💫
前端·javascript·面试
IT_陈寒43 分钟前
Python开发者必须掌握的12个高效数据处理技巧,用过都说香!
前端·人工智能·后端
gnip8 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫9 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel10 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼10 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手14 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法14 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku14 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode14 小时前
iOS 苹果内购 Storekit 2
前端