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

OK 正式开始做实战项目训练了.

接下来比较费时间折腾了.

第一步设计网站界面.

INDEX.PHP 代码如下.

CSS文件都是styles文件下 图片在 images下

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title> YOU TITLE</title>   
  6. <link rel="stylesheet" type="text/css" href="styles/1/basic.css"/>   
  7. <link rel="stylesheet" type="text/css" href="styles/1/index.css"/>   
  8. </head>   
  9.   
  10. <body>   
  11.   
  12. <div id="header">   
  13.    <h1> <a href="index.php">独家记忆PHP实战项目</a></h1>   
  14.    <ul>   
  15.    <li>首页</li>   
  16.    <li>注册</li>   
  17.    <li>登录</li>   
  18.    <li>个人中心</li>   
  19.    <li>风格</li>   
  20.    <li>管理</li>   
  21.    <li>退出</li>   
  22.    </ul>   
  23. </div>   
  24.   
  25. <div id="list">   
  26. <h2>帖子列表</h2>   
  27. </div>   
  28.   
  29.   
  30. <div id="user">   
  31. <h2>新增会员</h2>   
  32. </div>   
  33.   
  34. <div id="pics">   
  35. <h2>最新图片</h2>   
  36.   
  37. </div>   
  38. <div id="footer">   
  39. <p> 版权所有  翻版必究</p>   
  40. <p>本程序由<span>独家记忆</span>创作 源代码可以任意修改使用(c) www.mechao.cn</p>   
  41. </div>   
  42.   
  43. </body>   
  44. </html>

下面是CSS 两张表代码
basic.css

  1. @CHARSET "UTF-8";   
  2. *{   
  3.     padding:0;   
  4.     margin:0;   
  5. }   
  6. body{   
  7.     width:960px;   
  8.     margin:0 auto;   
  9.     background:#fff;   
  10.     //默认是灰色的,我们改成白色的.   
  11. }   
  12. ul{   
  13.     list-style-type:none;   
  14.     //不要列表符号.   
  15. }   
  16. h2{   
  17.     font-size:12px;   
  18.     background:#eee;   
  19.     height:20px;   
  20.     line-height:20px;   
  21.     text-indent:10px;   
  22.     //line-height 垂直居中   
  23.     //text-indent 缩进10个PX   
  24.        
  25. }   
  26. #header{   
  27.     width:auto;   
  28.     height:150px;   
  29.     border:2px solid #ccc;   
  30.     margin:10px 0;   
  31. }   
  32. #header h1{   
  33.     font-size:12px;   
  34.     width:120px;   
  35.     height:60px;   
  36.     background:url(../../images/logo.jpg) no-repeat;   
  37.     margin:40px 0 0 40px;   
  38.      //图片连接 然后不重复.   
  39.   
  40. }   
  41.   
  42. #header h1 a{   
  43.     width:120px;   
  44.     height:60px;   
  45.     display:block;   
  46.     text-indent:-9999px;   
  47.     //display:block; 超链接变成块   
  48.     //然后让超链接字体滚蛋.   
  49. }   
  50. #header ul{   
  51.        
  52.     float:rightright;   
  53.     margin20px 50px 0 0;   
  54. }   
  55. #header ul li{   
  56.     display:inline;   
  57.     //自动排为一行.   
  58. }   
  59. #footer{   
  60.     clear:both;   
  61.     width:auto;   
  62.     height:60px;   
  63.     text-align:center;   
  64.     padding:10px 0 0 0;   
  65. }   
  66. #footer p{   
  67.     font-size:12px;   
  68.     letter-spacing:1px;   
  69.     padding:5px 0 0 0;   
  70. }   
  71. #footer p span{   
  72.     color:#06f;   
  73. }   
  74.   
  75.   

PHP项目实战

index.css文件代码如下

  1. @CHARSET "UTF-8";   
  2. #list{   
  3.     width:600px;   
  4.     height:514px;   
  5.     border:2px solid #ccc;   
  6.     float:rightright;   
  7. }   
  8. #user{   
  9.     width:340px;   
  10.     height:250px;   
  11.     border:2px solid #ccc;   
  12.     float:left;   
  13.     margin:0 0 10px 0;   
  14. }   
  15. #pics  
  16.     {   
  17.     width:340px;   
  18.     height:250px;   
  19.     border:2px solid #ccc;   
  20.     float:left;    
  21.     }  

效果图

PHP是实战

×
腾讯微博