1、文件“前缀”图标

只要是文件,前面会用图标显示类型,方便点击下载。

示例:
[材料制备工艺(资料由Hans J. Han整理).docx]()
读研两年半,科研学习工具无保留分享|研究生必备
电工电子技术.7z
自定义css:

/* 针对特定文档链接添加图标 */
a[href*=".docx"]::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background-image: url("data:image/svg+xml;base64,[填写svg转base64的编码]");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin-right: 0.5em;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

示例图:关于-截图|https://www.hansjack.com/about.html

2、表格修改论文三线表格

类型直达简介
中文数据库中国知网CNKI覆盖期刊/学位/会议论文,含独家博士学位论文
万方数据包含期刊/专利/标准/科技成果,医学文献特色
维普资讯8000+中文期刊全文,检索界面简洁
英文期刊ScienceDirectElsevier旗下2500+期刊,化学/材料学覆盖最全
Web of Science包含SCI/SSCI/AHCI,查影响因子/引文报告必备
PubMed生物医学领域核心库,免费获取NIH资助论文
IEEE Xplore电子工程/计算机领域权威,含会议论文

自定义css:

/* =====================
   三线表基础样式
   ===================== */
table {
    /* 表格盒模型 */
    width: 100%;
    margin: 1em 0;
    border-collapse: collapse;
    border-bottom: 2px solid #000; /* 底边线 */

    /* 文字排版 */
    font-family: Times New Roman, "宋体", SimSun, sans-serif;
    font-size: 14px;
    text-align: center;

    /* 装饰清理 */
    box-shadow: none !important;
    background-color: transparent !important;
}

/* 表头样式 */
table > thead {
    border-top: 2px solid #000; /* 顶边线 */
}

table > thead > tr > th {
    /* 边框样式 */
    border-bottom: 1px solid #000;
    
    /* 间距设置 */
    padding: 5px 8px;
    
    /* 文字样式 */
    font-weight: bold;
    background-image: none !important;
}

/* 数据单元格样式 */
table > tbody > tr > td {
    padding: 5px 8px;
    text-align: left;  /* 内容对齐方式 */
    vertical-align: top;
}

/* 多语言支持 */
table td:lang(zh),
table th:lang(zh) {
    font-family: "宋体", SimSun, sans-serif;
}


/* =====================
   装饰清理模块
   ===================== */
table > thead > tr,
table > tbody > tr,
table > tbody > tr:nth-child(odd),
table > tbody > tr:nth-child(even),
table > tbody > tr:hover,
table > thead > tr > th,
table > tbody > tr > td {
    background-color: transparent !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

table > thead > tr > th,
table > tbody > tr > td {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
}


/* =====================
   响应式处理 (移动端)
   ===================== */
@media screen and (max-width: 768px) {
    table {
        /* 滚动容器 */
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;

        /* 保持最小宽度 */
        min-width: 600px;
    }

    /* 表格结构保持 */
    > thead, 
    > tbody {
        display: table;
        width: 100%;
        min-width: 600px;
    }

    /* 单元格优化 */
    > thead > tr > th,
    > tbody > tr > td {
        white-space: normal;
        min-width: 120px;
    }
}
最后修改:2025 年 06 月 03 日
如果觉得我的文章对你有用,请随意赞赏