CSS使用指南
本指南详细介绍了gign.ltd网站的CSS样式表使用方式，包括特殊规则、容器样式和使用示例。
适用于同时加载了我们的style.css和script.js的情况
基础结构
HTML基础结构
页面标题
页面描述
特殊规则
loadstylesheet 代码高亮
用于自动应用代码高亮样式。
function hello() {
console.log("Hello World!");
}
Module Main
Sub Main()
Console.Write("Hello World")
End Sub
End Module
- 自动应用IDE风格的代码高亮
- 支持指定语言（name属性）
- 支持JavaScript和VB.NET
- 自动处理语法高亮
video-responsive 视频响应式
用于使视频自适应容器宽度，保持正确的宽高比。
- 自动适应容器宽度
- 保持16:9的宽高比
- 移动设备上不自动全屏
- 响应式设计
no-aspect-ratio 图片比例覆盖
用于覆盖图片的1:1比例限制，使其自适应容器。
- 移除1:1比例限制
- 宽度自动适应容器
- 高度自动调整
- 保持图片原始比例
placeholder 占位符
用于显示占位内容的容器。
占位内容
这是一个占位符示例
- 灰色背景
- 居中对齐
- 内边距
- 边框
back-to-top 回到顶部
tab 标签页
用于创建标签页导航。
标签1
标签2
标签1内容
标签2内容
标签1
标签2
标签1内容
标签2内容
- 可点击切换
- 激活状态样式
- 悬停效果
- 内容区域显示/隐藏
form-group & input-group 表单元素
用于创建表单元素。
- 统一的表单样式
- 输入框和选择框样式
- 响应式设计
- 主题适配
result 结果区域
用于显示结果内容的容器。
结果标题
结果内容
示例结果
这是一个结果区域示例
- 边框和阴影效果
- 标题区域样式
- 内容区域内边距
- 主题适配
notification 通知
用于显示通知消息。
通知消息
这是一个通知示例
- 黄色背景
- 边框和阴影
- 内边距
- 主题适配
容器样式
product-grid 产品网格
响应式设计
样式表内置响应式设计，自动适应不同屏幕尺寸。
- 移动设备上自动堆叠布局
- 侧边栏在小屏幕上变为静态
- 产品网格在小屏幕上变为单列
- 图片和视频自动缩放
主题和字体切换
主题切换
网站支持深浅色主题切换。
- 通过添加/移除 light-theme 类切换主题
- 所有颜色使用CSS变量定义
- 平滑的主题过渡效果
- 自动保存主题偏好
字体切换
网站支持字体切换功能。
- 支持Georgia和雅黑字体切换
- 通过添加相应的类名切换字体
- 自动保存字体偏好
- 响应式字体大小
最佳实践
- 使用语义化HTML标签
- 遵循现有的命名约定
- 使用提供的CSS类而不是内联样式
- 确保响应式设计兼容
- 测试不同主题下的显示效果