首页 > > 网页制作 > css >

css给html添加效果

2018-09-05 07:48:21来源：博客园阅读 ()

  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 }