html漂亮页面怎么做的,Html制作简单而漂亮的登录页面

先来看看样子。

html源码：

XML/HTML Code复制内容到剪贴板

html>

Login

Login

登录

css代码：

CSS Code复制内容到剪贴板

html{

width: 100%;

height: 100%;

overflow: hidden;

font-style: sans-serif;

}

body{

width: 100%;

height: 100%;

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

margin: 0;

background-color: #4A374A;

}

#login{

position: absolute;

top: 50%;

left:50%;

margin: -150px 0 0 -150px;

width: 300px;

height: 300px;

}

#login h1{

color: #fff;

text-shadow:0 0 10px;

letter-spacing: 1px;

text-align: center;

}

h1{

font-size: 2em;

margin: 0.67em 0;

}

input{

width: 278px;

height: 18px;

margin-bottom: 10px;

outline: none;

padding: 10px;

font-size: 13px;

color: #fff;

text-shadow:1px 1px 1px;

border-top: 1px solid #312E3D;

border-left: 1px solid #312E3D;

border-right: 1px solid #312E3D;

border-bottom: 1px solid #56536A;

border-radius: 4px;

background-color: #2D2D3F;

}

.but{

width: 300px;

min-height: 20px;

display: block;

background-color: #4a77d4;

border: 1px solid #3762bc;

color: #fff;

padding: 9px 14px;

font-size: 15px;

line-height: normal;

border-radius: 5px;

margin: 0;

}

总结：

placeholder="用户名"的作用:占位符

以上就是本文的全部内容，希望对大家的学习有所帮助。