整体概述

源码下载

页面结构

1. 头部（Header）

1. • 采用固定定位，始终显示在页面顶部，方便用户随时访问导航。
   • 包含网站标题，其中 “HEIMAO” 部分使用特殊颜色突出显示。
   • 导航栏在大屏幕设备上显示，包含 “找资源”、“读攻略” 和 “看电影” 三个导航链接，鼠标悬停时链接文字变色并出现下划线。
2. 主体内容（Main）
   • 主体部分占据整个屏幕高度，背景采用渐变效果，增强视觉层次感。
   • 标题 “源于热爱 探索不止” 采用大字体和动画效果，其中 “源于热爱” 部分使用特殊颜色突出。
   • 三段文字描述了博主的理念和追求，文字排版整齐，具有良好的可读性。
   • 提供一个 “前往黑猫博客” 的按钮，鼠标悬停时按钮会有缩放和阴影效果。
3. 页脚（Footer）
   • 页脚部分包含社交链接和版权信息。
   • 社交链接包括两个图标，鼠标悬停时会显示提示信息。
   • 版权信息显示当前年份和网站备案号。

响应式设计

1. 字体大小调整：根据不同设备屏幕宽度，字体大小会自适应调整，确保在各种设备上都能清晰显示。
2. 布局变化：在小屏幕设备上，导航栏会隐藏，标题和文字内容会进行相应的布局调整，以适应小屏幕的显示需求。
3. 滚动条优化：在小屏幕设备上，滚动条宽度会减小或隐藏，提升用户体验。

代码亮点

1. CSS 样式丰富：使用了大量的 CSS 类名来定义样式，包括字体、颜色、背景、布局等，使代码结构清晰，易于维护。
2. 动画效果：标题和文字内容使用了淡入动画效果，增加了页面的动态感。
3. 自定义字体：引入了自定义字体 “Aa” 和 “Mi”，使页面文字更具特色。

总结