现在的位置: 首页学习笔记>正文
PHP实战项目之选择头像
发表于6年前 学习笔记 评论数 2

我们学习了上面的分好CSS后,就得继续来学习头像,

因为注册页面那个头像虽然出来了,但是是直接插入图片的,

点击什么的都没效果,我想加上那种点一下那个图片,

所有的头像图片就显示出来的那种效果.

GO.

 

头像PHP页面代码如下

face.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-6-3   
  10. define('IN_TG',true);   
  11. define('yemian',face);   
  12. ?>   
  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  14. <html xmlns="http://www.w3.org/1999/xhtml">   
  15. <head>   
  16. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  17. <title>实战项目-头像选择</title>   
  18. <?php    
  19.    require dirname(__FILE__).'/includes/title.inc.php';   
  20. ?>   
  21. </head>   
  22.   
  23. <body>   
  24. <div id="face">   
  25.   
  26. <h3>选择头像</h3>   
  27.   
  28. <dl>   
  29. <?php for($i=1;$i<10;$i++){?>   
  30. <dd><img src="face/<?php echo $i?>.gif" alt="头像<?php echo  $i?>"/></dd>   
  31. <?php }?>   
  32. </dl>   
  33. <dl>   
  34. <?php for($e=10;$e<33;$e++){?>   
  35. <dd><img src="face/<?php echo $e?>.gif" alt="头像<?php echo $e?>"/></dd>   
  36. <?php }?>   
  37. </dl>   
  38.   
  39. <!--<dl>   
  40. <?php foreach (range(10,33)as $num){?>   
  41. <dd><img src="face/<?php echo $num?>.gif" alt="头像<?php echo $num ?>"/></dd>   
  42. <?php }?>   
  43.   
  44. 这两个方法都可以使用, 但是foreach循环加range函数使用起来更方便.   
  45. range函数就是生成一个递增的函数组.   
  46. 目前来说怎么搞都行,反正效果出来就行了.   
  47.   
  48.   
  49. </dl>   
  50. --></div>   
  51. </body>   
  52. </html>   
  53.   
  54. 头像CSS如下   
  55. face.css   
  56. @CHARSET "UTF-8";   
  57. body{   
  58.     width:auto;   
  59.     //这里要冲突一下前面的长度,因为在BASIC.css里面长度是960.   
  60. }   
  61. #face h3{   
  62. width:80%;   
  63. margin:10px auto;   
  64. height:30px;   
  65. line-height:30px;   
  66. text-align:center;   
  67. //然后设置行高和文本居中,这个看自己喜好加.   
  68. }   
  69. #face dl{   
  70.     width:80%;   
  71.     margin:0 auto;   
  72. }   
  73. #face  dl dd{   
  74.     float:left;   
  75.     padding:0 0 0 10px;   
  76. }   
  77. 注册页面代码如下 register.php   
  78. <?php    
  79. ///**   
  80. //* xiangmushizhan   
  81. //* ================================================   
  82. //* Copy 2012-2102 Suchao.   
  83. //* Web: http://www.mechao.cn   
  84. //* ================================================   
  85. //* Author: Suchao.   
  86. //* Date: 2012-5-30   
  87. //*/   
  88. define('IN_TG',true);   
  89. require dirname(__FILE__).'/includes/common.inc.php';   
  90.   
  91. ?>   
  92. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  93. <html xmlns="http://www.w3.org/1999/xhtml">   
  94. <head>   
  95. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  96. <title> 用户注册</title>   
  97. <?php    
  98. define('IN_TG',true);   
  99. define('yemian',register);   
  100.   require dirname(__FILE__).'/includes/title.inc.php';   
  101. ?>   
  102. </head>   
  103.   
  104. <body>   
  105. <?php  include 'includes/header.inc.php';   
  106. ?>   
  107.   
  108.   
  109. <div id="register">   
  110.   <h2>会员注册</h2>   
  111.   <form method="post" action="post.php">   
  112.   <dl>   
  113.   <dt>请认真填写以下内容.</dt>   
  114.   <dd>用 户 名:<input type="text" name="username" class="text"/>(*必填,至少两位)</dd>   
  115.   <dd>密        码:<input type="password" name="password" class="text"/>(*必填)</dd>   
  116.   <dd>确定密码:<input type="password" name="password" class="text"/>(*必填)</dd>   
  117.   <dd>密码提示:<input type="text" name="passt" class="text"/>(*必填,至少两位)</dd>   
  118.   <dd>密码回答:<input type="text" name="passd" class="text"/>(*必填,至少两位)</dd>   
  119.   <dd>性  别:<input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" value="女" name="sex"  "/>女</dd>
  120.   <dd class="face"><img src="face/1.gif" alt="头像选择 " onclick="javascript:window.open('face.php','face','height=400,width=400,top=o,left=0,scrollbars=1')"/></dd>  
  121.   <dd>电子邮件:<input type="text" name="email" class="text"/>(*必填)</dd>  
  122.   <dd>Q   Q :<input type="text" name="QQ" class="text"/>(*可选)</dd>  
  123.   <dd>主页地址:<input type="text" name="url" value="http://" class="text"/>(*可选)</dd>   
  124.   <dd>验 证 码:<input type="text" name="YZM" class="text yzm" /></dd>
  125.   <dd><input type="submit" class="submit" value="注册"/></dd>  
  126.   </dl>  
  127.   </form>"  
  128.      
  129.      
  130.      
  131.     
  132.      
  133.      
  134.      
  135.      
  136. </div>   
  137.   
  138.   
  139.   
  140.   
  141. <?php  include 'includes/footer.inc.php';   
  142. ?>   
  143. </body>   
  144.   
  145.   
  146. </html>  

效果如下

PHP

×
腾讯微博