筑站手札

魔改笔记五：从头开始，手搓一个关于页面

# JavaScript # CSS # Hexo
更新于: 2024-04-14
LiuShen
4 分钟
1,582 字
PV --
UV --

这里是清羽AI，这篇文章介绍了作者如何从头开始手搓一个关于页面，原本的关于页面丑陋且缺乏动效，作者在网上查找教程但都不满意，于是决定自己动手修改。作者详细描述了创建页面、编写代码和样式设计的步骤，包括头像卡片、文本格式、节内图片位置、文字部分基础设置、个人站点网格布局等。文章还提到了夜间适配和窄屏适配的设置，以及如何添加动效使页面更加生动。最终，作者成功打造了一个简单大气且符合自己喜好的关于页面，并通过分享自己的经验和代码，帮助读者了解如何制作一个个性化的关于页面。

清羽のAI摘要
KIMI-K2.5

碎碎念

关于页面，就相当于一个站点的门户，只有这里才能让访客了解站长，原本的关于页面丑的简直没法看，干巴巴的文字，一点动效都没有，上网查找了一些相关教程，但是都没有满意的，要么就是太复杂，要么就是太花哨，不是说不好看，而是不适合我的站点。而现在，虽然不能说精通，但是好歹也算学过一点点魔改知识了，那么我们就尝试着自己搞搞，看看能不能整一个心仪的出来吧！

样式预览

可以直接去我站点进行查看：

本站链接 · 来自本站，本站可确保其安全性，请放心点击跳转站长资料|关于我的一些公开的私密资料……LiuShen's Blog

下面是效果预览图：

效果预览

白天模式

夜间模式

节卡片动效

链接卡片动效

窄屏适配

效果对比

虽然也说不上多么好看吧，但是至少是我喜欢的类型就可以啦，简单大气，并且按照我的想法加了一些动效。

效果对比

修改前

修改后

教程

既然我写到这里了，就将我熬了一晚上写出来的玩意分享一下吧。

创建页面

在source文件夹下创建目录about，在目录about下创建index.md文件，写入以下代码：

---
title: 关于我的一些公开的私密资料……
type: "about"
comments: false
aside: false
---

<style>
  /* 头像卡片 */
  .author-img {
    position: relative; /* 设置相对定位 */
  }

  .author-box {
    text-align: center;
    padding: 20px;
    height: auto;
    border-bottom: 2px solid #ddd;
    /* 分割线 */
  }

  .author-img img {
    border-radius: 50%; /* 显示为圆形 */
    width: 150px; /* 宽度设置 */
    height: 150px; /* 高度保持一致，否则就成椭圆了 */
    margin-bottom: 10px;
  }

  .green-dot {
    position: absolute;
    right: calc(50% - 67px);
    bottom: 13px;
    width: 20px; /* 小圆点的宽度 */
    height: 20px; /* 小圆点的高度 */
    background-color: rgb(
      40,
      231,
      139
    ); /* 小圆点的颜色，感觉很好看，对照着QQ的颜色搞的 */
    border-radius: 50%; /* 使小圆点变成圆形 */
  }

  /* 文本格式，全局 */
  .content h2 {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* 设置每一节宽度，高度，长度等等 */
  .content .column {
    margin-top: 4px;
    margin-bottom: 4px;
    width: 65%;
    margin-left: 20px;
  }

  /* 给第一格个人信息进行适配 */
  .content .info-columns {
    margin: 10px 0;
  }

  /* 第一格的个人信息，我使用了表格，为了显示更多信息的同时不空出大部分地方，你们自行选择 */
  .content .row {
    display: flex;
    justify-content: space-between;
  }

  /* 每一节通用格式 */
  .section {
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
    margin-top: 20px;
    margin: 20px 10px 0 10px;
    border-radius: 10px;
    background-color: white;
    height: 250px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  /* 夜间适配，改变背景和相关阴影部分 */
  [data-theme="dark"] .section {
    background-color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  /* 右图左文样式，左边为row，因为是默认的所以不需要指定 */
  .section.right {
    flex-direction: row-reverse;
  }

  /* 节内图片所在位置相关格式，这里是因为我开了fancybox，也就是点击预览大图的效果，使图片被一个a所包裹，如果你关了请自行将该内容添加到下面的img中，其他位置对应调整 */
  .section a {
    width: 45%;
    height: 100%;
    transition: transform 0.5s ease; /* 添加过渡效果 */
  }

  /* 节内A标签内的图片，占满a标签，并不拉伸，使用覆盖，自适应大小 */
  .section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
  }

  /* 在鼠标悬停在 .section 上时，放大图片 */
  .section:hover a {
    transform: scale(1.1); /* 将图片放大10% */
  }

  /* 设置放大只在当图片没有消失时，否则这个宽度会覆盖掉设置的小时候为100%的设定 */
  @media (min-width: 870px) {
    /* 图像在右边的节，当鼠标放入，适当向左偏移，造成好像被图像挤过去的视觉效果 */
    .section.right:hover .content {
      margin-left: 10px;
    }
    /* 通用，因为文字是靠左的，改变宽度就被挤过去了 */
    .section:hover .content {
      width: 50%;
      width: 50%;
    }
  }

  /* 通用文字部分基础设置 */
  .section .content {
    width: 55%;
    margin: 20px 20px;
    max-height: 100%;
    overflow: hidden; /* 超出部分不好看，我给隐藏了，看不见也比超出强，不过这个可以通过修改各种宽度高度进行个性适配 */
    text-overflow: ellipsis;
    transition:
      width 0.5s ease,
      margin-left 0.3s ease; /* 添加过渡效果 */
  }

  /* 最下方的一堆个人站点 */
  .wrapper {
    text-align: center; /* 文字居中 */
    padding: 10px;
    margin: 20px 10px 0 10px;
    border-radius: 10px;
    background-color: white;
    height: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  /* 四个大字 */
  .wrapper .label {
    margin: 20px 20px;
  }

  /* 网格相关链接布局样式 */
  .wrapper .site-grid {
    margin-top: 10px;
    border-radius: 8px;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 一行四块 */
    gap: 10px; /* 块之间的间隙 */
    width: 100%;
    height: auto; /* 宽度自动填充 */
  }

  /* 每个站点块的样式 */
  .wrapper .site-grid .site-item {
    z-index: 1;
    border-radius: 10px;
    position: relative;
    width: 100%; /* 宽度自动填充 */
    height: 200px; /* 设置块的高度 */
    background-size: cover; /* 背景图片填充整个块 */
    background-position: center; /* 背景图片居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    overflow: hidden; /* 使超出边框的内容隐藏 */
    transition:
      transform 0.3s ease-in-out,
      z-index 0.3s ease-in-out;
  }

  /* 动画效果，鼠标放上去时背景图片放大的动画 */
  @media (min-width: 870px) {
    .wrapper .site-grid .site-item:hover {
      transform: scale(1.2); /* 放大倍数 */
      z-index: 2;
    }
  }

  /* 块中的字覆盖层样式 */
  .wrapper .site-overlay {
    position: absolute;
    inset: 0; /* 将 top, right, bottom, left 都设为 0 */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5); /* 初始为透明背景 */
    transition:
      background 0.6s,
      color 0.6s; /* 背景过渡效果 */
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font: bold 25px sans-serif; /* 根据需求更改字体大小 */
    color: #000000; /* 根据需求更改字体颜色，默认是黑 */
  }

  /* 鼠标悬停时的样式 */
  .wrapper .site-item:hover .site-overlay {
    background: rgba(0, 0, 0, 0.5); /* 白底变黑 */
    color: #ffffff; /* 黑字变白 */
  }

  /* 夜间适配 */
  [data-theme="dark"] .wrapper {
    background-color: #2c2c2c; /* 这是我全局的夜间统一色，你们自己看 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  /* 夜间鼠标悬停动效适配 */
  [data-theme="dark"] .wrapper .site-item:hover .site-overlay {
    background: rgba(255, 255, 255, 0.5);
    color: #000000;
  }

  /* 夜间卡片背景适配，和白天是相反的 */
  [data-theme="dark"] .wrapper .site-overlay {
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
  }

  /* 窄屏适配 */
  @media (max-width: 870px) {
    /* 当页面宽度小于870像素时 */
    /* 不显示图片 */
    .section a {
      display: none;
    }

    /* 将位置留给文字 */
    .section .content {
      width: 100%;
    }
    /* 高度自己调整，因为窄屏视野没有那么大，部分节窄一点宽一点不影响，但是最小仍然是之前设置的值，这个需要你们自己改 */
    .section {
      height: auto;
      min-height: 250px;
    }

    /* 下方链接到现在显示为两列，要不然挤得不行 */
    .wrapper .site-grid {
      grid-template-columns: repeat(2, 1fr);
      /* 一行显示2个块 */
      grid-auto-rows: 200px;
      /* 保持行高一致 */
    }
  }

  /* 当页面宽度小于480像素时，我们的表格成为1列 */
  @media (max-width: 560px) {
    .wrapper .site-grid {
      grid-template-columns: repeat(1, 1fr);
      /* 一行显示1个块 */
      grid-auto-rows: 200px;
      /* 保持行高一致 */
    }
  }
</style>

<div class="author-box">
  <div class="author-img">
    <img class="no-lightbox" src="https://blog.liushen.fun/info/avatar.ico" />
    <div class="green-dot"></div>
  </div>
  <div class="image-dot"></div>
  <p class="p center logo large">关于我</p>
  <p class="p center small">柳影曳曳，清酒孤灯，扬笔撒墨，心境如霜</p>
</div>

<div class="section left">
  <img src="https://p.liiiu.cn/i/2024/04/14/661ab011d7d88.png" />
  <div class="content">
    <div class="info-columns">
      <h2>个人信息</h2>
      <ul>
        <div class="row">
          <div class="column">
            <li>姓名: 柳清扬</li>
            <li>住址: 陕西省</li>
            <li>学校: 武汉理工大学</li>
          </div>
          <div class="column">
            <li>性别: 妈宝男</li>
            <li>年级: 二〇二一级</li>
            <li>专业: 人工智能</li>
          </div>
        </div>
        <li>邮箱: 01@liushen.fun</li>
      </ul>
    </div>
  </div>
</div>

<div class="section right">
  <img src="https://p.liiiu.cn/i/2024/04/14/661ab051377ef.png" />
  <div class="content">
    <h2>教育背景</h2>
    <ul>
      <li>学校: 武汉理工大学</li>
      <li>主要专业课程: 干饭.jpg(101.5)</li>
    </ul>
  </div>
</div>

<div class="section left">
  <img src="https://p.liiiu.cn/i/2024/04/14/661ab078b3033.png" />
  <div class="content">
    <h2>学生干部经历</h2>
    <ul>
      <li>武汉理工大学计算机协会事务部部长</li>
      <li>人工智能2102班班长</li>
      <li>易班学生工作站创意策划部通讯员、社会实践委员</li>
    </ul>
  </div>
</div>

<div class="section right">
  <img src="https://p.liiiu.cn/i/2024/04/14/661ab09243659.png" />
  <div class="content">
    <h2>主要项目</h2>
    <ul>
      <li>多尺度人头视觉特征的人数统计模型</li>
      <li>基于PyTorch实现LSTM汉语分词模型及情感分析</li>
      <li>钢铁缺陷检测深度研究</li>
      <li>基于Java实现MySQL数据库双端图书管理系统</li>
      <li>基于MFC的连连看程序</li>
    </ul>
  </div>
</div>

<div class="section left">
  <img src="https://p.liiiu.cn/i/2024/04/14/661ab0c2a778f.png" />
  <div class="content">
    <h2>技能</h2>
    <ul>
      <li>语言技能: 英语</li>
      <li>专业技能: C++、Java、Python、Linux、HTML、CSS、JavaScript</li>
      <li>通用技能: Office、Excel、PowerPoint</li>
      <li>正在学习中</li>
    </ul>
  </div>
</div>

<div class="section right">
  <img src="https://p.liiiu.cn/i/2024/04/14/661ab0ee65c56.png" />
  <div class="content">
    <h2>荣誉和奖项</h2>
    <ul>
      <li>全国大学生数学竞赛“省级三等奖”（2023.12）</li>
      <li>钢铁缺陷检测百度挑战赛“第三名”（2023.10）</li>
      <li>天梯赛校内选拔赛，“校级三等奖”（2020.8）</li>
      <li>武汉理工大学“三好学生”（2021.12）</li>
      <li>待完善</li>
    </ul>
  </div>
</div>

<div class="section left">
  <img src="https://p.liiiu.cn/i/2024/04/14/661ab10f685ed.png" />
  <div class="content">
    <h2>自我评价</h2>
    <ul>
      <li>思想上乐观开朗，乐于助人，具有团队协作精神及创新意识。</li>
      <li>
        工作上极富责任心与信念感，对待工作认真负责，有较强的组织管理及动手能力。
      </li>
      <li>总结：人嘎嘎好！</li>
    </ul>
  </div>
</div>

<div class="wrapper">
  <div class="label"><h2>本人站点</h2></div>
  <div class="site-grid">
    <a
      href="http://www.qyliu.top"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab1495ff39.png')"
    >
      <div class="site-overlay">
        <span>导航站点<br />（本站主站）</span>
      </div>
    </a>
    <a
      href="https://m.liushen.fun/"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab179e85c2.png')"
    >
      <div class="site-overlay">
        <span>盐焗小星球<br />（闲言碎语）</span>
      </div>
    </a>
    <a
      href="https://listen.qyliu.top/"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab19811d2c.png')"
    >
      <div class="site-overlay">
        <span>清羽飞扬监控墙<br />（网站状态）</span>
      </div>
    </a>
    <a
      href="https://um.liushen.fun/"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab31673f3c.png')"
    >
      <div class="site-overlay">
        <span>清羽飞扬访客统计<br />（统计人数）</span>
      </div>
    </a>
    <a
      href="https://mindmap.qyliu.top/"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab1e09dea0.png')"
    >
      <div class="site-overlay">
        <span>清羽飞扬思维导图<br />（好用小工具）</span>
      </div>
    </a>
    <a
      href="https://p.liiiu.cn/"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab1f51c57d.png')"
    >
      <div class="site-overlay">
        <span>清羽飞扬图床<br />（自建的安稳）</span>
      </div>
    </a>
    <a
      href="https://ittools.qyliu.top/"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab3a11aa80.png')"
    >
      <div class="site-overlay">
        <span>清羽飞扬IT工具箱<br />（好用小工具）</span>
      </div>
    </a>
    <a
      href="https://drew.qyliu.top/"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab22b067f1.png')"
    >
      <div class="site-overlay">
        <span>清羽飞扬画板<br />（好用小工具）</span>
      </div>
    </a>
    <a
      href="https://lobe.qyliu.top/"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab26310be8.png')"
    >
      <div class="site-overlay">
        <span>清羽飞扬NextGPT<br />（AI对话工具）</span>
      </div>
    </a>
    <a
      href="https://calcium.qyliu.top/"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab27ab2abc.png')"
    >
      <div class="site-overlay">
        <span>清羽飞扬在线计算器<br />（在线计算器）</span>
      </div>
    </a>
    <a
      href="https://bingai.qyliu.top/"
      target="_blank"
      class="site-item"
      style="background-image: url('https://p.liiiu.cn/i/2024/04/14/661ab37220873.png')"
    >
      <div class="site-overlay">
        <span>清羽飞扬的BingAI<br />（其实没啥用）</span>
      </div>
    </a>
  </div>
</div>

替换其中的图片，文字，主题等部分，注意，需要替换图片，因为本站图片开了防盗链，您的站点可能无法正常显示，然后执行hexo三件套，应该就可以看见大致的效果了，不过可能不太理想。下面我们将进行微调，以达到更加理想的效果。

HTML特殊配置

我们从主干部分说起，讲一些主要需要注意的地方，头像没什么说的，改个路径就行，那就第一部分，个人信息部分：

<div class="section left">
  <img src="https://p.liiiu.cn/i/2024/04/14/661ab011d7d88.png" />
  <div class="content">
    <div class="info-columns">
      <h2>个人信息</h2>
      <ul>
        <div class="row">
          <div class="column">
            <li>姓名: 柳清扬</li>
            <li>住址: 陕西省</li>
            <li>学校: 武汉理工大学</li>
          </div>
          <div class="column">
            <li>性别: 妈宝男</li>
            <li>年级: 二〇二一级</li>
            <li>专业: 人工智能</li>
          </div>
        </div>
        <li>邮箱: 01@liushen.fun</li>
      </ul>
    </div>
  </div>
</div>

这里我们使用了一个表格进行更多信息的显示，防止大片的空白，可以对照着我的网站查看相关效果进行替换，在css部分，我们针对于表格进行了一定的适配：

/* 设置每一节宽度，高度，长度等等 */
.content .column {
  margin-top: 4px;
  margin-bottom: 4px;
  width: 65%;
  margin-left: 20px;
}

/* 给第一格个人信息进行适配 */
.content .info-columns {
  margin: 10px 0;
}

/* 第一格的个人信息，我使用了表格，为了显示更多信息的同时不空出大部分地方，你们自行选择 */
.content .row {
  display: flex;
  justify-content: space-between;
}

没有什么需要具体修改的地方，唯一需要注意的就是，不要超出框格的高度，这个高度可以在section的样式中进行修改，我采用的是，当宽屏时，所有节高度一致，这样能保证更好的视觉效果，窄屏时，宽度自行变化，因为窄屏显示不佳，所以我选择了注意内容的紧凑性。

/* 每一节通用格式 */
.section {
  height: 250px;
}

/* 窄屏适配 */
@media (max-width: 870px) {
  /* 当页面宽度小于870像素时 */
  .section {
    height: auto;
    min-height: 250px; /* 这里也需要修改，和上面的盖度一致 */
  }
}

下面就是正常的每一节了，在每一节中，我分成了两个类：right和left，分别对应图片在右和图片在左。这个在你想添加时可以自行使用，对于节的定义上面已经修改过了，这里就不说了。

然后就是下方站点，这里我使用了表格布局，按照顺序往下添加即可。

CSS特殊配置

下面我们对于css中需要修改的部分进行解析，css我大致分成了四个部分：白天模式，黑夜模式，动效适配，窄屏适配。

白天模式

  1. section高度：这个需要看你的内容量进行动态调整，主要需要修改的就是height。

    /* 每一节通用格式 */
.section {
  display: flex;
  padding: 10px;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
  margin-top: 20px;
  margin: 20px 10px 0 10px;
  border-radius: 10px;
  background-color: white;
  height: 250px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

  2. site-item站点块：最下方表格布局中，每个站点的部分，按照备注进行自定义修改：

    /* 每个站点块的样式 */
.wrapper .site-grid .site-item {
  z-index: 1;
  border-radius: 10px;
  position: relative;
  width: 100%; /* 宽度自动填充 */
  height: 200px; /* 设置块的高度 */
  background-size: cover; /* 背景图片填充整个块 */
  background-position: center; /* 背景图片居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  overflow: hidden; /* 使超出边框的内容隐藏 */
  transition:
    transform 0.3s ease-in-out,
    z-index 0.3s ease-in-out;
}

  3. site-overlay站点块前置遮罩：字体及那白色半透明遮罩：

    /* 块中的字覆盖层样式 */
.wrapper .site-overlay {
  position: absolute;
  inset: 0; /* 将 top, right, bottom, left 都设为 0 */
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5); /* 初始为透明背景 */
  transition:
    background 0.6s,
    color 0.6s; /* 背景过渡效果 */
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font: bold 25px sans-serif; /* 根据需求更改字体大小 */
  color: #000000; /* 根据需求更改字体颜色，默认是黑 */
}
  • 白天模式进行了大部分变量的定义，尽量修改你看的懂的元素，如果有问题可以发到评论区。

黑夜模式

  • 该部分内容就比上面的少很多了，主要是在深色下的颜色的一些变换，如下：

  1. section每一节的黑夜适配：

    /* 夜间适配，改变背景和相关阴影部分 */
[data-theme="dark"] .section {
  background-color: #2c2c2c;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

  2. wrapper下方站点表格的黑夜适配，我让他和白天模式的颜色，背景，字体都是反着来的，具体看我的站点效果：

    /* 夜间适配 */
[data-theme="dark"] .wrapper {
  background-color: #2c2c2c; /* 这是我全局的夜间统一色，你们自己看 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 夜间鼠标悬停动效适配 */
[data-theme="dark"] .wrapper .site-item:hover .site-overlay {
  background: rgba(255, 255, 255, 0.5);
  color: #000000;
}

/* 夜间卡片背景适配，和白天是相反的 */
[data-theme="dark"] .wrapper .site-overlay {
  background: rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

动效适配

该部分主要有上面的节和下面的链接卡片两点，注意对应元素的相关部分需要添加transition属性，第一个为添加transition举例说明，后面不再重复：

  1. section节图片放大：

    /* 节内图片所在位置相关格式，这里是因为我开了fancybox，也就是点击预览大图的效果，使图片被一个a所包裹，如果你关了请自行将该内容添加到下面的img中，其他位置对应调整 */
.section a {
	width: 45%;
	height: 100%;
	transition: transform 0.5s ease; /* 添加过渡效果 */
}

/* 节内A标签内的图片，占满a标签，并不拉伸，使用覆盖，自适应大小 */
.section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

    /* 在鼠标悬停在 .section 上时，放大图片 */
.section:hover a {
	transform: scale(1.10); /* 将图片放大10% */
}

/* 设置放大只在当图片没有消失时，否则这个宽度会覆盖掉设置的小时候为100%的设定 */
@media (min-width: 870px) {
	/* 图像在右边的节，当鼠标放入，适当向左偏移，造成好像被图像挤过去的视觉效果 */
	.section.right:hover .content {
		margin-left: 10px;
	}
	/* 通用，因为文字是靠左的，改变宽度就被挤过去了 */
	.section:hover .content {
		width: 50%;
		width: 50%;
	}
}

/* 通用文字部分基础设置 */
   .section .content {
    width: 55%;
    margin: 20px 20px;
    max-height: 100%;
    overflow: hidden; /* 超出部分不好看，我给隐藏了，看不见也比超出强，不过这个可以通过修改各种宽度高度进行个性适配 */
    text-overflow: ellipsis;
    transition: width 0.5s ease, margin-left 0.3s ease; /* 添加过渡效果 */

    注意其中最后一行的transition，变换的什么，就需要添加对应的属性，这里我们主要变动两点，鼠标移入时，图片变大，宽度变宽，对应文字宽度变低，如果文字在左边，为了同步动效，左边框减小，所以这里我们使用到的有width和margin-left。

  2. site-grid移入放大及变色动效：

    /* 动画效果，鼠标放上去时背景图片放大的动画 */
@media (min-width: 870px) {
  .wrapper .site-grid .site-item:hover {
    transform: scale(1.2); /* 放大倍数 */
    z-index: 2;
  }
}

/* 鼠标悬停时的样式 */
.wrapper .site-item:hover .site-overlay {
  background: rgba(0, 0, 0, 0.5); /* 白底变黑 */
  color: #ffffff; /* 黑字变白 */
}

/* 夜间鼠标悬停动效适配 */
[data-theme="dark"] .wrapper .site-item:hover .site-overlay {
  background: rgba(255, 255, 255, 0.5);
  color: #000000;
}

    鼠标移入，背景变为反色，字体变为反色，图片放大，为了防止被其他块遮挡，设置z-index。

窄屏(手机)适配

手机的配置一般比较低，为了防止动画过多导致加载慢，我们在手机上禁止了绝大部分的效果，检查是否是手机，其实就是适配宽度，下面是本次修改对于宽度的适配。

  1. section窄屏不修改文字宽度，因为后面媒体检测屏幕宽度部分我们会删除图片并修改文字宽度为100%，也就是占满整个页面，这里不添加防止覆盖：

    /* 设置放大只在当图片没有消失时，否则这个宽度会覆盖掉设置的小时候为100%的设定 */
@media (min-width: 870px) {
  /* 图像在右边的节，当鼠标放入，适当向左偏移，造成好像被图像挤过去的视觉效果 */
  .section.right:hover .content {
    margin-left: 10px;
  }
  /* 通用，因为文字是靠左的，改变宽度就被挤过去了 */
  .section:hover .content {
    width: 50%;
    width: 50%;
  }
}

  2. site-grid窄屏不显示放大动效，因为屏幕变窄后，由于设备差异，放大可能会超出屏幕，变色动效仍然显示（其实点击一瞬间也看不见）。

    /* 动画效果，鼠标放上去时背景图片放大的动画 */
@media (min-width: 870px) {
  .wrapper .site-grid .site-item:hover {
    transform: scale(1.2); /* 放大倍数 */
    z-index: 2;
  }
}

  3. 窄屏统一适配，不显示图片，修改宽度，修改表格列数，根据宽度不同从四列变为两列再变为一列：

    /* 窄屏适配 */
@media (max-width: 870px) {
  /* 当页面宽度小于870像素时 */
  /* 不显示图片 */
  .section a {
    display: none;
  }

  /* 将位置留给文字 */
  .section .content {
    width: 100%;
  }
  /* 高度自己调整，因为窄屏视野没有那么大，部分节窄一点宽一点不影响，但是最小仍然是之前设置的值，这个需要你们自己改 */
  .section {
    height: auto;
    min-height: 250px;
  }

  /* 下方链接到现在显示为两列，要不然挤得不行 */
  .wrapper .site-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 一行显示2个块 */
    grid-auto-rows: 200px;
    /* 保持行高一致 */
  }
}

/* 当页面宽度小于480像素时，我们的表格成为1列 */
@media (max-width: 560px) {
  .wrapper .site-grid {
    grid-template-columns: repeat(1, 1fr);
    /* 一行显示1个块 */
    grid-auto-rows: 200px;
    /* 保持行高一致 */
  }
}

上面就是我们的CSS修改的部分了，下面是在魔改过程中出现的大问题的记录：

问题记录

格式错乱

内容大范围错乱，并出现长竖条代码块问题：

格式大范围错乱

原因：

markdown，html部分存在空格：

<div class="section right">
    <img src="https://p.liiiu.cn/i/2024/04/14/661ab09243659.png">
    <div class="content">
        <h2>主要项目</h2>
        <ul>
            <li>多尺度人头视觉特征的人数统计模型</li>
-
            <li>基于PyTorch实现LSTM汉语分词模型及情感分析</li>
            <li>钢铁缺陷检测深度研究</li>
            <li>基于Java实现MySQL数据库双端图书管理系统</li>
            <li>基于MFC的连连看程序</li>
        </ul>
    </div>
</div>

解决方法：

去掉其中的多余空格，最好不要有空格，经过测试，只有div之间可以存在空格，div内尽量不要空格。

其他问题正在记录中，欢迎反馈！

每日一图

每日一图

——柳影曳曳，清酒孤灯，扬笔撒墨，心境如霜

Share
Previous
怎么从PPT中提取出所有的文字内容
Next
魔改笔记四：友链页重构及友链朋友圈适配