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;

    }

  • 相关阅读:
    【转】 DFT小讲座之2_DFT@芯片开发不同阶段
    【转】 DFT小讲座之1_扫盲!DFT到底是什么?
    MIPI接口与FPGA电平匹配问题
    ZCU102之display
    Vivado将模块封装为IP的方法(网表文件)【转】
    YUV格式总结【转】
    MPSOC之7——开发流程uramdisk
    MPSOC之2——ubuntu环境配置及petalinux安装
    MPSOC之3——centos环境配置及petalinux安装及使用
    2018软工实践—Beta冲刺(7)
  • 原文地址:https://www.cnblogs.com/miffees/p/6006003.html
Copyright © 2011-2022 走看看