/* 定义CSS字符编码格式为gb2312（兼容中文显示，适配旧版浏览器） */
@charset "gb2312";

/* 根元素html样式：设置页面全局背景为网络图片 */
html {
	background: url(https://img.moodlog.cn/i/2025/04/13/66ed44f688f90.jpeg);
	background-size: cover; /* 核心属性：背景图覆盖整个容器，自动拉伸/裁剪适配 */
	background-repeat: no-repeat; /* 禁止背景图平铺 */
	background-position: center center; /* 核心属性：背景图水平+垂直居中，优先显示中间核心内容 */
	background-attachment: fixed; /* 可选：背景图固定，滚动页面时背景不跟随滚动，视觉更整洁 */
	min-height: 100vh; /* 确保html元素至少占满可视区域高度，避免背景图被压缩 */
}

/* 头部header样式：固定宽高，顶部外边距30px，水平居中，垂直上方间距30px */
header {
	width: 221px;          /* 宽度221像素 */
	height: 78px;          /* 高度78像素 */
	margin: 30px auto 0;   /* 外边距：上30px、左右自动（水平居中）、下0px */
}

/* 主体内容main样式：固定宽度（响应式会覆盖），下移200px，带绿色边框和圆角，半透明白色背景 */
main {
	width: 400px;          /* 默认宽度400像素 */
	margin: 180px auto 0;  /* 外边距：上200px（实现下移效果）、左右自动（水平居中）、下0px */
	border: 2px solid #4AB350; /* 2px绿色实心边框 */
	border-radius: 20px;   /* 20px圆角，让容器边角圆润 */
	padding: 20px;         /* 内边距20px，内容与容器边框保持间距 */
	background-color: #33333333; /* 白色极低透明度背景（近乎透明，保证文字清晰） */
}

/* 一级标题h1样式：设置字体大小为16像素 */
h1{ font-size:16px;}

/* 底部footer样式：文本水平居中，上下内边距40px，撑起底部高度 */
footer {
	text-align: center;    /* 文本水平居中对齐 */
	margin: 40px 0;  
	padding: 40px 0;       /* 内边距：上下40px、左右0px */
}

/* main内部.item类样式：100%宽度，上下内边距10px，撑起项目区域高度 */
main .item {
	width: 100%;           /* 宽度继承父元素main，占满容器 */
	padding: 10px 0;       /* 内边距：上下10px、左右0px */
}

/* main内部.item类下的div样式：固定宽高，行高与高度一致（垂直居中），左浮动 */
main .item div {
	width: 85px;           /* 宽度85像素 */
	height: 32px;          /* 高度32像素 */
	line-height: 32px;     /* 行高32px，实现文本垂直居中 */
	float: left;           /* 左浮动，让元素横向排列 */
}

/* 输入框input和下拉选择框select通用样式：去除外轮廓，灰色边框，固定高度 */
input, select {
	outline: none;         /* 去除元素获取焦点时的默认外轮廓边框 */
	border: 1px solid #d0ad9a; /* 1px浅棕色实心边框 */
	border-radius: 2px;    /* 2px小圆角，优化视觉效果 */
	height: 30px;          /* 元素高度30像素 */
	line-height: 38px;     /* 行高38px，辅助文本垂直对齐 */
	padding: 0 4px;        /* 内边距：上下0px、左右4px，文本与边框保持间距 */
}

/* 随机数字展示区域#randomNumbers样式：绿色文字，宽占满，大字体，灰色背景 */
#randomNumbers {
	color: #4AB350;        /* 文字颜色为绿色，与main边框颜色一致 */
	width: 100%;           /* 宽度占满父元素 */
	line-height: 36px;     /* 行高36px，文本垂直居中 */
	font-size: 28px;       /* 字体大小28像素，醒目展示随机数字 */
	text-align: left;      /* 文本左对齐 */
	background-color: ##ffffff0a; /* 浅灰色背景，突出展示区域 */
	border-radius: 3px;    /* 3px小圆角 */
	padding: 5px;          /* 内边距5px，内容与边框间距 */
	margin: 10px 0;        /* 外边距：上下10px、左右0px，与其他元素分隔 */
}

/* 生成随机数按钮#randomGenerate样式：深绿色背景，白色文字，鼠标悬浮变手型 */
#randomGenerate {
	display: inline-block; /* 行内块元素，可设置宽高和内外边距 */
	height: 38px;          /* 按钮高度38像素 */
	line-height: 38px;     /* 行高38px，按钮文字垂直居中 */
	padding: 0 18px;       /* 内边距：上下0px、左右18px，控制按钮宽度 */
	background-color: #009688; /* 深绿色背景（扁平化风格） */
	color: #fff;           /* 文字白色 */
	white-space: nowrap;   /* 文字不换行，保证按钮文字完整显示 */
	text-align: center;    /* 文字水平居中 */
	font-size: 14px;       /* 字体大小14像素 */
	border: none;          /* 去除默认边框 */
	border-radius: 2px;    /* 2px小圆角，优化按钮外观 */
	cursor: pointer;       /* 鼠标悬浮时显示手型，提示可点击 */
}

/* 大写字母/选项列表.daxie样式：固定宽度，水平居中，顶部外边距15px */
.daxie{ 
	width:400px;           /* 宽度400像素，与main宽度一致 */
	margin:0 auto;         /* 左右自动，水平居中 */
	margin-top:15px;       /* 顶部外边距15px，与上方元素分隔 */
}

/* .daxie列表项li样式：左浮动横向排列，固定宽度，隐藏溢出内容，带灰色边框 */
.daxie li{ 
	float:left;            /* 左浮动，实现列表项横向排列 */
	width:46px;            /* 列表项宽度46像素 */
	overflow:hidden;       /* 隐藏超出元素宽度的内容，防止文字溢出 */
	list-style:none;       /* 去除列表默认的项目符号 */
	text-align:center;     /* 文本水平居中 */
	margin-right:2px;      /* 右侧外边距2px，列表项之间保持间距 */
	padding:3px 0px;       /* 内边距：上下3px、左右0px */
	border: 1px solid #ccc; /* 1px浅灰色实心边框 */
	border-radius:3px;     /* 3px小圆角 */
}

/* .daxie列表项li:hover：鼠标悬浮样式，浅灰色背景，白色文字 */
.daxie li:hover {
	background:#ccc;       /* 背景变为浅灰色 */
	color:#fff;            /* 文字变为白色 */
} 

/* .daxie列表项内的a标签样式：去除默认下划线 */
.daxie li a{
	text-decoration:none;  /* 去除超链接默认的下划线样式 */
}

/* 索引列表.daxieIndex样式：固定宽高，水平居中，顶部外边距15px，清除浮动 */
.daxieIndex{ 
	width:400px;           /* 宽度400像素，与main宽度一致 */
	height:30px;           /* 高度30像素 */
	overflow:hidden;       /* 隐藏溢出内容 */
	margin:0 auto;         /* 左右自动，水平居中 */
	margin-top:15px;       /* 顶部外边距15px，与上方元素分隔 */
	clear:both;            /* 清除左右浮动，防止受上方浮动元素影响布局 */
}

/* .daxieIndex列表项li样式：左浮动横向排列，宽度18.8%，带灰色边框 */
.daxieIndex li{ 
	float:left;            /* 左浮动，实现列表项横向排列 */
	width:18.8%;           /* 百分比宽度，适配响应式（5个列表项近似均分400px宽度） */
	line-height:20px;      /* 行高20px，文本垂直居中 */
	overflow:hidden;       /* 隐藏超出元素宽度的内容 */
	list-style:none;       /* 去除列表默认的项目符号 */
	text-align:center;     /* 文本水平居中 */
	margin-right:2px;      /* 右侧外边距2px，列表项之间保持间距 */
	margin-bottom:10px;    /* 底部外边距10px，预留换行间距 */
	padding:3px 0px;       /* 内边距：上下3px、左右0px */
	border: 1px solid #ccc; /* 1px浅灰色实心边框 */
	border-radius:3px;     /* 3px小圆角 */
}

/* .daxieIndex列表项li:hover：鼠标悬浮样式，浅灰色背景，白色文字 */
.daxieIndex li:hover {
	background:#ccc;       /* 背景变为浅灰色 */
	color:#fff;            /* 文字变为白色 */
} 

/* .daxieIndex列表项内的a标签样式：去除下划线，文字深灰色 */
.daxieIndex li a{
	text-decoration:none;  /* 去除超链接默认的下划线样式 */
	color:#333;            /* 文字颜色为深灰色，提升可读性 */
}

/* 媒体查询：适配屏幕宽度小于等于1280px的设备（响应式布局调整） */
@media (max-width: 1280px) {
 /* 调整main样式：宽度80%自适应，内边距减小 */
 main {
 width: 80%;             /* 宽度改为80%，适配小屏幕 */
 padding: 10px;          /* 内边距减小为10px，节省屏幕空间 */
}
 /* 调整main .item样式：上下内边距减小，紧凑布局 */
 main .item {
 padding: 2px 0;         /* 上下内边距减小为2px，节省空间 */
}
 /* 调整footer样式：上下内边距减小，紧凑布局 */
 footer {
 padding: 10px 0;        /* 上下内边距减小为10px，节省空间 */
}
 /* 调整#randomNumbers样式：内边距减小，紧凑布局 */
 #randomNumbers {
 padding: 2px;           /* 内边距减小为2px，节省空间 */
}
}