sunny day_html/css_WEB-ITnose-html教程-PHP中文网

sunny day_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:35:04

原创

1080人浏览过

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

登录后复制

Kite

代码检测和自动完成工具

121

查看详情