webday02-项目-设计注册页面

最新推荐文章于 2021-10-27 08:43:49 发布

Victoria446704822

最新推荐文章于 2021-10-27 08:43:49 发布

阅读量142

点赞数

本文链接：https://blog.csdn.net/weixin_47407295/article/details/108104843

版权

<!DOCTYPE HTML>
<html>
   <head>
       <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
       <title>欢迎注册Easymall</title>
       <link rel="stylesheet" href="1.css"/>
   </head>
   <body>
       <h1>欢迎注册Easymall</h1>
       <form action="#">
           <table>
               <tr>
                   <td class="left_td">用户名：</td>
                   <td>
                       <input type="text" name="username"/>
                   </td>
               </tr>
               <tr>
                   <td class="left_td">密码：</td>
                   <td>
                       <input type="password" name="password" />
                   </td>
               </tr>
               <tr>
                   <td class="left_td">确认密码：</td>
                   <td>
                       <input type="password" name="password2"/>
                   </td>
               </tr>
               <tr>
                   <td class="left_td">昵称：</td>
                   <td>
                       <input type="text" name="nickname"/>
                   </td>
               </tr>
               <tr>
                   <td class="left_td">邮箱：</td>
                   <td>
                       <input type="text" name="email" />
                   </td>
               </tr>
               <tr>
                   <td class="left_td">验证码：</td>
                   <td>
                       <input type="text" name="valistr" />
                       <img src="yzm.jpg" alt="验证码" />
                   </td>
               </tr>
               <tr>
                   <td colspan="2" id="sub_td">
                       <input type="submit" value="注册用户" />
                   </td>
               </tr>
           </table>
       </form>
   </body>
</html>

css:

body{
   font-family:微软雅黑;
   /*背景图片*/
   background-image: url("../img/regist/zc.jpg");
   /*不要铺排*/
   background-repeat: no-repeat;
   /*左右居中,center表示左右居中,0表示上下不动*/
   background-position: center 0;
}
h1{
   text-align: center;
   /*外边距*/
   margin-top: 190px;
   margin-bottom: 30px;
   color: #990000;
}
table{
   /*参1：上下不动，参2：左右自适应，居中*/
   margin: 0 auto;
}
.left_td{
   text-align: right;
   font-size:18px;
}
input{
   width:150px;
   height:22px;
   border: 1px solid #ccc;
}
input[name="valistr"]{
   width:80px;
}
td{
   /*td设置的上下外边距无效*/
   /*可以设置内边距*/
   padding-top: 10px;
}
#sub_td{
   text-align:center;
}
#sub_td input{
   border: none;
   width:127px;
   height:44px;
   font-size: 20px;
   color: #ffffff;
   font-weight:bold;
   background-image: url("../img/regist/zc_btn01.jpg");
}
#sub_td input : hover{
   background-image: url("../img/regist/zc_btn02.jpg");
}
input[name="valistr"] , input[name="valistr"]+img{
   /*对齐方式*/
   vertical-align: middle;
}

Victoria446704822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webday02-项目-设计注册页面

<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>欢迎注册Easymall</title> <link rel="stylesheet" href="1.css"/> </head>...
复制链接

扫一扫