欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

css给html添加效果

程序员文章站 2022-03-25 21:58:14
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 }

 

上一篇： [PHP] 数据结构-反转链表PHP实现

下一篇： Python六个问题轻松检测你知识点掌握程度

推荐阅读