/*移动端小屏幕响应式设计优先 默认 430px以下设备*/
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
overflow: auto;
font-family: "Arial", sans-serif;
}
.leftfix {
float:left;
}
.rightfix {
float:right;
}
/* #region topbar start*/
.topbar .container{
font-size: 12px;
height: 15px;
width: 100%;
display:flex;
justify-content:space-between;
align-items:center;
width: 380px;
padding:0 10px;
background-color: #1f1f1f;
}
.btn {
color:white;
}
.topbar a {
color:grey;
text-decoration:none;
}
/* #endregion end*/
.container {
width:380px;
margin:0 auto;
background-color:transparent ;
}
.header {
}
.logo-box {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
gap: 1px; /* 图片和文字之间的间距，可根据需要调整 */
margin-top: 5px;
}
.logo-box img {
width: 40px; /* 设置合适的宽度 */
height: auto;
}
.logo-box .yihua {
color: white;
font-size: 20px;
margin: 0;
text-shadow: 0 0 5px #393838c2; /* 增加文字阴影，增强对比 */
}
hr {
height: 1px; /* 设置为1像素高 */
border: none; /* 移除默认边框 */
background-color: rgba(255, 255, 255, 0.2); /* 白色半透明，适配深色背景 */
margin: 1px 0; /* 控制上下间距 */
}
.clearfix::after { /*通过这个空的div来消除float 带来对其他div的影响*/
content:"";
display:block;
clear:both;
}
.navbar {
display: flex;
flex-wrap: nowrap; /* 不换行 */
overflow-x: auto; /* 水平滚动 */
white-space: nowrap; /* 防止子项换行 */
scrollbar-width: thin; /* Firefox 滚动条 */
justify-content:center;
background-color:transparent; /* 你的背景色 */
padding: 0px;
align-content:center;
color:#ffffff;
text-shadow: 0 0 5px #fff; /* 增加文字阴影，增强对比 */
}
.navbar::-webkit-scrollbar {
height: 6px;
}
.navbar::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.nav-item {
max-width: 100px; /* 设置最大宽度，避免过宽 */
height: 20px;
text-align: center;
display: flex; /* 在小屏幕上显示为块级元素 */
margin: 2px 5px;
float:left;
}
.navbar a {
text-decoration:none;
font-size: 12px;
color:#ffffff;
text-shadow: 0 0 5px #fff; /* 增加文字阴影，增强对比 */
}
.main {
margin:5px 5px;
width: 180px;
}
.mainright {
margin:5px 5px;
width: 180px;
}
.rightcolumn {
margin-top:20px;
}
.containleft {
width: 185px;
height:200px;
background-image: url('../assets/images/home/1.png'); /* 改成你的路径 */
background-size: cover; /* 图片填满整个盒子 */
background-position: center; /* 图片居中裁切 */
background-repeat: no-repeat;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
margin-right:5px;
margin-left:7px;
}
.textboxleft {
width:185px;
height:50px;
background-color: transparent;
margin-right:5px;
margin-left:7px;
color:white;
text-align:center;
line-height:50px;
}
.containright {
width: 185px;
height:200px;
background-image: url('../assets/images/home/2.png'); /* 改成你的路径 */
background-size: cover; /* 图片填满整个盒子 */
background-position: center; /* 图片居中裁切 */
background-repeat: no-repeat;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.textboxright {
width:185px;
height:50px;
background-color:transparent;
text-align:center;
line-height:50px;
color:white;
}
.progresso-corso {
margin-left:10px;
}
table {
max-height:20px;
border-collapse: collapse; /* 移除单元格间的空隙 */
background-color: transparent;
}
.btn {
text-align:center;
display: block;
margin: 10px 5px;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
position: relative; /* ✅ 添加这个 */
z-index: 10;
color:#ffffff;
text-shadow: 0 0 5px #fff; /* 增加文字阴影，增强对比 */
}
.btn li{
Text-color:WHITE
}
.click-content {
padding: 5px; /* 在手机上调整内边距 */
margin-top: 10px; /* 增加内容与按钮的间距 */
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 增加文字阴影，增强对比 */
font-weight:lighter;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow: auto;
font-family: "Arial", sans-serif;
}
.fieldset {
text-align: ;
font-size: 8px;
background-color:;
color:grey;
cursor:auto;
text-decoration: none; /* 如果使用标签 */
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.8); /* Ombra leggera */
border-radius: 20px;
}
.table {
justify-content:center;
align-items:center;
text-align: center;
font-size: 16px;
background-color: transparent; /* 表格背景颜色 */
color:white;
cursor: auto;
text-decoration: none;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9); /* 阴影 */
border-radius: 10px; /* 圆角边框 */
}
.snowflake {
position: absolute;
will-change: transform; /* 提高性能 */
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 12px; /* 单元格内边距 */
text-align: center; /* 单元格文字居中 */
}
.scatola {
width:410px;
height: 600px;
background-color: box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.8); /* Ombra leggera */
text-align:center;
line-height: 100px;
}
p {
color:black;
margin:0px;
}
.h1 {
margin:-50px;
color:#ffffff;
text-shadow: 0 0 5px #fff; /* 增加文字阴影，增强对比 */
}
.sottotitolo {
color:white;
}
.scatola {
justify-content:center;
}
@media (min-width: 430px) and (max-width:600px) { /*匹配打手机屏幕*/
html, body {
margin: 0;
padding: 0;
overflow: auto; /* 禁止滚动 */
width: 100%;
height: 100%;
position: relative; /* 确保子元素基于父元素定位 */
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
position: relative;
font-family: "Arial", sans-serif;
}
.leftfix {
float:left;
}
.rightfix {
float:right;
}
/* #region start */
.topbar {
background-color: rgb(24, 23, 23);
height:15px;
margin-top:0px;
font-size:10px;
display:none;
}
.topbar a {
color:grey;
}
/* #endregion */
.container {
width:380px;
margin:0 auto;
background-color:transparent ;
}
.header {
}
.logo-box {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
gap: 1px; /* 图片和文字之间的间距，可根据需要调整 */
margin-top: 5px;
}
.logo-box img {
width: 80px; /* 设置合适的宽度 */
height: auto;
}
.logo-box .yihua {
color: white;
font-size: 25px;
margin: 0;
text-shadow: 0 0 5px #393838c2; /* 增加文字阴影，增强对比 */
}
hr {
height: 1px; /* 设置为1像素高 */
border: none; /* 移除默认边框 */
background-color: rgba(255, 255, 255, 0.2); /* 白色半透明，适配深色背景 */
margin: 1px 0; /* 控制上下间距 */
}
.clearfix::after { /*通过这个空的div来消除float 带来对其他div的影响*/
content:"";
display:block;
clear:both;
}
.navbar {
display: flex;
flex-wrap: nowrap; /* 不换行 */
overflow-x: auto; /* 水平滚动 */
white-space: nowrap; /* 防止子项换行 */
scrollbar-width: thin; /* Firefox 滚动条 */
justify-content:center;
background-color:transparent; /* 你的背景色 */
padding: 0px;
align-content:center;
color:#ffffff;
text-shadow: 0 0 5px #fff; /* 增加文字阴影，增强对比 */
}
.navbar::-webkit-scrollbar {
height: 6px;
}
.navbar::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.nav-item {
max-width: 100px; /* 设置最大宽度，避免过宽 */
height: 20px;
text-align: center;
display: flex; /* 在小屏幕上显示为块级元素 */
margin: 2px 5px;
float:left;
}
.navbar a {
text-decoration:none;
font-size: 15px;
color:#ffffff;
text-shadow: 0 0 5px #fff; /* 增加文字阴影，增强对比 */
}
.main {
margin:5px 5px;
width: 180px;
}
.mainright {
margin:5px 5px;
width: 180px;
}
.rightcolumn {
margin-top:20px;
}
.containleft {
width: 212px;
height:250px;
/* background-image: url('../assets/images/home/1.png'); */ /* 改成你的路径 */
background-size: cover; /* 图片填满整个盒子 */
background-position: center; /* 图片居中裁切 */
background-repeat: no-repeat;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
margin-right:5px;
margin-left:0px;
}
.textboxleft {
width:212px;
height:50px;
background-color: transparent;
margin-right:5px;
margin-left:7px;
color:white;
text-align:center;
line-height:50px;
}
.containright {
width: 212px;
height:250px;
background-image: url('../assets/images/home/2.png'); /* 改成你的路径 */
background-size: cover; /* 图片填满整个盒子 */
background-position: center; /* 图片居中裁切 */
background-repeat: no-repeat;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.textboxright {
width:212px;
height:50px;
background-color:transparent;
text-align:center;
line-height:50px;
color:white;
}
table {
max-height:20px;
border-collapse: collapse; /* 移除单元格间的空隙 */
background-color: transparent;
}
.btn {
display: block;
margin: 10px 5px;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
z-index: 10; /* 确保按钮位于最上层 */
}
.click-content {
padding: 5px; /* 在手机上调整内边距 */
margin-top: 10px; /* 增加内容与按钮的间距 */
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 增加文字阴影，增强对比 */
font-weight:lighter;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment:fixed;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow: auto;
font-family: "Arial", sans-serif;
}
.fieldset {
text-align: ;
font-size: 8px;
background-color:;
color:grey;
cursor:auto;
text-decoration: none; /* 如果使用标签 */
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.8); /* Ombra leggera */
border-radius: 20px;
}
.table {
justify-content:center;
align-items:center;
text-align: center;
font-size: 16px;
background-color: transparent; /* 表格背景颜色 */
color:white;
cursor: auto;
text-decoration: none;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9); /* 阴影 */
border-radius: 10px; /* 圆角边框 */
}
.snowflake {
position: absolute;
will-change: transform; /* 提高性能 */
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 12px; /* 单元格内边距 */
text-align: center; /* 单元格文字居中 */
}
.scatola {
width:410px;
height: 600px;
background-color:grey;
text-align:center;
line-height: 100px;
}
p {
color:black;
margin:0px;
}
#grammatica {
color:black;
width: 370px;
height:600px;
}
h1 {
margin:0px;
}
}
@media (min-width: 768px){ /*匹配平板*/
html, body {
margin: 0;
padding: 0;
overflow: hidden; /* 禁止滚动 */
width: 100%;
height: 100%;
position: relative; /* 确保子元素基于父元素定位 */
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
position: relative;
font-family: "Arial", sans-serif;
}
.leftfix {
float:left;
}
.rightfix {
float:right;
}
/* #region start */
.topbar {
background-color: rgb(24, 23, 23);
height:15px;
margin-top:0px;
font-size:10px;
display:none;
}
.topbar a {
color:grey;
}
/* #endregion */
.container {
width:380px;
margin:0 auto;
background-color:transparent ;
}
.header {
}
.logo-box {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
gap: 1px; /* 图片和文字之间的间距，可根据需要调整 */
margin-top: 5px;
}
.logo-box img {
width: 40px; /* 设置合适的宽度 */
height: auto;
}
.logo-box .yihua {
color: white;
font-size: 20px;
margin: 0;
text-shadow: 0 0 5px #393838c2; /* 增加文字阴影，增强对比 */
}
hr {
height: 1px; /* 设置为1像素高 */
border: none; /* 移除默认边框 */
background-color: rgba(255, 255, 255, 0.2); /* 白色半透明，适配深色背景 */
margin: 1px 0; /* 控制上下间距 */
}
.clearfix::after { /*通过这个空的div来消除float 带来对其他div的影响*/
content:"";
display:block;
clear:both;
}
.navbar {
display: flex;
flex-wrap: nowrap; /* 不换行 */
overflow-x: auto; /* 水平滚动 */
white-space: nowrap; /* 防止子项换行 */
scrollbar-width: thin; /* Firefox 滚动条 */
justify-content:center;
background-color:transparent; /* 你的背景色 */
padding: 0px;
align-content:center;
color:#ffffff;
text-shadow: 0 0 5px #fff; /* 增加文字阴影，增强对比 */
}
.navbar::-webkit-scrollbar {
height: 6px;
}
.navbar::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.nav-item {
max-width: 100px; /* 设置最大宽度，避免过宽 */
height: 20px;
text-align: center;
display: flex; /* 在小屏幕上显示为块级元素 */
margin: 2px 5px;
float:left;
}
.navbar a {
text-decoration:none;
font-size: 12px;
color:#ffffff;
text-shadow: 0 0 5px #fff; /* 增加文字阴影，增强对比 */
}
.main {
margin:5px 5px;
width: 180px;
}
.mainright {
margin:5px 5px;
width: 180px;
}
.rightcolumn {
margin-top:20px;
}
.containleft {
width: 220px;
height:250px;
background-image: url('../assets/images/home/1.png'); /* 改成你的路径 */
background-size: cover; /* 图片填满整个盒子 */
background-position: center; /* 图片居中裁切 */
background-repeat: no-repeat;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
margin-right:5px;
margin-left:7px;
}
.textboxleft {
width:220px;
height:50px;
background-color: transparent;
margin-right:5px;
margin-left:7px;
color:white;
text-align:center;
line-height:50px;
}
.containright {
width: 220px;
height:250px;
background-image: url('../assets/images/home/2.png'); /* 改成你的路径 */
background-size: cover; /* 图片填满整个盒子 */
background-position: center; /* 图片居中裁切 */
background-repeat: no-repeat;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.textboxright {
width:220px;
height:50px;
background-color:transparent;
text-align:center;
line-height:50px;
color:white;
}
.table {
display:flex;
justify-content:center;
align-items:center;
width: 100%; /* 表格宽度占满屏幕 */
height: 100vh;
text-align: center;
font-size: 20px;
background-color: transparent; /* 表格背景颜色 */
color: black;
cursor: auto;
text-decoration: none;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9); /* 阴影 */
border-radius: 10px; /* 圆角边框 */
padding: 10px; /* 内边距 */
}
table caption {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
.log {
text-align: center;
font-size: 16px;
background-color: #f8f8f8; /* 表格背景颜色 */
color: black;
cursor: auto;
text-decoration: none;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9); /* 阴影 */
border-radius: 10px; /* 圆角边框 */
padding: 10px; /* 内边距 */}
.prova {
font:border 100px "Arial" ;
}
.libreria {
display:flex;
flex-wrap:wrap;
text-align:center;
background-color: white; /* 按钮颜色 */
box-shadow: 0px 4px 6px rgba(217, 218, 220, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
font-size: 30px;
line-height: 1;
height:1;
gap: 10px;
}
.shu a{
color:black;
}
.shu {
text-align:center;
}
.botton {
display:block;
justify-content: center;
box-shadow: 0px 4px 6px rgba(0, 51, 102, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
}
button {
border: none; /* 去掉默认边框 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 字体加粗 */
border-radius: 8px; /* 圆角 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* 背部阴影 */
cursor: pointer; /* 鼠标悬停显示指针 */
transition: all 0.3s ease; /* 动画过渡效果 */
margin: 115px px; /* 上下增加外边距 */
vertical-align:baseline;
}
button:hover {
background-color: violet; /* 悬停时更深的蓝色 */
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* 加强阴影 */
transform: translateY(-2px); /* 悬停时按钮微微上移 */
}
button:active {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); /* 减弱阴影 */
transform: translateY(0); /* 恢复位置 */
}
.book-list-item {
}
footer a{
text-align:center;
color:white;
}
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使用视窗高度来使容器充满整个屏幕 */
perspective: 1000px; /* 设置透视 */
}
.content {
background-color:transparent;
}
.nav-item {
padding:10px;
}
.nav-item a {
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 增加文字阴影，增强对比 */
}
.dropdown-content {
display: none; /* 默认不显示 */
position: absolute; /* 绝对定位 */
background-color:transparent;
min-width: 160px; /* 下拉菜单的最小宽度 */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.nav-item:hover .dropdown-content {
display: block; /* 鼠标悬停时显示 */
background-color:transparent ;
}
@keyframes snow {
0% {transform: translateY(0); opacity: 0.8;}
100% {transform: translateY(500px); opacity: 0;} /* 根据需要调整垂直平移的距离 */
}
/*上面是设置下雪背景代码*/
.navbar a {
padding: 14; /* 增大按钮大小 */
font-size: 25px; /* 调整字体大小 这里这里这里可以调整菜单栏上面的图案字母大小*/
text-align: center;
flex-direction: column;
align-items: center; /* 水平居中对齐 */
justify-content: space-evenly; /* 垂直居中对齐 */
}
.container {
background-color:transparent;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(241, 235, 241, 0.476);
max-width: 100%; /* 或其他合适的最大宽度，例如 800px */
overflow-x: auto; /* 隐藏可能的水平滚动条 */
box-sizing: border-box;
justify-content:center;
}
p, ul {
margin-bottom: 20px;
}
ul {
list-style-type: none;
padding-left: 0;
}
ul li {
padding: 5px 0;
font-size: 18px;
border-bottom: 1px dotted #333333;
}
ul li:last-child {
border-bottom: none;
}
strong {
color: #f4f4f4;
}
.hover-content {
display: none;
position: absolute;
/* 其他样式，如背景色、边框等 */
}
.click-content {
display: none;
position:relative;
margin-top: 10px;
padding: 10px;
background-color:transparent;
color:white;
}
.btn, .click-content {
margin-top:50px;
display: block;
padding: 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
position: relative;
z-index: 10; /* 确保高于雪花 */
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 增加文字阴影，增强对比 */
}
.btn:hover {
background-color: transparent;
transition: all 0.3s ease-in-out;
}
.hover-item:hover .hover-content {
display: block;
}
/*下面是设置下雪背景代码*/
a:link {
text-decoration: none;
color:black;
}
a:hover{
background-color:transparent;
text-decoration:none;
color:black;
}
a:active{
color:violet;
}
.login:{
color:green;
}
#snowCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 400px; /* 设置 Canvas 高度为 200px */
z-index: 0; /* 置于背景层 */
pointer-events: none; /* 让 Canvas 不拦截鼠标或触摸事件 */
}
fieldset {
text-align: ;
font-size: 15px;
background-color:;
color:black;
cursor:auto;
text-decoration: none; /* 如果使用标签 */
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.8); /* Ombra leggera */
border-radius: 20px;
}
.table {
display:flex;
justify-content:center;
align-items:center;
width: 100%; /* 表格宽度占满屏幕 */
height: 100vh;
text-align: center;
font-size: 20px;
background-color: transparent; /* 表格背景颜色 */
cursor: auto;
text-decoration: none;
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 增加文字阴影，增强对比 */
padding: 10px; /* 内边距 */
}
table caption {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
.prova {
font:border 100px "Arial" ;
}
.libreria {
display:flex;
flex-wrap:wrap;
text-align:center;
background-color: white; /* 按钮颜色 */
box-shadow: 0px 4px 6px rgba(0, 51, 102, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
font-size: 30px;
line-height: 1;
height:1;
gap: 10px;
}
.shu a{
color:black;
}
.shu {
text-align:center;
}
.botton {
display:block;
justify-content: center;
box-shadow: 0px 4px 6px rgba(0, 51, 102, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
}
button {
border: none; /* 去掉默认边框 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 字体加粗 */
border-radius: 8px; /* 圆角 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* 背部阴影 */
cursor: pointer; /* 鼠标悬停显示指针 */
transition: all 0.3s ease; /* 动画过渡效果 */
margin: 115px px; /* 上下增加外边距 */
vertical-align:baseline;
}
button:hover {
background-color: violet; /* 悬停时更深的蓝色 */
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* 加强阴影 */
transform: translateY(-2px); /* 悬停时按钮微微上移 */
}
button:active {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); /* 减弱阴影 */
transform: translateY(0); /* 恢复位置 */
}
.book-list-item {
}
footer a{
text-align:center;
color:white;
}
#snowCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 400px; /* 设置 Canvas 高度为 200px */
z-index: 0; /* 置于背景层 */
pointer-events: none; /* 让 Canvas 不拦截鼠标或触摸事件 */
}
fieldset {
text-align: ;
font-size: 15px;
background-color:;
color:black;
cursor:auto;
text-decoration: none; /* 如果使用标签 */
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.8); /* Ombra leggera */
border-radius: 20px;
}
table caption {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
.prova {
font:border 100px "Arial" ;
}
.libreria {
display:flex;
flex-wrap:wrap;
text-align:center;
background-color: white; /* 按钮颜色 */
box-shadow: 0px 4px 6px rgba(0, 51, 102, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
font-size: 30px;
line-height: 1;
height:1;
gap: 10px;
}
.shu a{
color:black;
}
.shu {
text-align:center;
}
.botton {
display:block;
justify-content: center;
box-shadow: 0px 4px 6px rgba(0, 51, 102, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
}
button {
color: transparent; /* 文字颜色 */
border: none; /* 去掉默认边框 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 字体加粗 */
border-radius: 8px; /* 圆角 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* 背部阴影 */
cursor: pointer; /* 鼠标悬停显示指针 */
transition: all 0.3s ease; /* 动画过渡效果 */
margin: 115px px; /* 上下增加外边距 */
vertical-align:baseline;
}
button:hover {
background-color: violet; /* 悬停时更深的蓝色 */
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* 加强阴影 */
transform: translateY(-2px); /* 悬停时按钮微微上移 */
}
button:active {
background-color: black; /* 点击时更深的颜色 */
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); /* 减弱阴影 */
transform: translateY(0); /* 恢复位置 */
}
.book-list-item {
}
footer a{
text-align:center;
color: transparent;
}
canvas {
position:absolute;
top: 0;
left: 0;
z-index: 0; /* 让雪花位于背景 */
}
.navbar {
display:flex;
flex-wrap:wrap;
justify-content:center;
background-color:transparent; /* 保留背景颜色 */ /* 你的背景色 */
align-content:center;
font-size: 50px;
}
.snowflake {
position: absolute;
will-change: transform; /* 提高性能 */
}
.container {
padding: 10px 16px;
background-color:transparent;
}
table {
max-height:20px;
border-collapse: collapse; /* 移除单元格间的空隙 */
background-color:transparent;
}
.btn {
display: block;
margin-top:65px;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
z-index: 10; /* 确保按钮位于最上层 */
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 增加文字阴影，增强对比 */
}
.click-content {
padding: 5px; /* 在手机上调整内边距 */
margin-top: 10px; /* 增加内容与按钮的间距 */
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 增加文字阴影，增强对比 */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment:fixed;
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
overflow: auto;
font-family: "Arial", sans-serif;
}
.navbar {
display:flex;
flex-wrap:wrap;
justify-content:center;
background-color:transparent; /* 你的背景色 */
padding: 12px 20px;
height:40px;
align-content:center;
color:white;
font-size: 13x;
}
.nav-item {
max-width: 100px; /* 设置最大宽度，避免过宽 */
height: 20px;
text-align: center;
display: flex; /* 在小屏幕上显示为块级元素 */
/* Ombra leggera */
flex-wrap:wrap;
padding: 5px 15px;
}
.navbar a {
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 增加文字阴影，增强对比 */
}
.fieldset {
text-align: ;
font-size: 8px;
background-color:;
color:grey;
cursor:auto;
text-decoration: none; /* 如果使用标签 */
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.8); /* Ombra leggera */
border-radius: 20px;
}
.table {
justify-content:center;
align-items:center;
text-align: center;
font-size: 16px;
background-color: transparent; /* 表格背景颜色 */
color: black;
cursor: auto;
text-decoration: none;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9); /* 阴影 */
border-radius: 10px; /* 圆角边框 */
}
.snowflake {
position: absolute;
will-change: transform; /* 提高性能 */
}
.snowflake {
position: absolute;
will-change: transform; /* 提高性能 */
}
th, td {
border: 1px solid #ddd; /* 单元格边框 */
padding: 12px; /* 单元格内边距 */
text-align: center; /* 单元格文字居中 */
}
}
/*上面是手机大屏幕代码*/
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body {
background-image: url("../assets/images/home/phone/blackwallpaper.png");
}
}
@media (min-width: 1024px){ /*匹配桌面端*/
.snowflake {
position: absolute;
will-change: transform; /* 提高性能 */
pointer-events:none; /*让雪花不拦截鼠标事件*/
z-index:9999;
}
html, body {
margin: 0;
padding: 0;
overflow: hidden; /* 禁止滚动 */
width: 100%;
height: 100%;
position: relative; /* 确保子元素基于父元素定位 */
}
.leftfix {
float:left;
}
.rightfix {
float:right;
}
/* #region start */
.topbar {
background-color: rgb(24, 23, 23);
height:15px;
margin-top:0px;
font-size:10px;
display:none;
}
.btn {
color:white;
}
.topbar a {
color:grey;
}
/* #endregion */
.container {
width:380px;
margin:0 auto;
background-color:transparent ;
}
.header {
}
.logo-box {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
gap: 1px; /* 图片和文字之间的间距，可根据需要调整 */
margin-top: 5px;
}
.logo-box img {
width: 40px; /* 设置合适的宽度 */
height: auto;
}
.logo-box .yihua {
color: white;
font-size: 20px;
margin: 0;
text-shadow: 0 0 5px #393838c2; /* 增加文字阴影，增强对比 */
}
hr {
height: 1px; /* 设置为1像素高 */
border: none; /* 移除默认边框 */
background-color: rgba(255, 255, 255, 0.2); /* 白色半透明，适配深色背景 */
margin: 1px 0; /* 控制上下间距 */
}
.clearfix::after { /*通过这个空的div来消除float 带来对其他div的影响*/
content:"";
display:block;
clear:both;
}
.navbar {
display: flex;
flex-wrap: nowrap; /* 不换行 */
overflow-x: auto; /* 水平滚动 */
white-space: nowrap; /* 防止子项换行 */
scrollbar-width: thin; /* Firefox 滚动条 */
justify-content:center;
background-color:transparent; /* 你的背景色 */
padding: 0px;
align-content:center;
color:#ffffff;
text-shadow: 0 0 5px #fff; /* 增加文字阴影，增强对比 */
}
.navbar::-webkit-scrollbar {
height: 6px;
}
.navbar::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 3px;
}
.nav-item {
max-width: 100px; /* 设置最大宽度，避免过宽 */
height: 20px;
text-align: center;
display: flex; /* 在小屏幕上显示为块级元素 */
margin: 2px 5px;
float:left;
}
.nav-item a {
color:white;
}
.main {
margin:5px 5px;
width: 180px;
}
.mainright {
margin:5px 5px;
width: 180px;
}
.rightcolumn {
margin-top:20px;
}
.containleft {
width: 185px;
height:200px;
background-image: url('../assets/images/home/1.png'); /* 改成你的路径 */
background-size: cover; /* 图片填满整个盒子 */
background-position: center; /* 图片居中裁切 */
background-repeat: no-repeat;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
margin-right:5px;
margin-left:7px;
}
.textboxleft {
width:185px;
height:50px;
background-color: transparent;
margin-right:5px;
margin-left:7px;
color:white;
text-align:center;
line-height:50px;
}
.containright {
width: 185px;
height:200px;
background-image: url('../assets/images/home/2.png'); /* 改成你的路径 */
background-size: cover; /* 图片填满整个盒子 */
background-position: center; /* 图片居中裁切 */
background-repeat: no-repeat;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
margin-left:10px;
}
.textboxright {
width:185px;
height:50px;
background-color:transparent;
text-align:center;
line-height:50px;
color:white;
}
table {
max-height:20px;
border-collapse: collapse; /* 移除单元格间的空隙 */
background-color: transparent;
}
.btn {
text-align:center;
display: block;
margin: 10px 5px;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
position: relative; /* ✅ 添加这个 */
z-index: 10;
color:#ffffff;
text-shadow: 0 0 5px #fff; /* 增加文字阴影，增强对比 */
}
.btn li{
Text-color:WHITE
}
@keyframes snow {
0% {transform: translateY(0); opacity: 0.8;}
100% {transform: translateY(500px); opacity: 0;} /* 根据需要调整垂直平移的距离 */
}
.container {
background-color:white;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
max-width: 100%; /* 或其他合适的最大宽度，例如 800px */
overflow-x: auto; /* 隐藏可能的水平滚动条 */
box-sizing: border-box;
justify-content:center;
}
p, ul {
margin-bottom: 20px;
}
ul {
list-style-type: none;
padding-left: 0;
}
ul li {
padding: 5px 0;
font-size: 18px;
border-bottom: 1px dotted #333333;
}
ul li:last-child {
border-bottom: none;
}
strong {
color: #f4f4f4;
}
.hover-content {
display: none;
position: absolute;
/* 其他样式，如背景色、边框等 */
}
.hover-item:hover .hover-content {
display: block;
}
/*下面是设置下雪背景代码*/
a:link {
text-decoration: none;
color:black;
}
a:hover{
background-color:transparent;
text-decoration:none;
color:black;
}
a:active{
color:violet;
}
.login:{
color:green;
}
#menu-bar {
position: fixed;
top: 0;
width: 100%;
color: black;
z-index: 1000;
padding: 10px 0;
text-align: center;
}
#menu-bar nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
#menu-bar nav ul li {
margin: 0 15px;
}
#menu-bar nav ul li a:hover {
}
#content {
margin-top: 60px; /* 留出空间给固定的菜单栏 */
padding: 20px;
}
#snowCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 400px; /* 设置 Canvas 高度为 200px */
z-index: 0; /* 置于背景层 */
pointer-events: none; /* 让 Canvas 不拦截鼠标或触摸事件 */
}
fieldset {
text-align: ;
font-size: 15px;
background-color:;
color:black;
cursor:auto;
text-decoration: none; /* 如果使用标签 */
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.8); /* Ombra leggera */
border-radius: 20px;
}
.table {
display:flex;
justify-content:center;
align-items:center;
width: 100%; /* 表格宽度占满屏幕 */
height: 100vh;
text-align: center;
font-size: 20px;
background-color: transparent; /* 表格背景颜色 */
color: black;
cursor: auto;
text-decoration: none;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9); /* 阴影 */
border-radius: 10px; /* 圆角边框 */
padding: 10px; /* 内边距 */
}
table caption {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
.log {
text-align: center;
font-size: 16px;
background-color: #f8f8f8; /* 表格背景颜色 */
color: black;
cursor: auto;
text-decoration: none;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9); /* 阴影 */
border-radius: 10px; /* 圆角边框 */
padding: 10px; /* 内边距 */}
.libreria {
display:flex;
flex-wrap:wrap;
text-align:center;
background-color: white; /* 按钮颜色 */
box-shadow: 0px 4px 6px rgba(217, 218, 220, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
font-size: 30px;
line-height: 1;
height:1;
gap: 10px;
}
.shu a{
color:black;
}
.shu {
text-align:center;
}
.botton {
display:block;
justify-content: center;
box-shadow: 0px 4px 6px rgba(0, 51, 102, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
}
button {
border: none; /* 去掉默认边框 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 字体加粗 */
border-radius: 8px; /* 圆角 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* 背部阴影 */
cursor: pointer; /* 鼠标悬停显示指针 */
transition: all 0.3s ease; /* 动画过渡效果 */
margin: 115px px; /* 上下增加外边距 */
vertical-align:baseline;
}
button:hover {
background-color: violet; /* 悬停时更深的蓝色 */
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* 加强阴影 */
transform: translateY(-2px); /* 悬停时按钮微微上移 */
}
button:active {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); /* 减弱阴影 */
transform: translateY(0); /* 恢复位置 */
}
.book-list-item {
}
footer a{
text-align:center;
color:white;
}
#menu-bar {
position: fixed;
top: 0;
width: 100%;
color: black;
z-index: 1000;
padding: 10px 0;
text-align: center;
}
#menu-bar nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
#menu-bar nav ul li {
margin: 0 15px;
}
#menu-bar nav ul li a:hover {
}
#content {
margin-top: 60px; /* 留出空间给固定的菜单栏 */
padding: 20px;
}
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 使用视窗高度来使容器充满整个屏幕 */
perspective: 1000px; /* 设置透视 */
}
.content {
background-color:transparent;
}
.nav-item {
padding:10px;
}
.dropdown-content {
display: none; /* 默认不显示 */
position: absolute; /* 绝对定位 */
background-color:transparent;
min-width: 160px; /* 下拉菜单的最小宽度 */
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.nav-item:hover .dropdown-content {
display: block; /* 鼠标悬停时显示 */
background-color:transparent ;
}
@keyframes snow {
0% {transform: translateY(0); opacity: 0.8;}
100% {transform: translateY(500px); opacity: 0;} /* 根据需要调整垂直平移的距离 */
}
/*上面是设置下雪背景代码*/
.container {
background-color:transparent;
padding: 10px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(241, 235, 241, 0.476);
max-width: 100%; /* 或其他合适的最大宽度，例如 800px */
overflow-x: auto; /* 隐藏可能的水平滚动条 */
box-sizing: border-box;
justify-content:center;
}
p, ul {
margin-bottom: 20px;
}
ul {
list-style-type: none;
padding-left: 0;
}
ul li {
padding: 5px 0;
font-size: 18px;
border-bottom: 1px dotted #333333;
}
ul li:last-child {
border-bottom: none;
}
strong {
color: #f4f4f4;
}
.hover-content {
display: none;
position: absolute;
/* 其他样式，如背景色、边框等 */
}
.click-content {
display: none;
position:relative;
margin-top: 10px;
padding: 10px;
background-color:transparent;
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 增加文字阴影，增强对比 */
}
.btn, .click-content {
margin-top:50px;
display: block;
padding: 10px;
font-size: 20px;
text-align: center;
cursor: pointer;
position: relative;
z-index: 10; /* 确保高于雪花 */
color:white;
}
.btn:hover {
background-color: transparent;
transition: all 0.3s ease-in-out;
}
.hover-item:hover .hover-content {
display: block;
}
/*下面是设置下雪背景代码*/
a:link {
text-decoration: none;
color:black;
}
a:hover{
background-color:transparent;
text-decoration:none;
color:black;
}
a:active{
color:violet;
}
.login:{
color:green;
}
#menu-bar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
color: black;
z-index: 1000;
padding: 10px 0;
text-align: center;
}
#menu-bar nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
#menu-bar nav ul li {
margin: 0 15px;
}
#content {
margin-top: 60px; /* 留出空间给固定的菜单栏 */
padding: 20px;
}
#snowCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 400px; /* 设置 Canvas 高度为 200px */
z-index: 0; /* 置于背景层 */
pointer-events: none; /* 让 Canvas 不拦截鼠标或触摸事件 */
}
fieldset {
text-align: ;
font-size: 15px;
background-color:;
color:black;
cursor:auto;
text-decoration: none; /* 如果使用标签 */
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.8); /* Ombra leggera */
border-radius: 20px;
}
.table {
display:flex;
justify-content:center;
align-items:center;
width: 100%; /* 表格宽度占满屏幕 */
height: 100vh;
text-align: center;
font-size: 20px;
background-color: transparent; /* 表格背景颜色 */
cursor: auto;
text-decoration: none;
color:white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* 增加文字阴影，增强对比 */
padding: 10px; /* 内边距 */
}
table caption {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
.log {
text-align: center;
font-size: 16px;
background-color: #f8f8f8; /* 表格背景颜色 */
color: black;
cursor: auto;
text-decoration: none;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9); /* 阴影 */
border-radius: 10px; /* 圆角边框 */
padding: 10px; /* 内边距 */}
.libreria {
display:flex;
flex-wrap:wrap;
text-align:center;
background-color: white; /* 按钮颜色 */
box-shadow: 0px 4px 6px rgba(0, 51, 102, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
font-size: 30px;
line-height: 1;
height:1;
gap: 10px;
}
.shu a{
color:black;
}
.shu {
text-align:center;
}
.botton {
display:block;
justify-content: center;
box-shadow: 0px 4px 6px rgba(0, 51, 102, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
}
button {
border: none; /* 去掉默认边框 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 字体加粗 */
border-radius: 8px; /* 圆角 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* 背部阴影 */
cursor: pointer; /* 鼠标悬停显示指针 */
transition: all 0.3s ease; /* 动画过渡效果 */
margin: 115px px; /* 上下增加外边距 */
vertical-align:baseline;
}
button:hover {
background-color: violet; /* 悬停时更深的蓝色 */
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* 加强阴影 */
transform: translateY(-2px); /* 悬停时按钮微微上移 */
}
button:active {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); /* 减弱阴影 */
transform: translateY(0); /* 恢复位置 */
}
.book-list-item {
}
footer a{
text-align:center;
color:white;
}
#snowCanvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 400px; /* 设置 Canvas 高度为 200px */
z-index: 0; /* 置于背景层 */
pointer-events: none; /* 让 Canvas 不拦截鼠标或触摸事件 */
}
fieldset {
text-align: ;
font-size: 15px;
background-color:;
color:black;
cursor:auto;
text-decoration: none; /* 如果使用标签 */
box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.8); /* Ombra leggera */
border-radius: 20px;
}
table caption {
font-size: 20px;
margin-bottom: 10px;
font-weight: bold;
}
.log {
text-align: center;
font-size: 16px;
background-color: #f8f8f8; /* 表格背景颜色 */
color: black;
cursor: auto;
text-decoration: none;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.9); /* 阴影 */
border-radius: 10px; /* 圆角边框 */
padding: 10px; /* 内边距 */}
.libreria {
display:flex;
flex-wrap:wrap;
text-align:center;
background-color: white; /* 按钮颜色 */
box-shadow: 0px 4px 6px rgba(0, 51, 102, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
font-size: 30px;
line-height: 1;
height:1;
gap: 10px;
}
.shu a{
color:black;
}
.shu {
text-align:center;
}
.botton {
display:block;
justify-content: center;
box-shadow: 0px 4px 6px rgba(0, 51, 102, 0.4); /* 深蓝色阴影 */
box-sizing: border-box;
}
button {
color: transparent; /* 文字颜色 */
border: none; /* 去掉默认边框 */
font-size: 16px; /* 字体大小 */
font-weight: bold; /* 字体加粗 */
border-radius: 8px; /* 圆角 */
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* 背部阴影 */
cursor: pointer; /* 鼠标悬停显示指针 */
transition: all 0.3s ease; /* 动画过渡效果 */
margin: 115px px; /* 上下增加外边距 */
vertical-align:baseline;
}
button:hover {
background-color: violet; /* 悬停时更深的蓝色 */
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3); /* 加强阴影 */
transform: translateY(-2px); /* 悬停时按钮微微上移 */
}
button:active {
background-color: black; /* 点击时更深的颜色 */
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2); /* 减弱阴影 */
transform: translateY(0); /* 恢复位置 */
}
.book-list-item {
}
footer a{
text-align:center;
color: transparent;
}
body {
background-image: url("../assets/images/home/galassia.png");
background-size: cover;
background-color:transparent;
font-weight:bold;
margin: 0;
padding: 0;
position: relative;
overflow:hidden; /* 自动显示滚动条 */
padding-top: 60px; /* 增加值以适应移动视图的导航栏高度 */
padding-bottom: 60px;
font-family: "Arial", sans-serif;
}
canvas {
position:absolute;
top: 0;
left: 0;
z-index: 0; /* 让雪花位于背景 */
}
.navbar {
display:flex;
flex-wrap:wrap;
justify-content:center;
background-color:transparent; /* 保留背景颜色 *//* 你的背景色 */
align-content:center;
font-size: 50px;
}
.contain-italiano {
margin-top:20px;
width:1555px;
background-color: white;
}
.contain-italiano .slider-wrapper{
display:flex;
justify-content:space-around;
}
.snowflake {
position: absolute;
will-change: transform; /* 提高性能 */
}
}