zoukankan      html  css  js  c++  java
  • 今天用css做了一个QQ登录页面

     

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>今天写一些简单的页面</title>

    <link rel="stylesheet" style="text/css" href="d2.css">

    </head>

    <body>

    <table>

    <tr>

    <td>

    <div id="a1">

    <h1>QQ</h1>

    <form method="post">

    <input type="text"  name="user"required="required" placeholder="QQ" name="a">

    <input type="password" required="required" placeholder="pw" name="b">

     <button id="a2" type="submit">登录</button> 

    </form>

    </div>

    </td>

    </table>

    </body>

    </html>

    body{

      500px;

      height:300px;

      background-color:#BCEAFF;

    }

    #a1{

      position: absolute;  

      top: 50%;  

      left:50%; 

      margin: -150px 0 0 -150px;  

      200px;  

      height: 300px;

             }

    #a1 h1{

      color:white;

      text-shadow:0 0 10px;

      text-align:center;

    }

    h1{  

        font-size:30px;  

        margin: 0.67em 0;

       }

    table{

      background-color:#72C1F2;

      border:1px solid #bbb;

      511px;

      height:350px;

      margin:80px 380px ;

    }

    input{  

        200px;  

        height: 18px;  

        margin-bottom: 10px;    

        padding: 10px;  

        font-size: 13px;  

        color: #fff;  

        text-shadow:1px 1px 1px;  

        border:1px solid #56536A;  

        border-radius: 10px 0px 10px 10px;  

        background-color: #D9E4FC;  

    }  

    #a2{  

        223px;  

        min-height: 22px;  

        display: block;  

        background-color: #00AEFF;  

        border: 1px solid #3762bc;  

        color: #fff;  

        padding: 9px 14px;  

        font-size: 15px;  

        border-radius: 0px 10px 0px 10px;  

    #p1{

      border:1px solid #aaa;

      vertical-align:top;

      80px;

      height:80px;

    }

    form{

      border-radius:10px;

      color:white;

    }

    <!doctype html>

    <html lang="en">

     <head>

      <meta charset="UTF-8">

      <title>Document</title>

     </head>

     <!-- <style>

     th:hover td{

     background-color: #333333;

     }

     </style> -->

     <link rel="stylesheet" style="text/css" href="1.css">

     <body>

     <!--

      <table border="1px" width="200" height="200" >

    <caption>表格的合并</caption>

      <tr>

             <td colspan="2" align="center" bgcolor="555555">1</td>

             <td rowspan="2" align="center">3</td>

      </tr>

      <tr>

             <td rowspan="2" align="center">4</td>

             <td align="center" bgcolor="purple">5</td>

      </tr>

      <tr>

             <td colspan="2" align="center">8</td>

      </tr>

      </table> -->

    <h2 id="c4">

    <span id="c1">有</span>

    <span id="c2">妖</span>

    <span id="c3">气</span>

    </h2>

     </body>

    </html>

    #c4{

    padding-bottom:4px;

    border-bottom:2px solid #A1859F;

    300px;

    background:url(9.png) repeat-x bottom;

    }

    #c1{

    font-size:70px;

    font-family:Arial;

    color:#B7B170;

    }

    #c2{

    font-size:70px;

    color:#56D097;

    }

    #c3{

    font-size:70px;

    color:#E6CDA6;

    }

    body{

    background-color:#4A374A;

    }

  • 相关阅读:
    Java集合:HashMap底层实现和原理(源码解析)
    Java获取异常堆栈信息
    win7 64位系统 PB连接oracle数据库出现“oracle library oci.dll could not be loaded”问题的解决方法
    Oralce 使用递归方式获取BOM树显示结构
    Oracle 链接数据库语句
    根据数据窗口某列的值定位行
    pb中数据窗口filter函数和retrieve函数的区别和联系
    用代码保存共享文件夹登录名和密码
    PB 组合数据窗口子窗口数据赋值方法
    PB 导出PDF
  • 原文地址:https://www.cnblogs.com/miffees/p/6006003.html
Copyright © 2011-2022 走看看