html 列表页面设计,一款HTML5任务列表移动应用界面设计

CSS

语言：

CSSSCSS

确定

@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700');

html,

body {

height: 100%;

margin: 0;

background-color: #F0EFEA;

font-family: 'Open Sans Condensed', sans-serif;

}

body {

display: flex;

justify-content: center;

align-items: center;

}

#app {

max-width: 300px;

width: calc(40% - 80px);

height: calc(80% - 80px);

background-color: #fff;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

padding: 40px;

}

#app header,

#day-field {

display: flex;

justify-content: space-between;

align-items: center;

}

#app header {

margin-top: -10px;

margin-bottom: 20px;

}

#month {

display: flex;

flex-flow: column wrap;

}

#month * {

margin: 0;

paggin: 0;

}

#day {

font-size: 3em;

font-weight: bold;

padding-right: 5px;

}

#week {

font-weight: bold;

}

#app section {

overflow: auto;

height: calc(100% - 80px);

}

#app section article {

padding: 2px;

display: flex;

flex-direction: row-reverse;

justify-content: space-between;

margin-bottom: 20px;

align-items: center;

}

input[type=checkbox] {

display: none;

}

label {

display: block;

border: 2px solid #E0E0E0;

width: 12px;

height: 12px;

border-radius: 100%;

cursor: pointer;

cursor: hand;

}

article span {

padding: 5px;

}

article span:focus {

outline: 1px solid #36E3AA;

}

input[type=checkbox]:checked + label {

border: 2px solid #36E3AA;

background-color: #36E3AA;

}

input[type=checkbox]:checked ~ span {

color: #e0e0e0;

text-decoration: line-through;

}

section footer {

display: flex;

justify-content: center;

}

section footer button {

font-weight: bold;

border: none;

background-color: #36E3AA;

padding: 5px;

font-size: 2em;

color: #fff;

border-radius: 100%;

width: 60px;

height: 60px;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

cursor: hand;

margin-top: 14px;

outline: none;

user-select: none;

}

#credits {

position: fixed;

bottom: 0;

width: 100%;

}

#credits img {

border-radius: 100%;

width: 30px;

height: 30px;

margin-left: 10px;

}

#credits span {

display: block;

padding: 10px;

display: flex;

justify-content: flex-end;

align-items: center;

user-select: none;

}

#instructions {

position: fixed;

top: 0;

left: 0;

background-color: #36E3AA;

padding: 0 20px;

font-size: 0.9em;

user-select: none;

}

#instructions a {

color: #000;

}