CSS
语言：
CSSSCSS
确定
body {
font-family: Georgia, serif;
color: #101096;
padding: 0;
margin: 0;
}
.content {
display: flex;
flex-direction: column;
margin: 0;
min-width: 20em;
}
header {
background-color: #7dd8d6;
padding: .5em 1em;
}
main {
background-color: #66FFB2;
width: 100%;
box-sizing: border-box;
order: 2;
padding: .5em;
}
.left,
.right {
background-color: #49b4e7;
box-sizing: border-box;
padding: .5em;
margin: 0;
width: 100%;
}
.left {
order: 1;
}
.right {
order: 3
}
.left ul {
list-style: none;
padding: 0;
}
.left li {
padding: .2em;
display: inline-block;
}
footer {
background-color: #7dd8d6;
padding: .5em;
clear: both;
margin: 0;
}
@media screen and (min-width: 700px) {
.content {
display: block;
height: calc(100vh - 8em);
overflow-y: hidden;
margin: 0;
}
main {
position: relative;
float: left;
width: 100%;
padding: .2em 13.5em;
height: 100%;
}
.left {
position: relative;
float: left;
margin-left: -100%;
width: 12.5em;
height: 100%;
}
.right {
position: relative;
float: right;
margin-left: -100%;
width: 12.5em;
height: 100%;
}
.left li {
display: block;
}
header {
height: 6em;
}
footer {
height: 2em;
}
}
3523
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
