html与css编写海岛游开发,岛屿网站登录界面设计

CSS

语言：

CSSSCSS

确定

html {

font-family: sans-serif;

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html * {

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

*,

*:before,

*:after {

-moz-box-sizing: inherit;

box-sizing: inherit;

}

html,

body,

section,

.container {

margin: 0;

padding: 0;

min-height: 100%;

height: 100%;

width: 100%;

}

li {

display: inline-block;

padding: 20px 0 3px 0;

position: relative;

color: #fff;

text-transform: uppercase;

text-decoration: none;

letter-spacing: 1px;

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

font-size: 1.25em;

}

li:after {

content: '';

display: block;

margin: auto;

height: 2px;

width: 0px;

background: transparent;

-webkit-transition: width 0.5s ease, background-color 0.5s ease;

transition: width 0.5s ease, background-color 0.5s ease;

}

li:hover:after {

width: 100%;

background: #fff;

}

li:hover {

cursor: pointer;

}

.island {

max-width: 40em;

margin: auto;

position: relative;

padding: 10% 0;

z-index: 10;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

}

.splash {

position: relative;

background-position: top center;

background-repeat: no-repeat;

background-size: cover;

background-image: url("/uploads/150601/volcano.jpg");

text-align: center;

color: #fff;

}

.splash:before {

content: "";

display: block;

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

pointer-events: none;

background: rgba(0, 0, 0, 0.35);

}

.ui-list {

margin: 0;

margin-bottom: 1.5rem;

padding: 0;

list-style: none;

}

.ui-list__item {

border-bottom: 1px solid #fd665a;

}

.ui-list__item:last-of-type {

border-bottom: none;

}

.ui-list__trigger {

display: block;

background-color: #db4437;

color: #fff;

font-weight: bold;

cursor: pointer;

padding: 1.5rem;

}

.ui-list__toggle {

border: 0;

clip: rect(0 0 0 0);

height: 1px;

margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

width: 1px;

}

.ui-list__target {

border: 0;

clip: rect(0 0 0 0);

height: 1px;

margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

width: 1px;

background-color: #fd665a;

color: #fff;

}

.ui-list__toggle:checked + .ui-list__target {

position: fixed;

overflow: visible;

width: auto;

height: auto;

margin: auto;

clip: auto;

padding: 1.5rem;

top: 0;

right: 0;

bottom: 0;

left: 0;

}