15,321
个编辑
无编辑摘要 |
无编辑摘要 |
||
第8行: | 第8行: | ||
border:0; | border:0; | ||
} | } | ||
.link-box { | |||
position: relative; | |||
z-index: 2; | |||
display: inline-flex; | |||
align-items: stretch; | |||
height: 48px; | |||
width: 160px; | |||
border-radius: 6px; | |||
overflow: hidden; | |||
outline: solid 1px #bbb; | |||
transition: all 0.13s ease-in-out; | |||
} | |||
.link-box:hover { | |||
z-index: 3; | |||
outline: solid 1px #66ccff; | |||
} | |||
.link-box:active { | |||
z-index: 1; | |||
outline: solid 1px #ee0000; | |||
transform: none; | |||
transition: all 0.04s ease-in; | |||
} | |||
.img-box { | |||
flex: 0 0 48px; | |||
position: relative; | |||
z-index: 1; | |||
} | |||
.img-box img { | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
width: 100% !important; | |||
height: 100% !important; | |||
object-fit: cover; | |||
} | |||
.txt-box { | |||
flex-grow: 1; | |||
display: flex; | |||
flex-flow: column nowrap; | |||
padding: 3px 10px 3px 7px; | |||
z-index: 2; | |||
} | |||
.txt-box>.title { | |||
display: block; | |||
font-weight: bold; | |||
color: #222; | |||
font-size: 12px; | |||
} | |||
.txt-box>.text { | |||
display: block; | |||
color: #666; | |||
font-size: 7px; | |||
} | |||
.link-cover, .url-cover { | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 100%; | |||
z-index: 3; | |||
} | |||
.txt-box.flag-myth::after { | |||
content: "传说"; | |||
color: #fff; | |||
background: #000; | |||
position: absolute; | |||
right: 3px; | |||
border-radius: 2px; | |||
font-size: 9px; | |||
padding: 2px; | |||
line-height: 1em; | |||
} | |||
.txt-box.flag-real::after { | |||
content: "现实"; | |||
color: #fff; | |||
background: #01a43c; | |||
position: absolute; | |||
right: 3px; | |||
border-radius: 2px; | |||
font-size: 9px; | |||
padding: 2px; | |||
line-height: 1em; | |||
} | |||
.unexist { | |||
outline: dashed 1px #ccc !important; | |||
} | |||
/*标题风格化*/ | /*标题风格化*/ | ||
h2 { | h2 { |