正文
今天用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{
width:500px;
height:300px;
background-color:#BCEAFF;
}
#a1{
position: absolute;
top: 50%;
left:50%;
margin: -150px 0 0 -150px;
width: 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;
width:511px;
height:350px;
margin:80px 380px ;
}
input{
width: 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{
width: 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;
width: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;
width: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;
}
