CSS基础范例
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>
?
本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=hci2kab&title=CSS基礎范例
總結
- 上一篇： 【CSS】小妙招，各种问题总结方法处理
- 下一篇： 一张图一个表——CSS选择器总结