模板:Imm/test.css:修订间差异
来自RIA | Wiki
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
@charset "utf-8"; | @charset "utf-8"; | ||
/* CSS Document */ | /* CSS Document */ | ||
. | .main { | ||
display: block; | |||
} | |||
.leftbox { | |||
display: block; | |||
border: solid black 1px; | |||
margin-bottom: 20px; | |||
width: auto; | |||
} | min-width: 350px; | ||
margin-left: 10px; | |||
margin-right: 10px; | |||
} | |||
. | .leftbox-header { | ||
display: block; | |||
background-color: #ffd3c7; | |||
color: #ffffff; | |||
} | } | ||
. | .leftbox-body { | ||
margin: 0; | |||
padding-right: 1em; | |||
padding-left: 1em; | |||
} | padding-bottom: 1em; | ||
display: block; | |||
} | |||
. | .leftbox-body-text { | ||
display: flex; | |||
align-items: center; | align-items: center; | ||
} | } | ||
. | .leftbox-header h2 { | ||
text-align: | text-align: left; | ||
margin: 0; | margin: 0; | ||
padding: 0.3em; | padding: 0.3em; | ||
display: block; | display: block; | ||
} | } | ||
. | .rightbox { | ||
display: block; | |||
border: solid black 1px; | |||
margin-bottom: 20px; | |||
max-width: 350px; | |||
min-width: auto; | |||
flex-flow: wrap; | |||
flex-direction: row; | |||
width: 350px; | |||
} | float: right; | ||
margin-left: 10px; | |||
} | |||
. | .rightbox-header { | ||
display: block; | display: block; | ||
background-color: #ffd3c7; | background-color: #ffd3c7; | ||
color: #ffffff; | color: #ffffff; | ||
} | } | ||
.rightbox-body { | |||
margin: 0; | |||
padding: 1em; | |||
display: block; | |||
} | |||
. | .rightbox-body-text { | ||
display: flex; | display: flex; | ||
align-items: center; | |||
} | |||
} | |||
. | .rightbox-header h2 { | ||
text-align: center; | text-align: center; | ||
margin: 0; | margin: 0; | ||
padding: 0.3em; | padding: 0.3em; | ||
display: block; | display: block; | ||
} | } | ||
.picture-text-item { | |||
box-sizing: content-box; | |||
display: inline-block; | |||
margin: 1px; | |||
padding: 1em; | |||
text-align: left; | |||
vertical-align: top; | |||
white-space: normal; | |||
} | |||
. | .picture-item { | ||
width: auto; | |||
background-color: transparent; | |||
margin-bottom: 0.5em; | |||
text-align: center; | |||
} | } | ||
. | .picture-text-item .text-box { | ||
font-size: 12px; | |||
line-height: 1.5; | |||
margin: 8px 0 5px; | |||
} | |||
.main-area { | |||
display: flex; | |||
flex-wrap: wrap; | |||
flex-direction: row; | |||
width: auto; | |||
} | |||
.right-area { | |||
display: flex; | |||
flex-wrap: wrap; | |||
flex-direction: column; | |||
width: 350px; | |||
float: left; | |||
} | |||
.left-area { | |||
display: flex; | |||
flex-wrap: wrap; | |||
flex-direction: column; | |||
width: calc(100% - 370px); | |||
box-sizing: border-box; | |||
min-width: 320px; | |||
} | |||
.landmark { | |||
margin-top: 12px; | |||
margin-right: 12px; | |||
margin-bottom: 12px; | |||
margin-left: 12px; | |||
border-top: 1px solid #FFD3C7; | |||
border-bottom: 1px none #FFD3C7; | |||
display: flex; | |||
flex-flow: wrap; | |||
flex-direction: row; | |||
height: auto; | |||
} | |||
.landmark-new { | |||
width: 123px; | |||
border-right-color: #FFD3C7; | |||
margin-top: 5px; | |||
margin-bottom: 5px; | |||
margin-left: 10px; | |||
} | |||
.landmark-new-br { | |||
width: 20px; | |||
border-right-color: #FFD3C7; | |||
float: left; | |||
margin-left: -2px; | |||
} | } | ||
. | .landmark-new-img { | ||
text-align: center; | width: 100px; | ||
border-right-color: #FFD3C7; | |||
float: right; | |||
margin-top: 7px; | |||
text-align: center; | |||
margin-right: 1px; | |||
} | } | ||
. | .landmark-recommend { | ||
border-width: 5px 1px 5px 5px; | |||
border-right-color: #FFD3C7; | |||
margin-top: 5px; | |||
margin-bottom: 5px; | |||
margin-left: 20px; | |||
padding-left: 1px; | |||
width: auto; | |||
display: flex; | |||
} | } | ||
. | .landmark-recommend-br { | ||
width: 20px; | |||
border-right-color: #FFD3C7; | |||
margin-left: -2px; | |||
} | } | ||
. | .landmark-recommend-img { | ||
width: auto; | |||
margin-top: 7px; | |||
text-align: center; | |||
margin-right: 1px; | |||
display: flex; | display: flex; | ||
flex-flow: wrap; | |||
flex-direction: row; | flex-direction: row; | ||
padding-left: 0px; | |||
. | } | ||
.landmark-recommend-img-unit { | |||
border-width: 5px 1px 5px 5px; | |||
width: 100px; | |||
border-right-color: #FFD3C7; | |||
float: right; | |||
margin-top: 0px; | |||
text-align: center; | |||
margin-right: 1px; | |||
margin-left: 10px; | |||
} | } | ||
2023年5月2日 (二) 00:44的版本
@charset "utf-8";
/* CSS Document */
.main {
}
.leftbox {
display: block;
border: solid black 1px;
margin-bottom: 20px;
width: auto;
min-width: 350px;
margin-left: 10px;
margin-right: 10px;
}
.leftbox-header {
display: block;
background-color: #ffd3c7;
color: #ffffff;
}
.leftbox-body {
margin: 0;
padding-right: 1em;
padding-left: 1em;
padding-bottom: 1em;
display: block;
}
.leftbox-body-text {
display: flex;
align-items: center;
}
.leftbox-header h2 {
text-align: left;
margin: 0;
padding: 0.3em;
display: block;
}
.rightbox {
display: block;
border: solid black 1px;
margin-bottom: 20px;
max-width: 350px;
min-width: auto;
flex-flow: wrap;
flex-direction: row;
width: 350px;
float: right;
margin-left: 10px;
}
.rightbox-header {
display: block;
background-color: #ffd3c7;
color: #ffffff;
}
.rightbox-body {
margin: 0;
padding: 1em;
display: block;
}
.rightbox-body-text {
display: flex;
align-items: center;
}
.rightbox-header h2 {
text-align: center;
margin: 0;
padding: 0.3em;
display: block;
}
.picture-text-item {
box-sizing: content-box;
display: inline-block;
margin: 1px;
padding: 1em;
text-align: left;
vertical-align: top;
white-space: normal;
}
.picture-item {
width: auto;
background-color: transparent;
margin-bottom: 0.5em;
text-align: center;
}
.picture-text-item .text-box {
font-size: 12px;
line-height: 1.5;
margin: 8px 0 5px;
}
.main-area {
display: flex;
flex-wrap: wrap;
flex-direction: row;
width: auto;
}
.right-area {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 350px;
float: left;
}
.left-area {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: calc(100% - 370px);
box-sizing: border-box;
min-width: 320px;
}
.landmark {
margin-top: 12px;
margin-right: 12px;
margin-bottom: 12px;
margin-left: 12px;
border-top: 1px solid #FFD3C7;
border-bottom: 1px none #FFD3C7;
display: flex;
flex-flow: wrap;
flex-direction: row;
height: auto;
}
.landmark-new {
width: 123px;
border-right-color: #FFD3C7;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
.landmark-new-br {
width: 20px;
border-right-color: #FFD3C7;
float: left;
margin-left: -2px;
}
.landmark-new-img {
width: 100px;
border-right-color: #FFD3C7;
float: right;
margin-top: 7px;
text-align: center;
margin-right: 1px;
}
.landmark-recommend {
border-width: 5px 1px 5px 5px;
border-right-color: #FFD3C7;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 20px;
padding-left: 1px;
width: auto;
display: flex;
}
.landmark-recommend-br {
width: 20px;
border-right-color: #FFD3C7;
margin-left: -2px;
}
.landmark-recommend-img {
width: auto;
margin-top: 7px;
text-align: center;
margin-right: 1px;
display: flex;
flex-flow: wrap;
flex-direction: row;
padding-left: 0px;
}
.landmark-recommend-img-unit {
border-width: 5px 1px 5px 5px;
width: 100px;
border-right-color: #FFD3C7;
float: right;
margin-top: 0px;
text-align: center;
margin-right: 1px;
margin-left: 10px;
}