CSS基础范例
程序员文章站
2023-08-26 15:53:42
1 2 3 4 5 Title 6 73 74 75 76 77 78 请注册 79 立即登陆> 80 81 82 83 84 ... ......
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>title</title>
6 <style>
7 *{
8 margin: 0; /*重置*/
9 padding: 0;
10 }
11 body{
12 background-color: whitesmoke; /*页面背景色*/
13 }
14 .top{
15 width: 100%;
16 height: 60px;
17 background-color: black;
18 padding-left: 100px;
19 }
20 .box{
21 width: 500px;
22 height: 600px;
23 background-color: white; /*背景色*/
24 border-radius: 5px; /*圆弧*/
25 margin: 20px auto; /*距离上部20px，自动居中*/
26 }
27 .box-top{
28 width: 500px;
29 height: 60px;
30 border-bottom: 1px solid black;
31 line-height: 60px;
32 }
33 .box-top h3{
34 float: left;
35 border-bottom: 3px solid #c18ef0;
36 font-size: 30px;
37 }
38 .box-top a{
39 float: right;
40 font-size: 20px;
41 color: skyblue;
42 }
43 .box-regist input{
44 width: 480px;
45 height: 40px;
46 border-radius: 5px;
47 margin:10px;
48 }
49 .box-regist .inpbox{
50 width: 300px;
51 }
52 .box-regist a{
53 display: inline-block;
54 border: 1px solid rebeccapurple;
55 width: 100px;
56 height: 40px;
57 border-radius: 5px;
58 margin: 10px;
59 line-height: 40px;
60 text-align: center;
61 color: rebeccapurple;
62 }
63 .btn{
64 background-color: aqua;
65 }
66 .tail{
67 width: 100%;
68 height: 120px;
69 background-color: grey;
70 }
71
72 </style>
73 </head>
74 <body>
75 <div class="top"></div>
76 <div class="box">
77 <div class="box-top">
78 <h3>请注册</h3>
79 <a href="f:\项目\html\标签.html">立即登陆></a>
80 </div><br>
81 <div class="box-regist">
82 <form method="post" action="">
83 <input type="text" placeholder="请输入手机号" name="phone"><br>
84 <input class="inpbox" type="text" placeholder="请输入短信验证码" name="cookie"><a>发送验证码</a><br>
85 <input type="text" placeholder="请输入用户名" name="user"><br>
86 <input type="password" placeholder="请输入密码" name="psw"><br>
87 <input type="password" placeholder="请再次输入密码" name="pswt"><br>
88 <input class="inpbox" type="text" placeholder="请输入图形验证码" name="img-cookie"><a>此处为图形</a><br>
89 <input class="btn" type="submit" value="立即注册">
90 </form>
91 </div>
92 </div>
93 <div class="bot1"></div>
94 <div class="bot2"></div>
95 <div class="tail"></div>
96 </body>
97 </html>
下一篇： js之数组知识