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

路漫漫其修远兮。

相关推荐
烛阴几秒前
【TS 设计模式完全指南】用工厂方法模式打造你的“对象生产线”
javascript·设计模式·typescript
定栓4 分钟前
Typescript入门-类型断言讲解
前端·javascript·typescript
码间舞7 分钟前
你不知道的pnpm!如果我的电脑上安装了nvm,切换node版本后,那么pnpm还会共享一个磁盘的npm包吗?
前端·代码规范·前端工程化
用户15129054522010 分钟前
itoa函数
前端
xiaominlaopodaren11 分钟前
“UI里就可以请求数据库”,让你陌生的 React 特性
前端·javascript·react.js
薛定谔的算法13 分钟前
JavaScript数组操作完全指南:从基础到高级
前端·javascript·算法
拜无忧14 分钟前
前端,用SVG 模仿毛笔写字绘画,defs,filter
前端·css·svg
怪可爱的地球人15 分钟前
ts的迭代器和生成器
前端
FlowGram17 分钟前
Flowgram 物料库建设思考与实践
前端
用户221520442780019 分钟前
Promise实例方法和async、await语法糖
前端·javascript