今天用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;

}

原文地址:https://www.cnblogs.com/miffees/p/6006003.html