初始学习记录 基于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>
