css给html添加效果
程序员文章站
2022-07-02 13:54:56
1 2 3 4 EasyMall注册界面 5 6 7 8 9 欢迎注册EasyMall 10 11 12 13 用户名： 14 15 16 17 密码： 18 ... ......
1 <!doctype html>
2 <html>
3 <head>
4 <title>easymall注册界面</title>
5 <meta http-equiv="content-type" content="text/html" charset="utf-8">
6 <link rel="stylesheet" href="d:/myeclipse 10/day02/regit/css/regit.css">
7 </head>
8 <body>
9 <h1>欢迎注册easymall</h1>
10 <form action="#" method="post">
11 <table>
12 <tr>
13 <td class="td_txt">用户名：</td>
14 <td><input type="text" name="usrename"></td>
15 </tr>
16 <tr>
17 <td class="td_txt">密码：</td>
18 <td><input type="password" name="password"></td>
19 </tr>
20 <tr>
21 <td class="td_txt">确认密码：</td>
22 <td><input type="password" name="password1"></td>
23 </tr>
24 <tr>
25 <td class="td_txt">昵称：</td>
26 <td><input type="text" name="nickname"></td>
27 </tr>
28 <tr>
29 <td class="td_txt">邮箱：</td>
30 <td><input type="text" name="email"></td>
31 </tr>
32 <tr>
33 <td class="td_txt">验证码：</td>
34 <td><input class="td1" type="text" name="yzm">
35 <img alt="图片加载失败" src="d:\myeclipse 10\day02\regit\img\yzm.jpg"></td>
36 </tr>
37 <tr>
38 <td colspan="2" class="td"><input type="submit" value="注册用户"></td>
39 </tr>
40 </table>
41 </form>
42 </body>
43 </html>
44
45
46 body{
47 background-image: url("d:/myeclipse 10/day02/regit/img/zc.jpg");
48 background-repeat: no-repeat;
49 font-family: "微软雅黑";
50 background-position: top;
51 }
52 h1{
53 text-align:center;
54 margin-top: 190px;
55 margin-bottom: 30px;
56 color:#990000;
57 }
58 table{
59 /*text-align:center;*/
60 margin:0px auto;
61 }
62 table tr td.td_txt{
63 text-align: right;
64 font-size: 18px;
65 }
66 .td1{
67 width:80px;
68 vertical-align: middle;
69 }
70 .td1+img{
71 vertical-align:middle;
72 }
73 table tr td.td{
74 text-align: center;
75 }
76 input{
77 width:150px;
78 height:22px;
79 border-color: #ccc;
80 }
81
82 input[type="submit"]{
83 background-color:red;
84 border:none;
85 width:127px;
86 height:44px;
87 font-size: 20px;
88 color:white;
89 font-weight: bolder;
90
91 }
92 input[type="submit"]:hover{
93 background-color:blue;
94 }
95 input[type="submit"]:active{
96 background-color: green;
97 }
98 input[type="submit"]:visited{
99 background-color: pink;
100 }
上一篇： 百度智能小程序弹窗组件wcPop|智能小程序自定义model弹窗模板
下一篇： 初识JAVA