初始学习记录 基于http://www.htmleaf.com/html5/html5muban/20141121552.html模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
button
{
background: #686868;
border: 30px solid #c6c6c6; /*solid边框30px*/
border-radius: 80%;/*圆角边框*/
cursor: pointer; /*光标样式*/
width: 85px;
height: 85px;
position: absolute;/*位置*/
right:900px;
top: 200px;
}
button:hover
{
background: #c6c6c6;
border-color:#686868 ;
} </style></head>
<body><div><button type="submit"></body>
<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'><title>登录界面</title>
<style>*
/*内外边距*/
{
margin:0px;
padding:0px;
}
/*body*/
body{
background:url('245.jpg');
position:relative;
padding:150px;
font-family:verdana;
}
/*登录窗口主体*/
#loginform
{
width:210px;
height:auto;
position:relative;
margin:0 auto;
}
input
{
display:block;
margin:0px auto 15px;
border-radius:5px;
background: #c6c6c6;
width:85%;
padding:12px 20px 12px 10px;
border: none;
color:#686868;
box-shdow:inset 0px 1px 5px #000000;
font-size:0.85em;
} button
{
background: #c6c6c6;
border-radius:80%;
border:30px solid #686868;
cursor:pointer;
width: 85px;
height:85px;
position:absolute;
right: -42px;
top:54px; } button:hover
{
background: #686868;
border-color:#c6c6c6; } h1
{
text-align:center;
color:#c6c6c6;
font-size:15px;
padding:10px 0px;
}
/*注册和忘记密码效果设置*/
#note
{
color:#88887a;
font-size: 0.8em;
text-align:left;
padding-left:5px;
} a
{
color:#88887a;
text-decoration:none; } a:hover
{
color:#39F;
margin-left:1px; }
/*登录窗口主体背景*/
#mainlogin
{
float:center;
width:250px;
height:170px;
padding:15px 15px;
position:relative;
background:#686868;
border-radius:7px;
opacity:0.9;
} </style></head><body>
<div id="loginform"> <div id="mainlogin"> <h1>欢迎登录</h1>
<form action="">
<input type="text" placeholder="邮箱/手机/账户" value="" required>
<input type="password" placeholder="输入密码" value="" required>
<button type="submit" required></button>
</form>
<div id="note"><a href="">注册</a> <a href="">忘记密码</a></div>
</div>
</div>
</body></html>