现在的位置: 首页学习笔记>正文
PHP实战项目注册页面设计.
发表于6年前 学习笔记 评论数 2

注册页面设计.

我们新建立一个包含HTMLPHP页面.

我这里名字为register.php.

然后我们在头部 给首页和注册加上一个超链接.

  1.  <li><a href="index.php">首页</a></li>   
  2.   <li><a href="register.php">注册</a></li>   
  3. 然后再用CSS样式来去掉它们下划线和鼠标移动上去的时候是红色的效果。   
  4. 然后添加下面代码到basic.css文件   
  5. #header ul li a{   
  6.     text-decoration:none;   
  7.     color:#333;   
  8. }   
  9. #header ul li a:hover{   
  10.     color:#f00;   
  11. 然后我们在register.php导入公共文件   
  12. define('IN_TG',true);   
  13. require dirname(__FILE__).'/includes/common.inc.php';   
  14. 记得加上防调用的常量.  

下面上传我注册页面和样式表的代码.
如下:

PHP注册页面

 

  1. Register.css   
  2. @CHARSET "UTF-8";   
  3. #register{   
  4.     width:auto;   
  5.     height:600px  
  6.     border:2px solid #ccc;   
  7.     font-size:12px;   
  8. }   
  9. #register h2{   
  10.     text-indent:0;   
  11.     text-align:center;   
  12.     //去除字体的距离,然后居中;   
  13. }   
  14. #register dl{   
  15.        
  16.     width:400px;   
  17.     margin:0 auto;   
  18. }   
  19. #register dl dt{   
  20.     text-align:center;   
  21.     padding:10px 0;   
  22.     font-wight:bold;   
  23.     //字体加粗   
  24. }   
  25. #register dl dd{   
  26.     padding:5px 0;   
  27. }   
  28. #register dl dd.face{   
  29.     padding:5px 0 5px 120px;   
  30. }   
  31. #register dl dd input.text{   
  32.     width:220px;   
  33.     height:19px;   
  34.     //input.text就是CLASS为TEXT的.   
  35. }   
  36. #register dl dd input.submit{   
  37.     width:60px;   
  38.     height:19px;   
  39.     border:1px dashed #333;   
  40.     cursor:pointer;   
  41.     margin:0 0 0 120px;   
  42. }   
  43. #register dl dd input.yzm{   
  44.     width:60px;   
  45. }  

Register.php

  1. <?php    
  2. ///**   
  3. //* xiangmushizhan   
  4. //* ================================================   
  5. //* Copy 2012-2102 Suchao.   
  6. //* Web: http://www.mechao.cn   
  7. //* ================================================   
  8. //* Author: Suchao.   
  9. //* Date: 2012-5-30   
  10. //*/   
  11. define('IN_TG',true);   
  12. require dirname(__FILE__).'/includes/common.inc.php';   
  13.   
  14. ?>   
  15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  16. <html xmlns="http://www.w3.org/1999/xhtml">   
  17. <head>   
  18. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  19. <title> 用户注册</title>   
  20. <link rel="shortcut icon" href="1.ico" />   
  21. <link rel="stylesheet" type="text/css" href="styles/1/basic.css"/>   
  22. <link rel="stylesheet" type="text/css" href="styles/1/register.css"/>   
  23. </head>   
  24.   
  25. <body>   
  26. <?php  include 'includes/header.inc.php';   
  27. ?>   
  28.   
  29.   
  30. <div id="register">   
  31.   <h2>会员注册</h2>   
  32.   <form method="post" action="post.php">   
  33.   <dl>   
  34.   <dt>请认真填写以下内容.</dt>   
  35.   <dd>用 户 名:<input type="text" name="username" class="text"/>(*必填,至少两位)</dd>   
  36.   <dd>密        码:<input type="password" name="password" class="text"/>(*必填)</dd>   
  37.   <dd>确定密码:<input type="password" name="password" class="text"/>(*必填)</dd>   
  38.   <dd>密码提示:<input type="text" name="passt" class="text"/>(*必填,至少两位)</dd>   
  39.   <dd>密码回答:<input type="text" name="passd" class="text"/>(*必填,至少两位)</dd>   
  40.   <dd>性  别:<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" value="女" name="sex"  "/>女</dd>
  41.   <dd class="face"><img src="face/1.gif" alt="头像选择 "/></dd>  
  42.   <dd>电子邮件:<input type="text" name="email" class="text"/>(*必填)</dd>  
  43.   <dd>Q   Q :<input type="text" name="QQ" class="text"/>(*可选)</dd>  
  44.   <dd>主页地址:<input type="text" name="url" value="http://" class="text"/>(*可选)</dd>   
  45.   <dd>验 证 码:<input type="text" name="YZM" class="text yzm" /></dd>
  46.   <dd><input type="submit" class="submit" value="注册"/></dd>  
  47.   </dl>  
  48.   </form>"  
  49.      
  50.      
  51.      
  52.      
  53.      
  54.      
  55.      
  56.      
  57. </div>   
  58.   
  59.   
  60.   
  61.   
  62. <?php  include 'includes/footer.inc.php';   
  63. ?>   
  64. </body>   
  65.   
  66.   
  67. </html>  

效果图如下:

独家记忆

效果页面

×
腾讯微博