html随机选择,HTML5 午餐随机选择（碰运气）小应用

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Old+Standard+TT);

@import url(https://fonts.googleapis.com/css?family=Lato);

body {

font-size: 20px;

background-color: #f4f1e6;

text-align: center;

color: #343b45;

font-family: 'Old Standard TT', serif;

height: 100%;

line-height: 1.675;

}

@media (min-width: 65em) {

body {

font-size: 25px;

}

}

h1 {

background: #f4f1e6;

color: orangered;

font-size: 1.75em;

line-height: 1.2;

margin-top: 1.33875em;

margin: 0 auto;

position: relative;

top: -0.45em;

width: 95%;

z-index: 9;

}

@media (min-width: 65em) {

h1 {

font-size: 2.8em;

width: 70%;

}

}

h2 {

font-family: 'Lato', sans-serif;

color: orangered;

font-size: 1.25em;

letter-spacing: 0.1em;

line-height: 1.575;

margin: 0 0 0.75em 0;

}

h2 sup {

font-size: 70%;

text-decoration: underline;

vertical-align: top;

}

@media (min-width: 65em) {

h2 {

font-size: 1.75em;

}

}

p {

margin: 0.53875em 0;

font-size: 1.25em;

}

.wrap {

padding: 2em 1em;

margin: 0 auto;

max-width: 35em;

font-size: 1.2rem;

}

@media (max-width: 65em) {

.wrap {

max-width: 100%;

}

}

.button--getlunch {

background-color: orangered;

border: 0;

color: white;

font-family: 'Lato', sans-serif;

font-size: 1em;

padding: 0.75em 0.5em;

line-height: 1;

letter-spacing: 0.1em;

text-align: center;

text-decoration: none;

text-transform: uppercase;

white-space: nowrap;

}

@media (max-width: 65em) {

.button--getlunch {

padding: 0.75em 1em;

}

}

.lunch-wrap {

position: relative;

max-width: 100%;

border: 2px solid #343b45;

border-top: none;

text-align: center;

margin: 60px auto;

padding: 0 2em 1em;

}

.lunch-wrap:before,

.lunch-wrap:after {

content: "";

position: absolute;

height: 2px;

width: 25%;

background-color: #333;

top: 0;

}

@media (max-width: 65em) {

.lunch-wrap:before,

.lunch-wrap:after {

width: 15%;

}

}

.lunch-wrap:after {

right: 0;

}

.lunch-wrap:before {

left: 0;

}

@media (max-width: 65em) {

.lunch-wrap {

padding: 0 1em 1em;

}

}

.lunch-wrap p {

font-size: 1.25em;

}