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

柳神

发布于 2024-05-30 21:10:51

14600

代码可运行

文章被收录于专栏：清羽飞扬清羽飞扬

运行总次数：0

代码可运行

碎碎念

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

样式预览

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

下面是效果预览图：

白天夜间卡片动效链接动效窄屏适配

效果对比

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

修改前修改后

教程

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

创建页面

在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 删除

class