测试:修订间差异
来自SOKA CAFE
小 |
小 |
||
| 第16行: | 第16行: | ||
</div> | </div> | ||
</div> | </div> | ||
<html lang="zh-CN"> | <html lang="zh-CN"> | ||
<head> | <head> | ||
| 第29行: | 第37行: | ||
body { | body { | ||
background: | padding: 20px; | ||
background: #f5f5f5; | |||
} | } | ||
.container { | .container { | ||
width: 33.33vw; /* 电脑/平板端占屏幕1/3 */ | |||
max-width: 400px; /* 设置最大宽度限制 */ | |||
width: 33.33vw; /* 电脑/平板端占屏幕1/ | |||
max-width: 400px; /* | |||
min-width: 280px; /* 最小宽度 */ | min-width: 280px; /* 最小宽度 */ | ||
height: auto; | height: auto; | ||
min-height: 120px; | min-height: 120px; /* 最小高度 */ | ||
aspect-ratio: 2.03; /* 保持原有270/133≈2.03的比例 */ | aspect-ratio: 2.03; /* 保持原有270/133≈2.03的比例 */ | ||
margin: | margin: 0; /* 移除auto,实现左对齐 */ | ||
background: | background: #fff; | ||
border-radius: 4px; /* | border-radius: 4px; /* 调整为4px圆角 */ | ||
padding: | padding: 6px; /* 减少内边距以最大化图片显示 */ | ||
box-shadow: | box-shadow: 0 2px 8px rgba(0,0,0,0.1); | ||
float: left; /* 强制左对齐 */ | |||
clear: both; /* 清除浮动影响 */ | |||
} | } | ||
| 第52行: | 第61行: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
border-radius: | border-radius: 2px; /* 内部圆角更小 */ | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| 第62行: | 第70行: | ||
height: 100%; | height: 100%; | ||
transition: transform 0.5s ease; | transition: transform 0.5s ease; | ||
} | } | ||
| 第82行: | 第89行: | ||
object-fit: cover; /* 保持图片比例并填充容器 */ | object-fit: cover; /* 保持图片比例并填充容器 */ | ||
object-position: center; | object-position: center; | ||
} | } | ||
| 第89行: | 第95行: | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
width: | width: 28px; /* 缩小按钮 */ | ||
height: | height: 28px; | ||
background: rgba(0,0,0,0. | background: rgba(0,0,0,0.3); | ||
color: #fff; | color: #fff; | ||
border: none; | border: none; | ||
border-radius: 50%; | border-radius: 50%; | ||
font-size: | font-size: 14px; | ||
cursor: pointer; | cursor: pointer; | ||
z-index: 10; | z-index: 10; | ||
| 第101行: | 第107行: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
transition: background 0.3s; | transition: background 0.3s, opacity 0.3s; | ||
opacity: 0.7; /* 默认半透明 */ | |||
} | } | ||
.carousel-btn:hover { | .carousel-btn:hover { | ||
background: rgba(0,0,0,0.6); | background: rgba(0,0,0,0.6); | ||
opacity: 1; /* 悬停时完全不透明 */ | |||
} | } | ||
.prev-btn { | .prev-btn { | ||
left: | left: 8px; | ||
} | } | ||
.next-btn { | .next-btn { | ||
right: | right: 8px; | ||
} | } | ||
.carousel-indicators { | .carousel-indicators { | ||
position: absolute; | position: absolute; | ||
bottom: | bottom: 8px; | ||
left: 50%; | left: 50%; | ||
transform: translateX(-50%); | transform: translateX(-50%); | ||
display: flex; | display: flex; | ||
gap: | gap: 6px; | ||
} | } | ||
.indicator { | .indicator { | ||
width: | width: 8px; | ||
height: | height: 8px; | ||
border-radius: 50%; | border-radius: 50%; | ||
background: rgba(255,255,255,0.5); | background: rgba(255,255,255,0.5); | ||
| 第137行: | 第145行: | ||
background: #fff; | background: #fff; | ||
transform: scale(1.2); | transform: scale(1.2); | ||
} | |||
/* 大屏设备 - 保持1/3宽度 */ | |||
@media (min-width: 1025px) { | |||
.container { | |||
width: 33.33vw; | |||
max-width: 400px; | |||
margin-left: 20px; /* 左侧留一些空间 */ | |||
} | |||
} | } | ||
/* 平板设备 - 保持1/3宽度 */ | /* 平板设备 - 保持1/3宽度 */ | ||
@media (max-width: 1024px) { | @media (min-width: 769px) and (max-width: 1024px) { | ||
.container { | .container { | ||
width: 33.33vw; | width: 33.33vw; | ||
max-width: 350px; | max-width: 350px; | ||
margin-left: 15px; | |||
} | } | ||
.carousel-btn { | .carousel-btn { | ||
width: | width: 26px; | ||
height: | height: 26px; | ||
font-size: | font-size: 12px; | ||
} | } | ||
} | } | ||
/* 手机设备 - | /* 手机设备 - 恢复到原响应式设计 */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.container { | .container { | ||
width: 92vw; | width: 92vw; | ||
max-width: 500px; | max-width: 500px; | ||
margin: | margin: 0 auto; /* 手机端居中显示 */ | ||
float: none; /* 取消浮动 */ | |||
padding: 8px; | |||
border-radius: 4px; | |||
} | } | ||
.carousel { | .carousel { | ||
border-radius: | border-radius: 2px; | ||
} | } | ||
.carousel-btn { | .carousel-btn { | ||
width: | width: 24px; | ||
height: | height: 24px; | ||
font-size: | font-size: 12px; | ||
opacity: 0. | opacity: 0.8; | ||
} | } | ||
.prev-btn { | .prev-btn { | ||
left: | left: 6px; | ||
} | } | ||
.next-btn { | .next-btn { | ||
right: | right: 6px; | ||
} | } | ||
.carousel-indicators { | .carousel-indicators { | ||
bottom: | bottom: 8px; | ||
} | } | ||
.indicator { | .indicator { | ||
width: | width: 6px; | ||
height: | height: 6px; | ||
} | } | ||
} | } | ||
| 第196行: | 第216行: | ||
width: 94vw; | width: 94vw; | ||
min-width: 260px; | min-width: 260px; | ||
margin: | padding: 6px; | ||
margin: 0 auto; /* 手机端居中显示 */ | |||
} | } | ||
.carousel-btn { | .carousel-btn { | ||
width: | width: 22px; | ||
height: | height: 22px; | ||
font-size: | font-size: 10px; | ||
} | } | ||
.prev-btn { | .prev-btn { | ||
left: | left: 4px; | ||
} | } | ||
.next-btn { | .next-btn { | ||
right: | right: 4px; | ||
} | } | ||
.indicator { | .indicator { | ||
width: | width: 5px; | ||
height: | height: 5px; | ||
} | } | ||
} | } | ||
/* | /* 清除浮动容器 */ | ||
.clearfix::after { | |||
content: ""; | |||
display: table; | |||
clear: both; | |||
} | } | ||
</style> | </style> | ||
| 第331行: | 第352行: | ||
</body> | </body> | ||
</html> | </html> | ||
<br> | |||
< | |||
[[文件:萌新引导.png|330x330px|无框|左|link=森雅晴]] | [[文件:萌新引导.png|330x330px|无框|左|link=森雅晴]] | ||
<div class="mini-block-container mini-block-list"> | <div class="mini-block-container mini-block-list"> | ||
<div class="mini-block"> | <div class="mini-block"> | ||
| 第598行: | 第611行: | ||
</div> | </div> | ||
<div style="margin-top: 25px"></div> | <div style="margin-top: 25px"></div> | ||
[[文件: | [[文件:内容导航.png|330x330px|无框|左|link=元气安]] | ||
<div class="mini-block-container mini-block-list"> | <div class="mini-block-container mini-block-list"> | ||
<div class="mini-block"> | <div class="mini-block"> | ||
| 第636行: | 第649行: | ||
</div> | </div> | ||
<div style="margin-top: 25px"></div> | <div style="margin-top: 25px"></div> | ||
[[文件: | [[文件:猜你想找.png|330x330px|无框|左|link=古贺清]] | ||
<div class="mini-block-container mini-block-list"> | <div class="mini-block-container mini-block-list"> | ||
<div class="mini-block"> | <div class="mini-block"> | ||
2026年1月27日 (二) 17:30的版本
欢迎来到「SOKA CAFE——エア本中文维基」
頭がパーン@wiki:中華エア本支部


Create
💻 创建页面
感谢您对SOKA CAFE的编辑贡献!但也请在过程中务必依照创作协议及版权,遵循CC BY-SA 3.0协议!
准备好了?来尝试创建页面吧!

Notice
⚠️ 入站须知
Soka Cafe一直是一个合作性、公益性的网站,我们致力于营造和谐的社区环境,并热情地欢迎任何人参与我们之间的创作,不论您的信仰、外表、地域.... 为了打造一个和谐的、无骚扰的社区环境,请通读入站须知,了解网站的性质及规则。
Plan
📄 任务计划
Soka Cafe的基本底层已大体完确! 现在的最紧要的人物是登场作品分区的规范及完成度!这对创学新人入坑的帮助极其重要! 没有相关技术不要紧,请使用“可视化编辑器”来进行编辑!如果有任何技术问题请在页面下方获取我们的联系方式!
Website
🛜 友情站点
日本创价学会Wiki
旧创价学会中文维基
亚文化维基
Cookie☆Wiki
新哲学维基
旧哲学维基
潮学维基
中文音MAD维基
OTOMAD Libraries
Aira软件库
HUIJIA FUN - Plurimod学生会官方站点
Contact
📞 联系我们
本站点以八叶莲华会社的名义设立,我们是中华阵营活跃的最大创价学会二创主题团体,欢迎各位对音MAD或AIR本文化感兴趣的各位加入我们团体!
八叶莲华会社QQ群聊:3681760584
八叶莲华会社QQ频道
八叶莲华会社Discord频道
前创价中文维基 群聊:1150098641
创价学会资源QQ群:256770365







