Blogger Information
Blog 37
fans 2
comment 0
visits 26492
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
0121-仿电影网站用php动态填充数据
世纪天城
Original
774 people have browsed it

静态页面和动态页面有什么区别

网页可以分为静态页和动态页两种,两种虽然呈现的页面可以做到同样的效果,但原理却不同。

1.静态页面

所谓静态页,就是网页一旦生成,里面的内容就不会再改变,这里的静态不是静止不动,静态页也包括一些能动的部分,如GIF动画。

2.动态页面

动态网页取决于由用户提供的参数,并随着用户的访问实时读取存储在数据库中的数据中创建页面。也就是说,动态页并没有以文件的形式存储到web服务器上。
动态网页的网页文件中除了HTML标记以外,还包括一些特定功能的程序代码,这些代码可以使得浏览器和服务器可以交互,所以服务器端根据客户的不同请求动态的生成网页内容。也就是说动态网页相对于静态网页来说,页面代码虽然没有变,但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变的。

仿电影网站用php动态填充数据

1.数据配置

config.php文件

  1. <?php
  2. return[
  3. // head
  4. 'title' =>'仿电影网站首页',
  5. 'keywords' => '国产,欧美,日韩',
  6. 'description' => '为你搜集全网最新最好看的电影',
  7. // 科幻
  8. 'nav' => ['喜剧','爱情','动作','恐怖','科幻'],
  9. 'tag' => ['封神三部曲','急先锋','唐人街探案','成龙','周星驰'],
  10. 'data' => [
  11. ['id' => '1', 'name' => '《侍神令》生死与共预告','img' => '1php/images/1.png'],
  12. ['id' => '2', 'name' => '《复身犯》首支预告','img' => '1php/images/2.png'],
  13. ['id' => '3', 'name' => '《唐探3》终极预告','img' => '1php/images/3.png'],
  14. ['id' => '4', 'name' => '《涉过愤怒的海》灼心升级','img' => '1php/images/4.png'],
  15. ['id' => '5', 'name' => '《姜武张颂文《扫黑·决战》','img' => '1php/images/5.png'],
  16. ['id' => '6', 'name' => '《吉祥如意》曝主题曲','img' => '1php/images/6.png']
  17. ]
  18. ];

index.php文件

  1. <?php
  2. $config = include_once './1php/config.php';
  3. ?>
  4. <!DOCTYPE html>
  5. <html lang="en">
  6. <head>
  7. <meta charset="UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  10. <!-- 关键字 -->
  11. <meta name="" content="<?= $config['keywords'] ?>">
  12. <!-- 描述 -->
  13. <meta name="" content="<?= $config['description'] ?>">
  14. <!-- 标题 -->
  15. <title><?= $config['title'] ?></title>
  16. </head>
  17. <style>
  18. *{margin: 0; padding: 0; box-sizing: border-box;}
  19. html{font-size: 16px}
  20. a{text-decoration: none; color: #000;}
  21. /* li{list-style: none;} */
  22. .nav>ul{background: #ccc; display: flex;}
  23. .nav>ul>li,.content>.main>ul>li{padding: 1em; list-style: none;}
  24. .nav>ul>li>a:hover{color: #ef5b9c;}
  25. .nav{margin-bottom: 1em;}
  26. .content{ display: grid; grid-template-columns: 25em 1fr;
  27. grid-template-rows: 1fr; gap:1em;}
  28. .content>.main,.content>.aside{ border: #ccc 1px solid; padding: 1em;}
  29. .content>.aside>h3,.content>.main>h3{border-bottom: #ccc 1px solid;margin-bottom: 1em}
  30. .content>.aside>ol>li{margin-left: 1em;}
  31. .content>.main{display: grid; grid-template-columns: repeat(3,1fr);grid-template-rows: 1fr; gap:1em}
  32. .content>.main>div>img{ width: 100%;border: none;}
  33. </style>
  34. <body>
  35. <header class="nav">
  36. <ul>
  37. <?php foreach($config['nav'] as $row): ?>
  38. <li><a href=""><?= $row ?></a></li>
  39. <?php endforeach ?>
  40. </ul>
  41. </header>
  42. <div class="content">
  43. <div class="aside">
  44. <h3>热门标签</h3>
  45. <ol>
  46. <?php foreach($config['tag'] as $row): ?>
  47. <li><a href=""><?= $row ?></a></li>
  48. <?php endforeach ?>
  49. </ol>
  50. </div>
  51. <div class="main">
  52. <!-- <h3>热门预告</h3> -->
  53. <?php foreach($config['data'] as $row): ?>
  54. <div>
  55. <img src="<?= $row['img'] ?>" alt="">
  56. <a href=""><?= $row['name'] ?></a>
  57. </div>
  58. <?php endforeach ?>
  59. </div>
  60. </div>
  61. </body>
  62. </html>

效果图:

Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post