Template:专题导航/styles.css：修订间差异
模板页面
更多操作
删除的内容 添加的内容
4O74Y74L74J7（留言 | 贡献） 无编辑摘要 |
小无编辑摘要 |
||
| （未显示2个用户的8个中间版本） | |||
| 第1行： | 第1行： | ||
/* |
|||
* Skeleton V2.0.4 |
|||
* Copyright 2014, Dave Gamache |
|||
* www.getskeleton.com |
|||
* Free to use under the MIT license. |
|||
* http://www.opensource.org/licenses/mit-license.php |
|||
* 12/29/2014 |
|||
*/ |
|||
.container { |
|||
position: relative; |
|||
width: 100%; |
|||
max-width: 960px; |
|||
margin: 0 auto; |
|||
padding: 0 20px; |
|||
box-sizing: border-box; |
|||
} |
|||
.div, |
|||
.divs, |
|||
.column, |
|||
.columns { |
|||
width: 100%; |
|||
float: left; |
|||
box-sizing: border-box; |
|||
} |
|||
/* For devices larger than 400px */ |
|||
@media (min-width: 400px) { |
|||
.container { |
|||
width: 85%; |
|||
padding: 0; |
|||
} |
|||
} |
|||
/* For devices larger than 550px */ |
|||
@media (min-width: 550px) { |
|||
.container { |
|||
width: 80%; |
|||
} |
|||
.div, |
|||
.divs, |
|||
.column, |
|||
.columns { |
|||
margin-left: .3%; |
|||
} |
|||
.div:first-child, |
|||
.divs:first-child, |
|||
.column:first-child, |
|||
.columns:first-child { |
|||
margin-left: 0; |
|||
} |
|||
.one.div, |
|||
.one.divs { width: 100%; margin-left: 0; } |
|||
.two.divs { width: 49.85%; } |
|||
.three.divs { width: 33.1333333333%; } |
|||
.four.divs { width: 24.775%; } |
|||
.five.divs { width: 19.76%; } |
|||
.six.divs { width: 16.4166666667%; } |
|||
.seven.divs { width: 14.0285714286%; } |
|||
.eight.divs { width: 12.2375%; } |
|||
.nine.divs { width: 10.8444444444%; } |
|||
.ten.divs { width: 9.73%; } |
|||
.eleven.divs { width: 8.81818181818%; } |
|||
.twelve.divs { width: 8.05833333333%; } |
|||
.one.column, |
|||
.one.columns { width: 8.05833333333%; } |
|||
.two.columns { width: 16.4166666667%; } |
|||
.three.columns { width: 24.775%; } |
|||
.four.columns { width: 33.1333333333%; } |
|||
.five.columns { width: 41.4916666667%; } |
|||
.six.columns { width: 49.85%; } |
|||
.seven.columns { width: 58.2083333333%; } |
|||
.eight.columns { width: 66.5666666667%; } |
|||
.nine.columns { width: 74.925%; } |
|||
.ten.columns { width: 83.2833333333%; } |
|||
.eleven.columns { width: 91.6416666667%; } |
|||
.twelve.columns { width: 100%; margin-left: 0; } |
|||
.one-third.column { width: 33.1333333333%; } |
|||
.two-thirds.column { width: 66.5666666667%; } |
|||
.one-half.column { width: 49.85%; } |
|||
} |
|||
/* |
/* |
||
* 专题导航 V1 |
* 专题导航 V1 |
||
| 第95行： | 第8行： | ||
*/ |
*/ |
||
.ztdh { |
.ztdh { |
||
margin-bottom: |
margin-bottom: 20px; |
||
margin-top: 5px; |
margin-top: 5px; |
||
border: solid 1px; |
|||
background-color: white; |
background-color: white; |
||
padding: 8px; |
padding: 8px; |
||
position: relative; |
position: relative; |
||
border-radius: 10px; |
|||
box-shadow: 0 0 3px rgba(0,0,0,.2), 0 3px 5px rgba(0,0,0,.1); |
|||
} |
|||
.ztdh .ztdhhead { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
} |
||
| 第111行： | 第30行： | ||
clear: none; |
clear: none; |
||
margin: 0; |
margin: 0; |
||
font-family: 'Microsoft YaHei','STHeiti Light'; |
|||
font-weight: bold; |
font-weight: bold; |
||
font-size: 1.55em; |
font-size: 1.55em; |
||
| 第118行： | 第36行： | ||
.ztdh .logo { |
.ztdh .logo { |
||
float: left; |
float: left; |
||
margin |
margin: 0 10px; |
||
} |
} |
||
| 第132行： | 第50行： | ||
cursor: pointer; |
cursor: pointer; |
||
line-height: 32px; |
line-height: 32px; |
||
border: 1px solid #a7d7f9; |
|||
font-size: 1.2em; |
font-size: 1.2em; |
||
font-weight: bold; |
font-weight: bold; |
||
line-height: 1.8; |
line-height: 1.8; |
||
display: block; |
display: block; |
||
border-radius: 8px; |
|||
box-shadow: 0 0 5px rgba(57, 197, 187, .5); |
|||
white-space: nowrap; |
|||
} |
} |
||
.ztdh .ztdhmenu{ |
.ztdh .ztdhmenu{ |
||
display: flex; |
|||
margin-top: 5px; |
|||
width: 100%; |
|||
gap: 8px; |
|||
} |
|||
.ztdh .menu-item{ |
|||
flex: 1; |
|||
} |
} |
||
.menu-popout { |
.menu-popout { |
||
position: absolute; |
position: absolute; |
||
background-color: |
background-color: rgba(255, 255, 255, .7); |
||
margin: 0; |
margin: 0; |
||
width: 100%; |
width: 100%; |
||
top: |
top: 5px; |
||
border-radius: 8px; |
|||
box-shadow: 0 0 8px rgba(0,0,0,.25); |
|||
padding: 5px 8px; |
|||
box-sizing: border-box; |
|||
backdrop-filter: blur(15px); |
|||
-webkit-backdrop-filter: blur(15px); |
|||
} |
} |
||
| 第160行： | 第92行： | ||
list-style: none!important; |
list-style: none!important; |
||
margin: 0; |
margin: 0; |
||
border: solid #39C5BB; |
|||
border-width: 2px; |
|||
} |
} |
||
| 第170行： | 第100行： | ||
.ztdh li a:hover { |
.ztdh li a:hover { |
||
text-decoration: none; |
text-decoration: none; |
||
} |
|||
body.main-sm .ztdh .menu-item:hover { |
|||
padding-bottom: 5px; |
|||
margin-bottom: -5px; |
|||
} |
} |
||
| 第177行： | 第113行： | ||
.ztdh .menu-item:hover > span.menu-title { |
.ztdh .menu-item:hover > span.menu-title { |
||
background |
background: linear-gradient(to right, #39c5a5, #39c5bb, #34b5c0); |
||
color: white !important; |
|||
border: 1px solid #39C5BB; |
|||
} |
|||
.ztdh .menu-item:hover > span.menu-title > a { |
|||
color: white !important; |
|||
} |
} |
||
| 第191行： | 第131行： | ||
padding: 0 6px; |
padding: 0 6px; |
||
cursor: pointer; |
cursor: pointer; |
||
margin-top: -.8rem; |
|||
} |
} |
||
.ztdh hr{ |
.ztdh hr{ |
||
margin: |
margin: 6px 0; |
||
} |
} |
||
body:not(.main-sm) .ztdhhead { |
|||
@media (max-width: 550px) { |
|||
display: block; |
|||
.ztdh .hint { |
|||
font-size: 10px; |
|||
} |
|||
.ztdh .menu-item{ |
|||
margin-bottom: 5px; |
|||
} |
|||
.menu-content { |
|||
position: relative; |
|||
margin-bottom: 5px; |
|||
} |
|||
.menu-popout { |
|||
position: relative; |
|||
} |
|||
.ztdh .menu-item > span.menu-title { |
|||
background-color: #39C5BB; |
|||
border: 1px solid #39C5BB; |
|||
} |
|||
.ztdh hr{ |
|||
margin: .2em 0; |
|||
} |
|||
.ztdh-hsctrl { |
|||
display: none; |
|||
} |
|||
} |
} |
||
body:not(.main-sm) .ztdh .hint { |
|||
font-size: 10px; |
|||
} |
|||
body:not(.main-sm) .menu-content { |
|||
position: relative; |
|||
margin-bottom: 5px; |
|||
} |
|||
body:not(.main-sm) .menu-popout { |
|||
position: relative; |
|||
} |
|||
body:not(.main-sm) .ztdh .menu-item > span.menu-title { |
|||
background: linear-gradient(to right, #39c5a5, #39c5bb, #34b5c0); |
|||
} |
|||
body:not(.main-sm) .ztdh hr{ |
|||
margin: .2em 0; |
|||
} |
|||
body:not(.main-sm) .ztdhtitle { |
|||
display: block; |
|||
} |
|||
body:not(.main-sm) .hint p { |
|||
margin-block: initial; |
|||
} |
|||
body:not(.main-sm) .ztdh-hsctrl { |
|||
display: none; |
|||
} |
|||
body:not(.main-sm) .ztdhmenu { |
|||
padding-top: 5px; |
|||
flex-direction: column; |
|||
} |
|||
.menu-popout > ul { |
.menu-popout > ul { |
||
margin-left: 0 !important; |
margin-left: 0 !important; |
||
} |
|||
.menu-popout > ul:nth-child(n+2)::before { |
|||
content: ""; |
|||
display: block; |
|||
background: gray; |
|||
width: 96%; |
|||
margin: 5px auto; |
|||
height: .5px; |
|||
} |
} |
||
/* [[Category:在模板命名空间下的CSS页面]] */ |
/* [[Category:在模板命名空间下的CSS页面]] */ |
||