一个简单的登陆界面

用html+css做了一个登陆界面
效果图:
一个简单的登陆界面_第1张图片
html代码:








USERNAME

PASSWORD

css代码:

html {
background-color: #e6e9e9;
background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%);
-webkit-font-smoothing: antialiased;
}
*{margin: 0px;padding: 0px;}
body {
margin: 0 auto;
padding: 2em 2em 4em;
max-width: 800px;
height: 900px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
color: #545454;
background-color: #ffffff;
background-image: url(1.jpg);
background-repeat: no-repeat;
}

p {
color:rgb(93, 190, 206);
margin: 5px 0px 0px 0px;
}

form {
background-color:rgba(62, 62, 62, 0.75);
width: 180px;
height: 160px;
padding: 5px 10px;
float: right;
border-radius: 8px;
box-shadow: 20px 20px 20px #888888;
}

span {
font-size: 28px;
}

input {
width: 13em;
height: 1.2em;
padding: 2px;
}

.receive {
width:3.7em;
height: 1.5em;
margin-right: 10px;
background-color: rgb(88, 88, 88);
color: white;
border: 0px;
}

#rec {
background-color: rgb(88, 88, 88);
margin-top: 10px;
padding: 1px;
border-radius: 5px;

}

你可能感兴趣的:(html,html,界面)