你的位置:首页 > 网页设计

[网页设计]sunny day


初始学习记录 基于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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="">忘记密码</a></div>    </div>    </div></body></html>