sunny day,sunny

sunny day,sunny

初始学习记录 基于

<!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>

 

day,sunny 初始学习记录 基于 ! DOCTYPE html html lang ="en" head meta charset ="UTF-8" title 标题 / t...

本文由js9905com金沙网站-金沙澳门手机版网址发布于计算机,转载请注明出处:sunny day,sunny

您可能还会对下面的文章感兴趣: