* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
a,img {
    border: 0;
}

body {
    background: #eee;
    text-align: center;
}
table {
    /* 表格的两边框合并为一条 */
    border-collapse: collapse;
    border-spacing: 0;
}
td,tr {
    padding: 0;
}
/* 清除浮动 */
.clear {
    clear: both;
}
.clear::before,
.clear::after {
    /* 内容设置为空 */
    content: "";
    /* 以表格的形式展现 */
    display: table;
}
.clear::after {
    clear: both;
}

#form-div {
    background-color: rgba(255, 255, 255, 0.27);
    /* 设置边框圆角 */
    border-radius: 10px;
    border: 1px solid #aaa;
    width: 424px;
    margin: 0px auto;
    padding: 30px 0px 20px 0px;
    font-size: 15px;
    text-align: center;
    /* 添加阴影效果 */
    box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5),0px 0px 15px rgba(75, 75, 75, 0.3);
    text-align: left;
}
#form-div input[type='text'],
#form-div input[type='password'],
#form-div input[type='email'] {
    width: 268px;
    margin: 10px;
    font-size: 15px;
    line-height: 20px;
}
#form-div input[type='submit'],
#form-div input[type='button'] {
    margin: 10px 20px 0px 0px;
}

#form-div table {
    /* 外边距 */
    margin: 0 auto;
    text-align: right;
    color: rgba(64,64,64,1);
}

article {
    position: relative;
    top: 80px;
}

#form-div .buttons {
    float: right;
}

input[type='text'],
input[type='password'],
input[type='email'] {
    border-radius: 8px;
    box-shadow: inset 0px 2px 5px #eee;
    /* 内边距 */
    padding: 10px;
    border: 1px solid #d4d4d4;
    /* 字体颜色 */
    color: #333333;
    margin-top: 5px;
}

/* 获得焦点时的样式 */
input[type='text']:focus,
input[type='password']:focus,
input[type='email']:focus {
    border: 1px solid #50afeb;
    /* 取消轮廓线 */
    outline: none;
}

input[type='button'],
input[type='submit'] {
    padding: 7px 15px;
    background-color: #3c6db0;
    text-align: center;
    border-radius: 5px;
    /* 溢出后隐藏 */
    overflow: hidden;
    /* 设置最小宽度 */
    min-width: 80px;
    border: none;
    color: #fff;
    box-shadow: inset 1px 1px 1px rgba(75, 75, 75, 0.3);
}

/* 鼠标悬停时的颜色 */
input[type='button']:hover,
input[type='submit']:hover {
    background-color: #5a88c8;
}

/* 鼠标活动(点击)时的颜色 */
input[type='button']:active,
input[type='submit']:active {
    background-color: #5a88c8;
}

footer {
    position: relative;
    top: 800px;
}