MediaWiki:Common.css:修订间差异
外观
无编辑摘要 标签:手工回退 |
无编辑摘要 标签:已被回退 |
||
第98行: | 第98行: | ||
} | } | ||
} | |||
/* 輪播的樣式 */ | |||
*{ | |||
margin: 0; | |||
padding: 0; | |||
} | |||
li{ | |||
list-style: none; | |||
} | |||
.lunbo{ | |||
width: 100%; | |||
} | |||
.content{ | |||
width: 5500px; | |||
height: 300px; | |||
margin: 20px auto; | |||
position: relative; | |||
} | |||
#item{ | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.item{ | |||
position: absolute; | |||
opacity: 0; | |||
transition: all 1s; | |||
} | |||
.item.active{ | |||
opacity:1; | |||
} | |||
img{ | |||
width: 100%; | |||
} | |||
#btn-left{ | |||
width: 30px; | |||
height: 69px; | |||
font-size: 30px; | |||
color: white; | |||
background-color:rgba(0,0,0,0.4); | |||
line-height: 69px; | |||
padding-left:5px; | |||
z-index: 10;/*始终显示在图片的上层*/ | |||
position: absolute; | |||
left: 0; | |||
top: 50%; | |||
transform: translateY(-60%);/*使按钮向上偏移居中对齐*/ | |||
cursor: pointer; | |||
opacity: 0;/*平时隐藏*/ | |||
} | |||
.lunbo:hover #btn-left{ | |||
/*鼠标滑入,显示图标*/ | |||
opacity: 1; | |||
} | |||
#btn-right{ | |||
width: 26px; | |||
height: 69px; | |||
font-size: 30px; | |||
color: white; | |||
background-color:rgba(0,0,0,0.4); | |||
line-height: 69px; | |||
padding-left: 5px; | |||
z-index: 10; | |||
position: absolute; | |||
right: 0; | |||
top: 50%; | |||
cursor: pointer; | |||
opacity: 0; | |||
transform: translateY(-60%); | |||
} | |||
.lunbo:hover #btn-right{ | |||
opacity: 1; | |||
} | |||
#circle{ | |||
height: 20px; | |||
display: flex; | |||
position: absolute; | |||
bottom: 35px; | |||
right: 25px; | |||
} | |||
.circle{ | |||
width: 10px; | |||
height: 10px; | |||
border-radius: 10px; | |||
border: 2px solid white; | |||
background: rgba(0,0,0,0.4); | |||
cursor: pointer; | |||
margin: 5px; | |||
} | |||
.white{ | |||
background-color: #FFFFFF; | |||
} | } |
2024年3月4日 (一) 23:18的版本
/* 此 CSS 會套用至所有的介面外觀 */
body{
font-family: 微软雅黑;
}
.infobox {
background: #eee;
border: 1px solid #aaa;
float: right;
margin: 0 0 1em 1em;
padding: 1em;
width: 300px;
}
.infobox-title {
font-size: 2em;
text-align: center;
}
.infobox-title p {
margin-top: 2px;
margin-bottom: 2px;
}
.infobox-image {
text-align: center;
}
.infobox th {
text-align: right;
vertical-align: top;
width: 120px;
}
.infobox td {
vertical-align: top;
}
/* 黑幕的代碼? */
.heimu, .heimu a, a .heimu, .heimu a.new {
background-color: #252525;
color: #252525;
text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
color: white !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
color: lightblue !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu {
color: #BA0000 !important;
}
/* 首頁目錄的樣式 */
.index {
display: flex;
}
.index-phone {
display: none;
}
.index-link {
margin:5px;
height:40px;
width:98%;
border-radius: 25px;
background-image: linear-gradient(aqua, #9966FF);
}
.link-content {
transition: 1s;
}
.link-content:hover {
text-shadow: 4px 4px gray;
}
@media screen and (max-width: 900px) {
.fongjing {
display: none;
}
.topic {
display: none;
}
.index-phone {
display: flex;
}
}
/* 輪播的樣式 */
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.lunbo{
width: 100%;
}
.content{
width: 5500px;
height: 300px;
margin: 20px auto;
position: relative;
}
#item{
width: 100%;
height: 100%;
}
.item{
position: absolute;
opacity: 0;
transition: all 1s;
}
.item.active{
opacity:1;
}
img{
width: 100%;
}
#btn-left{
width: 30px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left:5px;
z-index: 10;/*始终显示在图片的上层*/
position: absolute;
left: 0;
top: 50%;
transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
cursor: pointer;
opacity: 0;/*平时隐藏*/
}
.lunbo:hover #btn-left{
/*鼠标滑入,显示图标*/
opacity: 1;
}
#btn-right{
width: 26px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left: 5px;
z-index: 10;
position: absolute;
right: 0;
top: 50%;
cursor: pointer;
opacity: 0;
transform: translateY(-60%);
}
.lunbo:hover #btn-right{
opacity: 1;
}
#circle{
height: 20px;
display: flex;
position: absolute;
bottom: 35px;
right: 25px;
}
.circle{
width: 10px;
height: 10px;
border-radius: 10px;
border: 2px solid white;
background: rgba(0,0,0,0.4);
cursor: pointer;
margin: 5px;
}
.white{
background-color: #FFFFFF;
}