CSS版面配置：修訂版本之間的差異
出自六年制學程
| （未顯示同用戶所作出之25次版本） | |||
| 第 1 行： | 第 1 行： | ||
| − | [[分類: | + | [[分類:CSS]]<pre> |
{{#css: | {{#css: | ||
.toc { | .toc { | ||
| 第 9 行： | 第 9 行： | ||
width: 100%; | width: 100%; | ||
margin: auto; | margin: auto; | ||
| + | border:0; | ||
} | } | ||
.toc li { | .toc li { | ||
| 第 14 行： | 第 15 行： | ||
margin-bottom: .5em; | margin-bottom: .5em; | ||
} | } | ||
| − | .toc li a { | + | .toc li a.external { |
display: block; | display: block; | ||
text-align: center; | text-align: center; | ||
padding: .5em; | padding: .5em; | ||
color: #fff; | color: #fff; | ||
| + | /* background-image:url('/wiki1231/skins/vector/images/dot.gif'); 所有對圖的改變都導致整體設定失效 */ | ||
background-color: #D64078; | background-color: #D64078; | ||
border: solid #B03060 1px; | border: solid #B03060 1px; | ||
| 第 31 行： | 第 33 行： | ||
} | } | ||
.toc li a:link {color: #fff;} | .toc li a:link {color: #fff;} | ||
| − | .toc li a:visited {color: #fff;} /* | + | .toc li a:visited.external {color: #fff;} /* 須蓋過 .external 的顏色設定 */ |
.toc li a:hover { | .toc li a:hover { | ||
color: #fff; | color: #fff; | ||
| 第 57 行： | 第 59 行： | ||
} | } | ||
} | } | ||
| − | }} | + | }}</pre> |
<table width='500px'><tr><th width=50%> | <table width='500px'><tr><th width=50%> | ||
<ul class='toc'><ul> | <ul class='toc'><ul> | ||
| 第 83 行： | 第 85 行： | ||
</ul></ul> | </ul></ul> | ||
</th></tr></table> | </th></tr></table> | ||
| + | ==研究== | ||
| + | 上方的[http://jendo.org/wiki1231/docs/CSS版面配置.html 目錄原檔] | ||
| + | ===CSS background-image 基本語法=== | ||
| + | <pre>background-image: url('圖片網址');</pre> | ||
| + | url 小括號內有三種可以使用的參數，分別為 | ||
| + | #none(預設值，不顯示圖片) | ||
| + | #inherit(繼承自父層) | ||
| + | #圖片網址。 | ||
| + | |||
| + | ===MediaWiki 的 CSS 布署=== | ||
| + | 主要的基本樣式在 /skins/monobook/main.css 當中，如 | ||
| + | <pre>a.external { | ||
| + | …… | ||
| + | }</pre> | ||
| + | 規範了一系列「外部連結」的表現方式。 | ||
| + | |||
| + | 而不同的布景會再補充，如 /skins/vector/components/externalLinks.less 中： | ||
| + | <pre>@import "mediawiki.mixins.less"; | ||
| + | // External links | ||
| + | #content { | ||
| + | .external { | ||
| + | background-position: center right; | ||
| + | background-repeat: no-repeat; | ||
| + | .background-image-svg('images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png'); | ||
| + | padding-right: 13px; | ||
| + | } | ||
| + | }</pre> | ||
| + | 而 /skins/common/ 之下的 shared.css 和 commonPrint.css 也都會在不同應用脈絡下對外部連結再作補充，而且還下了 !important (優先適用) 的指示。 | ||
2024年7月7日 (日) 16:40的最新修訂版本
{{#css:
.toc {
line-height: 1.5em;
padding-left: 0;
}
.toc ul {
padding: 0;
width: 100%;
margin: auto;
border:0;
}
.toc li {
list-style-type:none;
margin-bottom: .5em;
}
.toc li a.external {
display: block;
text-align: center;
padding: .5em;
color: #fff;
/* background-image:url('/wiki1231/skins/vector/images/dot.gif'); 所有對圖的改變都導致整體設定失效 */
background-color: #D64078;
border: solid #B03060 1px;
border-bottom: solid #B03060 4px;
/* text-shadow: 0px 2px 0 #B03060; */
border-radius: .3em;
position: relative;
-webkit-transition: all 0.1s ease-out; /* Safari 3.2+, Chrome */
-moz-transition: all 0.1s ease-out; /* Firefox 4-15 */
-o-transition: all 0.1s ease-out; /* Opera 10.5–12.00 */
transition: all 0.1s ease-out; /* Firefox 16+, Opera 12.50+ */
}
.toc li a:link {color: #fff;}
.toc li a:visited.external {color: #fff;} /* 須蓋過 .external 的顏色設定 */
.toc li a:hover {
color: #fff;
text-decoration: none;
background-color: #c63b6f;
}
.toc li a:active {
color: #fff;
border-bottom: solid #b03060 1px;
top: 4px;
-webkit-transition: all 0 ease-out; /* Safari 3.2+, Chrome */
-moz-transition: all 0 ease-out; /* Firefox 4-15 */
-o-transition: all 0 ease-out; /* Opera 10.5–12.00 */
transition: all 0 ease-out; /* Firefox 16+, Opera 12.50+ */
}
@media screen and (min-width:601px) {
.toc {
-moz-column-count: 2;
-moz-column-gap: 1em;
-webkit-column-count: 2;
-webkit-column-gap: 1em;
column-count: 2;
column-gap: 1em;
line-height: 1.2em;
}
}
}}
研究
上方的目錄原檔
CSS background-image 基本語法
background-image: url('圖片網址');
url 小括號內有三種可以使用的參數，分別為
- none(預設值，不顯示圖片)
- inherit(繼承自父層)
- 圖片網址。
MediaWiki 的 CSS 布署
主要的基本樣式在 /skins/monobook/main.css 當中，如
a.external {
……
}
規範了一系列「外部連結」的表現方式。
而不同的布景會再補充，如 /skins/vector/components/externalLinks.less 中：
@import "mediawiki.mixins.less";
// External links
#content {
.external {
background-position: center right;
background-repeat: no-repeat;
.background-image-svg('images/external-link-ltr-icon.svg', 'images/external-link-ltr-icon.png');
padding-right: 13px;
}
}
而 /skins/common/ 之下的 shared.css 和 commonPrint.css 也都會在不同應用脈絡下對外部連結再作補充，而且還下了 !important (優先適用) 的指示。
