/* 设置全局样式变量 */
:root {
--main-bg-color: #0d0d0d; /* 主背景颜色 */
--header-bg-color: rgba(0, 0, 0, 0.8); /* 版头背景颜色 */
--global-text-color: #f0f0f0; /* 全局文本颜色 */
--header-text-color: #000; /* 版头文本颜色 */
--link-color: #fff; /* 链接颜色 */
--link-hover-color: #ff0000; /* 链接悬停颜色 */
--animation-duration: 3s; /* 动画持续时间 */
}
/* 全局样式 */
body {
font-family: 'Arial', sans-serif;
background-color: #0d0d0d; /* 深灰色背景 */
color: #fff; /* 默认白色文字 */
margin: 0;
padding: 0;
}
/* 特定div的文字样式 */
.styled-quote {
color: #fafafa; /* 黑色文字，您可以根据需要调整颜色 */
font-style: italic; /* 斜体，如果您希望的话 */
padding: 10px 20px; /* 内边距 */
border-left: 3px solid #ff0000; /* 左边框，您可以根据需要调整颜色或宽度 */
margin: 20px 0; /* 外边距 */
background-color: rgba(255, 255, 255, 0.1); /* 轻微的背景颜色，增加可读性 */
}
/* 版头样式 */
.header {
background-color: var(--header-bg-color);
padding: 20px;
text-align: center;
border-bottom: 2px solid #ff0000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 10;
transition: box-shadow 0.3s ease-in-out;
}
.header:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
}
/* 版头中的文字样式 */
.header-title {
font-size: 2em;
font-weight: bold;
color: var(--header-text-color); /* 版头文本颜色 */
animation: fadeIn var(--animation-duration) ease forwards;
}
.header-subtitle {
font-size: 1.5em;
color: var(--header-text-color); /* 版头文本颜色 */
animation: fadeIn var(--animation-duration) ease forwards;
}
/* 引用块样式 */
blockquote {
background-color: #f9f9f9; /* 浅灰色背景 */
border-left: 5px solid #ccc; /* 左侧边框 */
margin: 20px 0; /* 外边距 */
padding: 15px 20px; /* 内边距 */
font-style: italic; /* 斜体 */
color: #555; /* 文字颜色 */
quotes: "“" "”" "‘" "’"; /* 引号样式 */
position: relative; /* 相对定位 */
}
/* 引用块内的引用作者样式 */
blockquote cite {
display: block; /* 块级显示 */
color: #333; /* 作者名字的颜色 */
font-style: normal; /* 作者名字不使用斜体 */
margin-top: 10px; /* 与引用文本的间距 */
}
/* 响应式设计 */
@media (max-width: 768px) {
blockquote {
padding: 10px 15px; /* 小屏幕上的内边距调整 */
}
}
/* 导航菜单样式 */
.nav-menu {
margin-top: 10px;
display: flex;
justify-content: center;
}
.nav-menu a {
color: var(--link-color);
text-decoration: none;
margin: 0 15px;
font-weight: bold;
transition: color 0.3s ease, transform 0.3s ease;
}
.nav-menu a:hover {
color: var(--link-hover-color);
transform: scale(1.1);
}
/* 标签容器样式 */
.tabview {
display: flex;
border: 1px solid #333; /* 边框颜色 */
border-radius: 5px; /* 边框圆角 */
background-color: #111; /* 背景颜色 */
overflow: hidden; /* 隐藏溢出的内容 */
margin: 20px 0; /* 外边距 */
}
/* 单个标签样式 */
.tab {
padding: 10px 20px; /* 内边距 */
cursor: pointer; /* 鼠标悬停时的指针样式 */
border-right: 1px solid #333; /* 标签之间的分隔线 */
background-color: #222; /* 背景颜色 */
color: #fff; /* 文字颜色 */
transition: background-color 0.3s ease; /* 背景颜色变化的过渡效果 */
}
/* 激活状态下的标签样式 */
.tab.active {
background-color: #333; /* 激活状态下的背景颜色 */
}
/* 标签内容样式 */
.tab-content {
display: none; /* 默认不显示 */
padding: 20px; /* 内边距 */
border-top: 1px solid #333; /* 顶部边框 */
}
/* 激活状态下的标签内容样式 */
.tab-content.active {
display: block; /* 显示 */
}
/* 响应式设计 */
@media (max-width: 768px) {
.tab {
padding: 10px; /* 小屏幕上的内边距调整 */
}
}
/* 轻量级块样式 */
.lightblock {
background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
color: #fff; /* 白色文字 */
padding: 20px; /* 内边距 */
border-radius: 10px; /* 圆角边框 */
margin: 20px 0; /* 外边距 */
}
/* 响应式设计 */
@media (max-width: 768px) {
.header {
padding: 10px;
}
.header-title {
font-size: 1.5em;
}
.header-subtitle {
font-size: 1em;
}
.nav-menu a {
margin: 0 10px;
}
/* 图片框样式 */
.image-block {
position: relative; /* 相对定位 */
display: inline-block; /* 内联块级元素 */
margin: 20px; /* 外边距 */
border: 4px solid #000; /* 黑色边框 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* 阴影效果 */
border-radius: 10px; /* 边框圆角 */
overflow: hidden; /* 隐藏溢出的内容 */
}
.image-block img {
width: 100%; /* 图片宽度100% */
height: auto; /* 图片高度自动 */
display: block; /* 块级显示 */
transition: transform 0.3s ease; /* 平滑变换效果 */
}
.image-block img:hover {
transform: scale(1.05); /* 鼠标悬停时图片放大 */
}
.image-block .caption {
position: absolute; /* 绝对定位 */
bottom: 0; /* 底部对齐 */
left: 0; /* 左侧对齐 */
right: 0; /* 右侧对齐 */
background: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
color: #000; /* 黑色文字 */
padding: 10px; /* 内边距 */
font-size: 0.9em; /* 字体大小 */
text-align: center; /* 文字居中 */
border-radius: 0 0 10px 10px; /* 底部边框圆角 */
transition: background 0.3s ease; /* 平滑背景变化效果 */
}
.image-block .caption:hover {
background: rgba(0, 0, 0, 0.9); /* 鼠标悬停时背景变暗 */
}
/* 响应式设计 */
@media (max-width: 768px) {
.image-block {
margin: 10px; /* 小屏幕上的外边距调整 */
}
}
/* 缓缓浮现的文字效果 */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 3;
transform: translateY(0);
}
/* 注释块样式 */
.note {
background-color: #f2f2f2; /* 浅灰色背景 */
border-left: 4px solid #ccc; /* 左侧边框 */
padding: 10px 20px; /* 内边距 */
margin: 20px 0 20px 20px; /* 外边距，左对齐 */
font-size: 0.9em; /* 字体大小 */
color: #666; /* 文字颜色 */
text-align: left; /* 文本左对齐 */
border-radius: 5px; /* 边框圆角 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
/* 响应式设计 */
@media (max-width: 768px) {
.note {
padding: 10px; /* 小屏幕上的内边距调整 */
margin-left: 10px; /* 小屏幕上的左边距调整 */
}
}
