魔改笔记五：从头开始，手搓一个关于页面
碎碎念
关于页面，就相当于一个站点的门户，只有这里才能让访客了解站长，原本的关于页面丑的简直没法看，干巴巴的文字，一点动效都没有，上网查找了一些相关教程，但是都没有满意的，要么就是太复杂，要么就是太花哨，不是说不好看，而是不适合我的站点。而现在，虽然不能说精通，但是好歹也算学过一点点魔改知识了，那么我们就尝试着自己搞搞，看看能不能整一个心仪的出来吧！
样式预览
可以直接去我站点进行查看：
下面是效果预览图：
白天夜间卡片动效链接动效窄屏适配
白天模式
夜间模式
节卡片动效
链接卡片动效
窄屏适配
效果对比
虽然也说不上多么好看吧，但是至少是我喜欢的类型就可以啦，简单大气，并且按照我的想法加了一些动效。
修改前修改后
修改前
修改后
教程
既然我写到这里了，就将我熬了一晚上写出来的玩意分享一下吧。
创建页面
在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.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; /* 添加过渡效果 */
}
/* 最下方的一堆个人站点 */
.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.qyliu.top/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://cdn.qyliu.top/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>邮箱: 2411457922@qq.com</li>
</ul>
</div>
</div>
</div>
<div class="section right">
<img src="https://cdn.qyliu.top/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://cdn.qyliu.top/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://cdn.qyliu.top/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://cdn.qyliu.top/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://cdn.qyliu.top/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://cdn.qyliu.top/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://cdn.qyliu.top/i/2024/04/14/661ab1495ff39.png')">
<div class="site-overlay">
<span>导航站点<br>（本站主站）</span>
</div>
</a>
<a href="https://memos.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/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://cdn.qyliu.top/i/2024/04/14/661ab19811d2c.png')">
<div class="site-overlay">
<span>清羽飞扬监控墙<br>（网站状态）</span>
</div>
</a>
<a href="https://visitor.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/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://cdn.qyliu.top/i/2024/04/14/661ab1e09dea0.png')">
<div class="site-overlay">
<span>清羽飞扬思维导图<br>（好用小工具）</span>
</div>
</a>
<a href="https://cdn.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/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://cdn.qyliu.top/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://cdn.qyliu.top/i/2024/04/14/661ab22b067f1.png')">
<div class="site-overlay">
<span>清羽飞扬画板<br>（好用小工具）</span>
</div>
</a>
<a href="https://chat.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/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://cdn.qyliu.top/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://cdn.qyliu.top/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://cdn.qyliu.top/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>邮箱: 2411457922@qq.com</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我大致分成了四个部分：白天模式，黑夜模式，动效适配，窄屏适配。
白天模式
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);
}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;
}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; /* 根据需求更改字体颜色，默认是黑 */
}- 白天模式进行了大部分变量的定义，尽量修改你看的懂的元素，如果有问题可以发到评论区。
黑夜模式
- 该部分内容就比上面的少很多了，主要是在深色下的颜色的一些变换，如下：
section每一节的黑夜适配：
/* 夜间适配，改变背景和相关阴影部分 */
[data-theme=dark] .section {
background-color: #2c2c2c;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}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举例说明，后面不再重复：
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。
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。
窄屏(手机)适配
手机的配置一般比较低，为了防止动画过多导致加载慢，我们在手机上禁止了绝大部分的效果，检查是否是手机，其实就是适配宽度，下面是本次修改对于宽度的适配。
section窄屏不修改文字宽度，因为后面媒体检测屏幕宽度部分我们会删除图片并修改文字宽度为100%，也就是占满整个页面，这里不添加防止覆盖：
/* 设置放大只在当图片没有消失时，否则这个宽度会覆盖掉设置的小时候为100%的设定 */
@media (min-width: 870px) {
/* 图像在右边的节，当鼠标放入，适当向左偏移，造成好像被图像挤过去的视觉效果 */
.section.right:hover .content {
margin-left: 10px;
}
/* 通用，因为文字是靠左的，改变宽度就被挤过去了 */
.section:hover .content {
width: 50%;
width: 50%;
}
}site-grid窄屏不显示放大动效，因为屏幕变窄后，由于设备差异，放大可能会超出屏幕，变色动效仍然显示（其实点击一瞬间也看不见）。
/* 动画效果，鼠标放上去时背景图片放大的动画 */
@media (min-width: 870px) {
.wrapper .site-grid .site-item:hover {
transform: scale(1.2); /* 放大倍数 */
z-index: 2;
}
}窄屏统一适配，不显示图片，修改宽度，修改表格列数，根据宽度不同从四列变为两列再变为一列：
/* 窄屏适配 */
@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://cdn.qyliu.top/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内尽量不要空格。
其他问题正在记录中，欢迎反馈
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2024-04-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云数据库 MySQL
腾讯云数据库 MySQL（TencentDB for MySQL）为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。其具备6大企业级特性，包括企业级定制内核、企业级高可用、企业级高可靠、企业级安全、企业级扩展以及企业级智能运维。通过使用腾讯云数据库 MySQL，可实现分钟级别的数据库部署、弹性扩展以及全自动化的运维管理，不仅经济实惠，而且稳定可靠，易于运维。