* {margin: 0;padding: 0; font-weight: 300; } /* box-sizing: border-box; 添加这个重要属性，确保元素尺寸计算一致 */
body, html {font-family: -apple-system, BlinkMacSystemFont, /* iOS & macOS 系统字体 */
"Segoe UI", Roboto, Oxygen, Ubuntu, /* Windows & Linux 系统字体 */
"Microsoft YaHei Light", "微软雅黑 Light", /* 中文Windows系统字体 */
"PingFang SC", "Hiragino Sans GB", /* 中文macOS/iOS字体 */
"Noto Sans CJK SC", "Source Han Sans SC", /* 开源中文字体 */
Arial, sans-serif; /* 通用无衬线字体 */
line-height: 1.5; /* 基础行高，无单位值基于当前字体大小 */
-webkit-text-size-adjust: 100%; /* 禁止iOS Safari调整字体大小 */
-moz-osx-font-smoothing: grayscale; /* Firefox macOS字体平滑 */
-webkit-font-smoothing: antialiased; /* Safari/Chrome字体抗锯齿 */
text-rendering: optimizeLegibility; /* 优化文本可读性 */
letter-spacing: 0.03em;} /* 微调字距 */
body {-webkit-tap-highlight-color: transparent;/* 移除移动端点击高亮 */touch-action: manipulation;/* 优化触摸操作，避免延迟 */}
a {transition: color 0.3s ease, text-decoration-color 1s ease;cursor: pointer;}
a:link {color: #ebebeb; text-decoration: none;}
a:visited {color: #ebebeb; text-decoration: underline; text-decoration-color: #398b39; }
a:hover {color: #398b39;text-decoration-color: #398b39;}
a:active {color: #ff0000;}
textarea, textarea:focus, input, input:focus, button, button:focus {outline: none; resize: inherit;}
h1, h2, h3, h4, h5, h6 {font-style: normal; text-transform: uppercase;}
strong, b, .thick {font-weight: 900;}
h1{font-family: "bei_ti","Microsoft YaHei Bold", "微软雅黑 Bold","Helvetica Neue", Geneva, Arial, sans-serif; font-weight: 900; line-height: 1.2; /* 字体大小的1.2倍 */}
h2{font-family: "shong_ti",sans-serif, Arial;font-weight: 700; line-height: 1.25;}
h3{font-family: "bei_ti","Microsoft YaHei", "微软雅黑","Helvetica Neue", Geneva, Arial, sans-serif;font-weight: 500; line-height: 1.3;}
h4{font-family: "shong_ti",sans-serif, Arial;font-weight: 400; line-height: 1.3;}
h5{font-family: "mao_bi","华文细黑", STXihei,"Droid Sans", sans-serif;line-height: 1.35;}
h6{font-family: "bang_bi", sans-serif;line-height: 1.4;}
/* 清除左右两侧的浮动 绝对一行*/
.clear_div {clear: both;display: block;}
/* 默认 normal 关闭 none 继承 inherit*/
.text_blink{text-decoration:blink} /*闪烁*/
.text_line_through{text-decoration:line-through}/*中划线*/
.text_underline{text-decoration:underline wavy} /*红色 wavy 波浪形下划线*/
.text_capitalize{text-transform:capitalize}/*大写字母开头*/
.text_uppercase{text-transform:uppercase}/*大写字母*/
.text_lowercase{text-transform:lowercase}/*小写字母*/
.text_italic {font-style:italic;}/*斜体*/
.text_oblique {font-style:oblique;}/*斜体*/
/*字体*/
.font_size10{font-size: 10px;}
.font_size12{font-size: 12px;}
.font_size14{font-size: 14px;}
.font_size16{font-size: 16px;}
.font_size18{font-size: 18px;}
.font_size20{font-size: 20px;}
.font_size25{font-size: 25px;}
.font_size30{font-size: 30px;}
.font_size35{font-size: 35px;}
/*正方形*/
.figure_img{position: relative;width: 100%;height: 0;overflow: hidden;margin: 0;padding-bottom: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.figure_img a{display: block;position: absolute;width: 100%;top: 0;bottom: 0;}
/*长方形*/
.figure_img_50{position: relative;width: 100%;height: 0;overflow: hidden;margin: 0;padding-bottom: 50%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.figure_img_50 a{display: block;position: absolute;width: 100%;top: 0;bottom: 0;}
/*竖形*/
.figure_img_150{position: relative;width: 100%;height: 0;overflow: hidden;margin: 0; padding-bottom: 150%;background-position: center;background-repeat: no-repeat;background-size: cover;}
.figure_img_150 a{display: block;position: absolute;width: 100%;top: 0;bottom: 0;}
/* 间距 */
.spacing_1{height: 1px;}
.spacing_10{height: 10px;}
.spacing_20{height: 20px;}
.spacing_30{height: 30px;}
.spacing_40{height: 40px;}
.spacing_50{height: 50px;}
.spacing_100{height: 100px;}
/* 半透明背景色 */
.b_c_1{background: rgba(0, 0, 0, 0.5);} /*黑色*/
.b_c_2{background: rgba(0, 0, 0, 0.3);} /*黑色*/
/* 宽度 */
.width_300{width: 300px}
.width_500{width: 500px}
/* 字色 */
.color_1{color: rgba(0, 0, 0,1);}
.color_2{color: rgba(101, 101, 101,1);}
.color_3{color: rgba(0, 122, 255,1) !important; } /*蓝色*/
.color_4{color: rgba(76, 217, 100,1) !important; } /*绿色*/
.color_5{color: rgba(240, 173, 78,1);} /*黄色*/
.color_6{color: rgba(221, 82, 77,1) !important;} /*红色*/
.color_7{color: rgba(138, 109, 233,1);} /*紫色*/
.color_8{color: rgba(115, 115, 115,1);}
.color_9{color: rgba(246, 32, 20,1);}/*大红色*/
.color_10{color: rgba(255, 134, 172,1);}
.color_11{color: rgba(204, 204, 204, 1);}
.color_12{color: rgba(235, 60, 17,1);}
/* 背景色 */
.b_color_1{background: rgba(221, 82, 77, 1) !important; } /*红色*/
.b_color_2{background: rgba(76, 217, 100, 1)!important; } /*绿色*/
.b_color_3{background: rgba(240, 173, 78, 1)!important; } /*黄色*/
.b_color_4{background: rgba(0, 122, 255, 1)!important; } /*蓝色*/
.b_color_5{background: rgba(0, 0, 0, 1);}
.b_color_6{background: rgba(60, 60, 60,1);}
.b_color_7{background: rgba(138, 109, 233,1);}
.b_color_8{background: rgba(246, 32, 20,1) ;}
/*黑白*/
.black_white{-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);filter: gray;}
/* 圆角 */
.radius_5px{ border-radius: 5px;}
.radius_10px{ border-radius: 10px;}
.radius_top_left_5px{ border-top-left-radius: 5px;}/* 左上角 */
.radius_bottom_left_5px{ border-bottom-left-radius: 5px;}/* 左下角 */
.radius_top_right_5px{ border-top-right-radius: 5px;}/* 右上角 */
.radius_bottom_right_5px{ border-bottom-right-radius: 5px;}/* 右下角 */
/* 模糊 */
.blur_1{filter: blur(1px); -webkit-filter: blur(1px); -moz-filter: blur(1px); -ms-filter: blur(1px); -o-filter: blur(1px);}
.blur_2{filter: blur(2px); -webkit-filter: blur(2px); -moz-filter: blur(2px); -ms-filter: blur(2px); -o-filter: blur(2px);}
.blur_3{filter: blur(3px); -webkit-filter: blur(3px); -moz-filter: blur(3px); -ms-filter: blur(3px); -o-filter: blur(3px);}
.blur_5{filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px);}
/* 滚动条 */
/* 主滚动条轨道 */
::-webkit-scrollbar {width: 8px;} /* 滚动条宽度 */
/* 滚动条轨道 */
::-webkit-scrollbar-track {background: #252629;border-radius: 4px;}/* 深灰背景 */
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {background: #3a3b3e; /* 中灰色 */border-radius: 4px;border: 1px solid #2c2d30; /* 深色边框增加立体感 */}
/* 鼠标悬停时的滑块 */
::-webkit-scrollbar-thumb:hover {background: #4c4d50; /* 亮灰色 */}
/* 滚动条角落 */
::-webkit-scrollbar-corner {background: #1e1f22; /* 与背景一致 */}
/* 表单 */
.form{overflow: hidden;}
.form dl{overflow: hidden; position: relative; margin: 20px 0;}
.form dl dt{overflow: hidden; width: 100px; margin: 0 20px 0 0; line-height: 40px; z-index: 1; position: absolute; top:0; left: 0;color: #b4b4b4;}
.form dl dd{overflow: hidden; width:calc(100% - 120px); margin: 0 0 0 120px;}
.form dl dd input{overflow: hidden; background: #303030; border-radius: 5px; color: #fff; border: 1px solid #454545; padding: 10px;width:calc(100% - 22px);}
.form dl dd select {
overflow: hidden;
background: #303030;
border-radius: 5px;
color: #fff;
border: 1px solid #454545;
padding: 10px;
width: calc(100% - 2px);
/* 为select添加额外样式 */
appearance: none; /* 移除默认系统样式 */
-webkit-appearance: none; /* Safari兼容 */
-moz-appearance: none; /* Firefox兼容 */
/* 添加自定义下拉箭头 */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px; /* 为箭头留出空间 */
}
/* 选中状态（焦点状态） */
.form dl dd select:focus {
background-color: #404040; /* 选中时的背景色 */
border-color: #007bff; /* 选中时的边框颜色 */
outline: none; /* 移除默认轮廓 */
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* 可选：发光效果 */
}
/* 悬停状态 */
.form dl dd select:hover {
background-color: #383838; /* 悬停时的背景色 */
border-color: #555; /* 悬停时的边框颜色 */
}
/* 激活状态（鼠标按下时） */
.form dl dd select:active {
background-color: #484848; /* 激活时的背景色 */
border-color: #0056b3; /* 激活时的边框颜色 */
}
/* 下拉选项样式 */
.form dl dd select option {
background: #303030; /* 选项背景色 */
color: #fff; /* 选项文字颜色 */
padding: 10px; /* 选项内边距 */
}
/* 下拉选项悬停/选中状态 */
.form dl dd select option:hover,
.form dl dd select option:checked,
.form dl dd select option:focus {
background: #007bff; /* 选中选项的背景色 */
color: #fff; /* 选中选项的文字颜色 */
}
/* 下拉框打开时的样式 */
.form dl dd select:focus option:checked {
background: #007bff; /* 下拉框中选中项的背景色 */
color: #fff;
}
.form dl dd textarea{overflow: hidden; background: #303030; border-radius: 5px; color: #fff; border: 1px solid #454545; padding: 10px;width:calc(100% - 22px);}
.form dl dd:nth-child(3) {font-size: 12px;color: #7a787a; margin: 10px 0 0 120px;}
.form dl dd ul{overflow: hidden;}
.form dl dd ul li{overflow: hidden; margin: 10px 0 0 0; padding: 5px; border-radius: 5px; color: #7a787a; transition: width 1s,padding 1s; position: relative;}
.form dl dd ul li:hover{padding: 5px 5px 5px 30px;}
.form dl dd ul .on{overflow: hidden; background: #303030; color: #fff; padding: 5px 5px 5px 30px;}
.form dl dd ul .on::after { color:#007bff;content: "\e69c";font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;display: table; clear: both; position: absolute; left: 10px; top:6px; font-size: 14px;}
.form dl dd ul ol{overflow: hidden; padding: 20px 0 0 0;}
.form dl dd ul ol li{overflow: hidden; width: 100%; border-radius:0; padding: 5px 0 5px 30px; background: none; color: #7a787a; margin: 0; border: none; text-align: left;}
.form dl dd ul ol li:after {font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;content: "\e692";
display: table; clear: both; position: absolute; left: 10px; top:6px; font-size: 14px;}
.form dl dd ul ol li:hover{padding:5px 0 5px 30px; border: none; font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;content: "\e69c";}
.form dl dd ul ol li:nth-of-type(3n) {margin: 0 ; width: 100%;}
.form dl dd ul ol .on{overflow: hidden; background:none; color: #fff; padding:5px 0 5px 30px; position: relative;border: none;}
.form dl dd ul ol .on::after {font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;content: "\e69c"; color:#007bff; border: none; padding:0;
display: table; clear: both; position: absolute; left: 10px; top:5px; font-size: 14px;}
.form dl dd ol{overflow: hidden;}
.form dl dd ol li{overflow: hidden; background: #303030; border-radius: 5px; color: #fff; border: 1px solid #454545; padding: 10px 0;width:calc(33.3% - 12px); text-align: center; float: left; margin: 0 10px 10px 0; font-size: 14px; white-space: nowrap;text-overflow: ellipsis;}
.form dl dd ol li:nth-of-type(3n) {margin: 0 0 10px 0 ;width:calc(33.3% - 2px);}
.form dl dd ol .on{overflow: hidden; border: 1px solid #007bff;}
.form .score{overflow: hidden;}
.form .score .li{overflow: hidden; background: #303030; border-radius: 5px; color: #fff; border: 1px solid #454545; padding: 10px 0;width:calc(20% - 12px); text-align: center; float: left; margin: 0 10px 10px 0; font-size: 14px; white-space: nowrap;text-overflow: ellipsis;}
.form .score .li:nth-of-type(5n) {margin: 0 0 10px 0 ;width:calc(20% - 2px);}
.form .score .on{border: 1px solid #007bff !important;}
.form .score .li:hover {background-color: #303030; cursor: pointer; }
.form .score .li:active {background-color: #454545;transform: translateY(1px); }
.form .score .li:focus {outline: 2px solid #0066cc; outline-offset: 2px;}
.form .score{overflow: hidden;}
.form button{overflow: hidden; color: #fff;border: 1px solid #007aff; border-radius: 5px; padding: 10px 20px; text-align: center; font-weight: 300; background-color: #007aff; font-size: 16px;}
/*隐藏 打开*/
.none{display: none !important;}
.block{display: block !important;}
.flex {display: flex !important;}
/* 创建左右文字渐变动画 红色*/
.animation_text {width: 100%;height: auto; font-weight: bold; text-align: center; font-size: 18px; background: linear-gradient(90deg, #f00, #ccc,#ddd);background-size: 200% 200%;animation: gradientAnimation 3s ease infinite;-webkit-text-fill-color: transparent;-webkit-background-clip:text; padding:20px 0;}
.animation_text span{font-weight: 300; font-size: 18px;}
.animation_text dl{overflow:hidden; text-align: center;}
.animation_text dl dt{overflow:hidden; font-weight: bold; font-size: 14px; margin: 0 0 5px 0;}
.animation_text dl dd{overflow:hidden; font-size: 10px; font-weight: 300;}
@keyframes gradientAnimation { 0% { background-position: 0% 50%; } 25% { background-position: 100% 50%; } 50% { background-position: 50% 100%; } }
/* 创建左右文字渐变动画 灰色 */
.animation_txt {width: 100%;height: auto;padding: 20px 0;
font-weight: bold;text-align: center;font-size: 18px;color: #c4c4c4;/* 为不支持的浏览器提供回退颜色 */
/* 背景渐变 - 添加各浏览器前缀和标准写法 */
background-image: -webkit-linear-gradient(left, #f7f7f7, #c4c4c4 25%, #f7f7f7 50%, #c4c4c4 75%, #f7f7f7);
background-image: -moz-linear-gradient(left, #f7f7f7, #c4c4c4 25%, #f7f7f7 50%, #c4c4c4 75%, #f7f7f7);
background-image: -o-linear-gradient(left, #f7f7f7, #c4c4c4 25%, #f7f7f7 50%, #c4c4c4 75%, #f7f7f7);
background-image: linear-gradient(to right, #f7f7f7, #c4c4c4 25%, #f7f7f7 50%, #c4c4c4 75%, #f7f7f7); /* 标准语法使用 'to right' */
/* 文本填充色透明 - 添加各浏览器前缀和标准写法 */
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-ms-text-fill-color: transparent;
-o-text-fill-color: transparent;
text-fill-color: transparent;
/* 背景裁剪至文本 - 添加各浏览器前缀和标准写法 */
-webkit-background-clip: text;
-moz-background-clip: text;
-ms-background-clip: text;
-o-background-clip: text;
background-clip: text;
/* 背景尺寸 - 添加各浏览器前缀和标准写法 */
-webkit-background-size: 200% 100%;
-moz-background-size: 200% 100%;
-ms-background-size: 200% 100%;
-o-background-size: 200% 100%;
background-size: 200% 100%;
/* 动画 - 添加各浏览器前缀和标准写法 */
-webkit-animation: masked-animation 4s infinite linear;
-moz-animation: masked-animation 4s infinite linear;
-ms-animation: masked-animation 4s infinite linear;
-o-animation: masked-animation 4s infinite linear;
animation: masked-animation 4s infinite linear;
}
.animation_txt dl {overflow: hidden;text-align: center;}
.animation_txt dl dt {overflow: hidden;font-weight: bold;font-size: 14px;line-height: 15px;margin: 0 0 5px 0;}
.animation_txt dl dd {overflow: hidden;font-size: 10px;font-weight: 300;line-height: 10px;}
/* 定义关键帧动画 - 添加各浏览器前缀和标准写法 */
@-webkit-keyframes masked-animation { 0% { background-position: 0% 0%; } 100% { background-position: -100% 0%; } }
@-moz-keyframes masked-animation { 0% { background-position: 0% 0%; } 100% { background-position: -100% 0%; } }
@-ms-keyframes masked-animation { 0% { background-position: 0% 0%; } 100% { background-position: -100% 0%; } }
@-o-keyframes masked-animation { 0% { background-position: 0% 0%; } 100% { background-position: -100% 0%; } }
@keyframes masked-animation { 0% { background-position: 0% 0%; } 100% { background-position: -100% 0%; } }
/* 加载中 */
.loading{overflow: hidden; margin: 0 auto; display: flex; justify-content: center; align-items: center;}
.loading dl{overflow: hidden; border-radius: 50px; padding:5px 10px; font-size: 12px; background: rgba(255, 255, 255, 0.7); color:rgba(0, 0, 0, 1);text-shadow: -1px -1px 0 rgba(255, 255, 255, 0.2), 1px -1px 0 rgba(255, 255, 255, 0.2), -1px 1px 0 rgba(255, 255, 255, 0.2), 1px 1px 0 rgba(255, 255, 255, 0.2);}
.loading dl dt{float: left; margin: 0 5px 0 0;}
.loading dl dt span{ font-size: 12px; font-weight: 900;}
.loading dl dd{ float: left; font-weight: 900;}
/* 旋转图标 */
.loading dl dt .icon-jiazai {display: inline-block; animation: icon_rotate 2s linear infinite;}
@keyframes icon_rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
/* 弹窗 */
.message_dialog{overflow: hidden; position: fixed; top:0; left:0; right: 0; bottom:0; z-index: 99999; background: rgba(0, 0, 0, 0.5); display: none;visibility: visible; opacity: 0;transition: opacity 0.3s ease, visibility 0.3s;}
.message_dialog.active {display: flex !important; opacity: 1;visibility: visible;}
.message_dialog.active dl{transform: scale(1);}
.message_dialog dl{overflow: hidden; position: fixed; text-align: center; font-size: 16px; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 99999; line-height: 30px; border-radius: 5px; padding: 10px;animation: slider1 3s forwards;}
.message_dialog dl dt{overflow: hidden; font-weight: bold; margin: 0 0 5px 0;}
.message_dialog dl dd{overflow: hidden; font-size: 12px; line-height: 15px; color: rgba(255, 255, 255, 0.7)}
.background_color_4{border: 1px solid rgba(76, 217, 100,1); background-color: rgba(76, 217, 100,1); color: #fff; text-shadow: 0 1px 0 rgba(76, 217, 100,0.5); -webkit-box-shadow: 0 1px 6px rgba(76, 217, 100,0.5); box-shadow: 0 1px 6px rgba(76, 217, 100,0.5);}
.background_color_3{border: 1px solid rgba(240, 173, 78,1); background-color: rgba(240, 173, 78,1); color: #fff; text-shadow: 0 1px 0 rgba(240, 173, 78,0.5); -webkit-box-shadow: 0 1px 6px rgba(240, 173, 78,0.5); box-shadow: 0 1px 6px rgba(240, 173, 78,0.5);}
.background_color_2{border: 1px solid rgba(221, 82, 77, 1); background-color: rgba(221, 82, 77, 1); color: #fff; text-shadow: 0 1px 0 rgba(221, 82, 77, 0.5); -webkit-box-shadow: 0 1px 6px rgba(221, 82, 77, 0.5); box-shadow: 0 1px 6px rgba(221, 82, 77, 0.5);}
.background_color_1{border: 1px solid rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 1); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);}
/* 内容消失动画 */
@keyframes slider1 {
0% {transform: scale(1.1);opacity:0;}
10%{transform: scale(1);opacity:1;}
80% {transform: scale(1);opacity:1;}
100%{transform: scale(1.1);opacity:0;}
}
/*
*/
/* 背景动画 */
.b_animation_1{background: linear-gradient(-45deg, #1E1314, #DBC48E, #371E1A, #5F4A3F);background-size: 400% 400%;-webkit-animation: Gradient 5s ease infinite;-moz-animation: Gradient 5s ease infinite;animation: Gradient 5s ease infinite;}
.b_animation_2{background: linear-gradient(-45deg, #061d06, #00ca00, #065206, #00a31b);background-size: 400% 400%;-webkit-animation: Gradient 5s ease infinite;-moz-animation: Gradient 5s ease infinite;animation: Gradient 5s ease infinite;}
.b_animation_3{background: linear-gradient(-45deg, #4f0202, #ff0000, #750404, #e82020);background-size: 400% 400%;-webkit-animation: Gradient 5s ease infinite;-moz-animation: Gradient 5s ease infinite;animation: Gradient 5s ease infinite;}
.b_animation_4{background: linear-gradient(-45deg, #fff, #f7f7f7, #e1e1ee, #f2f2fd);background-size: 400% 400%;-webkit-animation: Gradient 5s ease infinite;-moz-animation: Gradient 5s ease infinite;animation: Gradient 5s ease infinite;}
.b_animation_5{background: linear-gradient(-45deg, #252525, #303030, #3b3b3b, #252525);background-size: 400% 400%;-webkit-animation: Gradient 5s ease infinite;-moz-animation: Gradient 5s ease infinite;animation: Gradient 5s ease infinite;}
@-webkit-keyframes Gradient { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} }
@-moz-keyframes Gradient { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} }
@keyframes Gradient { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} }
/* 未定义 */
:root{--purple:#7b1fa2;--violet:#673ab7;--pink:#f48fb1}
@keyframes background-pan{from{background-position:0 center}to{background-position:-200% center}}
@keyframes scale{from,to{transform:scale(0)}50%{transform:scale(1)}}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
li:hover {background-color: #303030; cursor: pointer; }
li:active {background-color: #454545;transform: translateY(1px); }
li:focus {outline: 2px solid #0066cc; outline-offset: 2px;}/*可以聚焦的列表项（按Tab键试试）*/
ul, ol {list-style-type: none;}
/* 恢复列表样式 */
.list_disc{list-style-type: disc; margin: 1em 0;padding-left: 2em;} /*实心圆点*/
.list_disc:hover{background-color: rgba(0,0,0,0.02);}
.list_disc li {margin: 0.25em 0;padding: 0.25em 0.5em; transition: all 0.2s ease;}
.list_circle{list-style-type: circle; margin: 1em 0;padding-left: 2em;} /*空心圆*/
.list_circle:hover{background-color: rgba(0,0,0,0.02);}
.list_circle li {margin: 0.25em 0;padding: 0.25em 0.5em; transition: all 0.2s ease;}
.list_square{list-style-type: square; margin: 1em 0;padding-left: 2em;} /*矩形*/
.list_square:hover{background-color: rgba(0,0,0,0.02);}
.list_square li {margin: 0.25em 0;padding: 0.25em 0.5em; transition: all 0.2s ease;}
.list_decimal{list-style-type: decimal; margin: 1em 0;padding-left: 2em;} /*数字*/
.list_decimal:hover{background-color: rgba(0,0,0,0.02);}
.list_decimal li {margin: 0.25em 0;padding: 0.25em 0.5em; transition: all 0.2s ease;}
.list_decimal-leading-zero{list-style-type: decimal-leading-zero; margin: 1em 0;padding-left: 2em;} /*前导零的数字*/
.list_decimal-leading-zero:hover{background-color: rgba(0,0,0,0.02);}
.list_decimal-leading-zero li {margin: 0.25em 0;padding: 0.25em 0.5em; transition: all 0.2s ease;}
.list_lower-alpha{list-style-type: lower-alpha; margin: 1em 0;padding-left: 2em;} /*小写字母*/
.list_lower-alpha:hover{background-color: rgba(0,0,0,0.02);}
.list_lower-alpha li {margin: 0.25em 0;padding: 0.25em 0.5em; transition: all 0.2s ease;}
.list_upper-alpha{list-style-type: upper-alpha; margin: 1em 0;padding-left: 2em;} /*大写字母*/
.list_upper-alpha:hover{background-color: rgba(0,0,0,0.02);}
.list_upper-alpha li {margin: 0.25em 0;padding: 0.25em 0.5em; transition: all 0.2s ease;}
.list_lower-roman{list-style-type: lower-roman; margin: 1em 0;padding-left: 2em;} /*小写罗马数字*/
.list_lower-roman:hover{background-color: rgba(0,0,0,0.02);}
.list_lower-roman li {margin: 0.25em 0;padding: 0.25em 0.5em; transition: all 0.2s ease;}
.list_upper-roman{list-style-type: upper-roman; margin: 1em 0;padding-left: 2em;} /*大写罗马数字*/
.list_upper-roman:hover{background-color: rgba(0,0,0,0.02);}
.list_upper-roman li {margin: 0.25em 0;padding: 0.25em 0.5em; transition: all 0.2s ease;}
/*
* 表格基础样式
* 1. 设置基本布局和边框
* 2. 确保表格宽度适应内容
*/
table {width: 100%;border-collapse: collapse;border-spacing: 0;margin: 1em 0;font-size: 0.9em;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;line-height: 1.5;color: #333;}
/* 表格标题样式*/
caption {font-size: 1.1em;font-weight: bold;text-align: left;padding: 0.5em 0;margin-bottom: 0.5em;color: #333;caption-side: top; /* 标题位置（top/bottom） */}
/* 表头单元格样式*/
th {background-color: #f8f9fa;color: #333;font-weight: 600;text-align: left;padding: 0.75em 1em; vertical-align: middle;border: 1px solid #dee2e6;}
/** 表格单元格基础样式 */
td {padding: 0.75em 1em;vertical-align: middle; border: 1px solid #dee2e6;}
/* 表格行样式 */
tr {transition: all 0.2s ease; /* 过渡效果 */}
/*斑马纹表格 - 隔行变色*/
.table-striped tbody tr:nth-child(odd) {background-color: rgba(0, 0, 0, 0.02);}
/* 表格行悬停效果*/
.table-hover tbody tr:hover {background-color: rgba(0, 0, 0, 0.05);}
/* 带边框表格变体 */
.table-bordered {border: 1px solid #dee2e6;}
.table-bordered th, .table-bordered td {border: 1px solid #dee2e6;}
/* 无边框表格变体*/
.table-borderless th, .table-borderless td, .table-borderless tr {border: none;}
/* 紧凑表格 - 减少内边距 */
.table-sm th, .table-sm td {padding: 0.3em 0.6em;}
/* 表格颜色变体*/
.table-primary {background-color: #cfe2ff;}
.table-secondary {background-color: #e2e3e5;}
.table-success {background-color: #d1e7dd;}
.table-danger {background-color: #f8d7da;}
.table-warning {background-color: #fff3cd;}
.table-info {background-color: #cff4fc;}
/* 表头颜色变体*/
.thead-primary th {background-color: #0d6efd;color: white;}
.thead-dark th {background-color: #212529;color: white;}
.thead-light th {background-color: #f8f9fa;color: #212529;}
/* 响应式表格 在小屏幕上水平滚动*/
.table-responsive {overflow-x: auto;-webkit-overflow-scrolling: touch;max-width: 100%;}
/* 固定表头（需要JavaScript配合）*/
.table-fixed thead {position: sticky;top: 0;z-index: 10;}
/* 单元格对齐方式*/
.text-center th, .text-center td {text-align: center;}
.text-right th, .text-right td {text-align: right;}
.text-left th, .text-left td {text-align: left;}
/* 表格单元格状态*/
td.success {background-color: #d1e7dd;}
td.warning {background-color: #fff3cd;}
td.danger {background-color: #f8d7da;}
/*表格排序指示器*/
.sortable th {cursor: pointer;position: relative;}
.sortable th:hover {background-color: rgba(0, 0, 0, 0.1);}
.sortable th::after {content: "↕";position: absolute;right: 0.5em;opacity: 0.3;}
.sortable th.asc::after {content: "↑";opacity: 1;}
.sortable th.desc::after {content: "↓";opacity: 1;}
/*
基础无序列表
- 默认列表项
- 悬停我试试（会有背景色变化）
- 点击我（会有按下效果）
- 可以聚焦的列表项（按Tab键试试）
斑马纹表格
| 产品ID |
产品名称 |
类别 |
价格 |
库存 |
| P1001 |
笔记本电脑 |
电子产品 |
¥5,999 |
120 |
| P1002 |
智能手机 |
电子产品 |
¥3,299 |
85 |
| P1003 |
无线耳机 |
配件 |
¥599 |
200 |
| P1004 |
智能手表 |
电子产品 |
¥1,299 |
75 |
悬停效果表格
| 学号 |
姓名 |
班级 |
语文 |
数学 |
英语 |
| S1001 |
张三 |
三年二班 |
95 |
98 |
92 |
| S1002 |
李四 |
三年二班 |
78 |
75 |
82 |
| S1003 |
王五 |
三年二班 |
62 |
58 |
65 |
紧凑表格
| # |
任务名称 |
负责人 |
状态 |
截止日期 |
| 1 |
首页设计 |
张三 |
已完成 |
2023-05-10 |
| 2 |
产品页面开发 |
李四 |
进行中 |
2023-05-20 |
| 3 |
后台API开发 |
王五 |
延期 |
2023-05-05 |
响应式表格（在小屏幕上会水平滚动）
| 日期 |
访问量 |
独立访客 |
页面浏览量 |
平均停留时间 |
跳出率 |
转化率 |
| 2023-05-01 |
1,245 |
982 |
3,450 |
2分45秒 |
42% |
3.2% |
| 2023-05-02 |
1,387 |
1,102 |
3,890 |
3分12秒 |
38% |
3.8% |
| 2023-05-03 |
1,502 |
1,245 |
4,230 |
3分05秒 |
35% |
4.1% |
无边框表格
| 城市 |
温度 |
天气 |
湿度 |
风速 |
| 北京 |
23°C |
晴 |
45% |
3级 |
| 上海 |
25°C |
多云 |
65% |
2级 |
| 广州 |
28°C |
阵雨 |
78% |
4级 |
*/
/*
声明文档类型为HTML5。
定义HTML文档的根元素。
包含文档的元信息，如标题和引用的外部资源。
定义浏览器标签页或窗口标题栏中显示的标题。
<body> 包含网页所有可见的内容，如文本、图片、链接等。
<meta> 提供关于网页的元数据，如字符集、视图端口设置或页面描述。
<base> 为页面上的所有相对链接规定默认地址或默认目标。
<link> 定义当前文档与外部资源（如CSS样式表）的关系。
<style> 用于在文档内嵌入CSS样式信息。
<header> 定义文档或某个内容区块的页眉（引导和导航信息）。
<footer> 定义文档或某个内容区块的页脚（如版权信息）。
<nav> 定义页面的主要导航链接部分。
<main> 定义文档的主要内容区域，该内容在页面中应唯一。
<article> 定义一篇独立、可自包含的内容，如博客文章或新闻故事。
<section> 将文档内容划分为一个通用的主题区块或章节。
<aside> 定义与主内容间接相关或独立的内容，如侧边栏。
<h1> 到 <h6> 定义六级标题，<h1> 级别最高，<h6> 最低。
<hgroup> 用于对连续的标题元素（如主标题和副标题）进行分组。
<p> 定义一个文本段落。
<br> 在文本中插入一个简单的换行。
<hr> 在内容中创建一条水平线，通常表示主题的转换。
<pre> 定义预格式化的文本，保留空格和换行。
<blockquote> 定义一段从其他来源引用的较长内容块。
<q> 定义一段短的 inline 引用。
<ol> 定义一个有序列表（列表项前有数字或字母标识）。
<ul> 定义一个无序列表（列表项前通常有项目符号）。
<li> 定义列表中的一个项目，用于 <ol> 或 <ul> 内部。
<dl> 定义一个描述列表（或定义列表）。
<dt> 在描述列表 <dl> 中定义被描述的术语。
<dd> 在描述列表 <dl> 中定义术语的描述或值。
<div> 定义一个通用的块级容器，用于样式化或布局。
<span> 定义一个通用的内联容器，用于对文本的某部分进行样式化。
<strong> 定义重要性更强的文本，通常以粗体显示。
<em> 定义需要强调的文本，通常以斜体显示。
<mark> 定义被标记或高亮显示的文本，以引起注意。
<small> 定义小号字体文本，常用于免责声明或注释。
<cite> 定义作品（如书籍、歌曲、电影）的标题。
<code> 定义一段计算机代码片段。
<time> 定义机器可读的日期或时间。
<abbr> 定义缩写或首字母缩略词，可通过 title 属性提供完整解释。
<address> 定义文档或文章作者/拥有者的联系信息。
<details> 定义一个可展开/折叠的控件，用户可查看隐藏的额外细节。
<summary> 为 <details> 元素定义一个可见的摘要或标题。
<data> 将内容与一个机器可读的等价形式关联起来。
<b> 定义一段不带额外重要性、仅为引起注意的粗体文本。
<i> 定义一段在另一种语言或技术术语中使用的斜体文本。
<u> 定义带有下划线的文本，通常用于专有名词或标错。
<s> 定义不再准确或不再相关、带有删除线的文本。
<sub> 定义下标文本。
<sup> 定义上标文本。
<bdo> 覆盖当前文本的默认方向，用于显示从右向左的语言。
<bdi> 将一段文本隔离出来，使其方向独立于周围的文本。
<wbr> 定义一个可能的换行机会，用于长单词或URL。
<template> 定义一个HTML模板，其内容在页面加载时不会呈现，但可由JavaScript实例化。
<img> 在文档中嵌入一幅图像。
<figure> 定义独立的流内容（如图表、插图、代码清单），通常带有标题。
<figcaption> 为 <figure> 元素定义标题。
<picture> 为一个图像定义多个来源，让浏览器根据条件（如屏幕尺寸）选择最合适的。
<svg> 定义一个使用SVG（可缩放矢量图形）格式的图形容器。
<canvas> 定义一个使用JavaScript脚本绘制图形（如图表、游戏）的位图区域。
<audio> 在文档中嵌入音频内容。
<video> 在文档中嵌入视频内容。
<source> 为 <audio>, <video>, <picture> 指定多个媒体资源。
<track> 为 <audio> 和 <video> 媒体指定外部文本轨道（如字幕）。
<map> 定义一个客户端图像映射（可点击的区域链接）。
<area> 在图像映射 <map> 内部定义一个可点击的区域。
<embed> 定义一个容器，用于嵌入外部应用程序或交互内容（插件）。
<object> 定义一个嵌入对象，可用于嵌入各种资源，如PDF文件或Flash动画。
<param> 为 <object> 元素定义参数。
<table> 定义一个表格。
<caption> 定义表格的标题。
<thead> 将表格中的表头内容分组。
<tbody> 将表格中的主体内容分组。
<tfoot> 将表格中的表注（脚注）内容分组。
<tr> 定义表格中的一行。
<th> 定义表格内的一个表头单元格。
<td> 定义表格内的一个标准数据单元格。
<colgroup> 指定表格中一组用于格式化的列。
<col> 在 <colgroup> 内部使用，指定列的属性。
<form> 定义一个包含交互式控件、用于向服务器提交数据的表单。
<input> 定义一个输入控件，类型多样（如文本、密码、复选框、单选按钮）。
<textarea> 定义一个多行的纯文本输入控件。
<button> 定义一个可点击的按钮。
<select> 定义一个下拉选择列表。
<option> 在 <select>、<datalist> 或 <optgroup> 中定义一个选项。
<optgroup> 在下拉列表 <select> 中将相关 <option> 进行分组。
<label> 为表单控件（如 <input>）定义一个标签。
<fieldset> 将表单中的多个相关控件分组，并用一个方框包围起来。
<legend> 为 <fieldset> 元素定义标题。
<datalist> 定义一个预定义选项列表，与 <input> 元素配合使用提供自动完成建议。
<output> 定义一个显示计算或用户操作结果的区域。
<meter> 定义在一个已知标量范围内显示的度量值（或分数值），如图盘。
<progress> 定义显示任务完成进度的进度条。
<script> 用于嵌入或引用客户端JavaScript代码。
<noscript> 定义在浏览器不支持或已禁用脚本时显示的替代内容。
*/