「CSS版面配置」修訂間的差異
跳至導覽
跳至搜尋
| （未顯示同一使用者於中間所作的 45 次修訂） | |||
| 第1行： | 第1行： | ||
| − | [[分類: | + | [[分類:CSS]]<pre> |
| − | . | + | {{#css: |
| − | + | .toc { | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
line-height: 1.5em; | line-height: 1.5em; | ||
padding-left: 0; | padding-left: 0; | ||
} | } | ||
| − | + | .toc ul { | |
padding: 0; | padding: 0; | ||
| − | width: | + | width: 100%; |
margin: auto; | margin: auto; | ||
| + | border:0; | ||
} | } | ||
| − | + | .toc li { | |
list-style-type:none; | list-style-type:none; | ||
margin-bottom: .5em; | margin-bottom: .5em; | ||
} | } | ||
| − | + | .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; | ||
border-bottom: solid #B03060 4px; | border-bottom: solid #B03060 4px; | ||
| − | text-shadow: 0px 2px 0 #B03060; | + | /* text-shadow: 0px 2px 0 #B03060; */ |
border-radius: .3em; | border-radius: .3em; | ||
position: relative; | position: relative; | ||
| 第50行： | 第32行： | ||
transition: all 0.1s ease-out; /* Firefox 16+, Opera 12.50+ */ | transition: all 0.1s ease-out; /* Firefox 16+, Opera 12.50+ */ | ||
} | } | ||
| − | #toc li a:hover { | + | .toc li a:link {color: #fff;} |
| + | .toc li a:visited.external {color: #fff;} /* 須蓋過 .external 的顏色設定 */ | ||
| + | .toc li a:hover { | ||
| + | color: #fff; | ||
text-decoration: none; | text-decoration: none; | ||
background-color: #c63b6f; | background-color: #c63b6f; | ||
} | } | ||
| − | + | .toc li a:active { | |
| + | color: #fff; | ||
border-bottom: solid #b03060 1px; | border-bottom: solid #b03060 1px; | ||
top: 4px; | top: 4px; | ||
| 第63行： | 第49行： | ||
} | } | ||
@media screen and (min-width:601px) { | @media screen and (min-width:601px) { | ||
| − | + | .toc { | |
-moz-column-count: 2; | -moz-column-count: 2; | ||
-moz-column-gap: 1em; | -moz-column-gap: 1em; | ||
| 第73行： | 第59行： | ||
} | } | ||
} | } | ||
| − | }} | + | }}</pre> |
| − | < | + | <table width='500px'><tr><th width=50%> |
| − | + | <ul class='toc'><ul> | |
| − | |||
<li>[http://zh-tw.learnlayout.com/no-layout.html 沒有版面配置]</li> | <li>[http://zh-tw.learnlayout.com/no-layout.html 沒有版面配置]</li> | ||
<li>[http://zh-tw.learnlayout.com/display.html 關於 'display' 屬性]</li> | <li>[http://zh-tw.learnlayout.com/display.html 關於 'display' 屬性]</li> | ||
| 第87行： | 第72行： | ||
<li>[http://zh-tw.learnlayout.com/float.html 關於 float 屬性]</li> | <li>[http://zh-tw.learnlayout.com/float.html 關於 float 屬性]</li> | ||
<li>[http://zh-tw.learnlayout.com/clear.html 關於 clear 屬性]</li> | <li>[http://zh-tw.learnlayout.com/clear.html 關於 clear 屬性]</li> | ||
| + | </ul></ul></th><th><ul class='toc'><ul> | ||
<li>[http://zh-tw.learnlayout.com/clearfix.html clearfix 密技]</li> | <li>[http://zh-tw.learnlayout.com/clearfix.html clearfix 密技]</li> | ||
<li>[http://zh-tw.learnlayout.com/float-layout.html float 版面配置範例]</li> | <li>[http://zh-tw.learnlayout.com/float-layout.html float 版面配置範例]</li> | ||
| 第97行： | 第83行： | ||
<li>[http://zh-tw.learnlayout.com/frameworks.html CSS 框架]</li> | <li>[http://zh-tw.learnlayout.com/frameworks.html CSS 框架]</li> | ||
<li>[http://zh-tw.learnlayout.com/about.html 關於本站]</li> | <li>[http://zh-tw.learnlayout.com/about.html 關於本站]</li> | ||
| − | + | </ul></ul> | |
| − | + | </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 (優先適用) 的指示。