Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 景点介绍动态填充网站（0110PHP开发）
Blogger Information
Blog 26
fans 0
comment 2
visits 35051
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
景点介绍动态填充网站（0110PHP开发）
小辰
Original
624 people have browsed it

1.先来老夫的效果图



2.主页面代码

  1. <?php include __DIR__ . '/inc/public_header.php'  ?>
  2. <?php
  3. // 获取id随机显示三个景色
  4.     $id = $_GET['id'];
  5.     function getSeckillGoods($goods, $num)
  6. {
  7.     $seckillGoodsKeys = array_rand($goods, $num);
  8.     foreach ($seckillGoodsKeys as $key) {
  9.         $seckillGoods[] = $goods[$key];
  10.     }
  11.     return $seckillGoods;
  12. }
  14.     $seckillGoods = getSeckillGoods($goods, 3);
  17. ?>
  19. <!-- 轮播图 -->
  20. <main>
  21.     <div class="slider">
  22.                 <a href=""><img src="static/img/1.jpg" alt=""></a>
  23.     </div>
  24.     <div class="goods">
  25.         <div class="title">
  26.             <a href="">国内风景</a>
  27.         </div>
  28.         <div class="content">
  29.             <?php foreach ($seckillGoods as $good) : ?>
  30.                 <div>
  31.                     <a href="<?php echo $good['url'] ?>"><img src="<?php echo STATIC_PATH . $good['pic'] ?>" alt=""></a>
  32.                     <a href=""><?php echo $good['name'] ?></a>
  33.                     <span>&yen;<?php echo $good['price'] ?></span>
  34.                     <button>立即购票</button>
  35.                 </div>
  36.             <?php endforeach ?>
  37.         </div>
  38.     </div>
  41.     <?php foreach ($categories as $category) :  ?>
  42.         <div class="goods">
  43.             <div class="title">
  44.                 <a href=""><?php echo $category['name'] ?></a>
  45.             </div>
  46.             <div class="content">
  47.                 <?php foreach ($goods as $good) : ?>
  48.                     <!-- 只输出与当前栏目id相等的商品信息,只输出属于当前栏目的商品 -->
  49.                     <?php if ($category['id'] === $good['cid']) :  ?>
  50.                         <div>
  51.                             <a href="<?php echo $good['url'] ?>"><img src="<?php echo STATIC_PATH . $good['pic'] ?>" alt=""></a>
  52.                             <a href=""><?php echo $good['name'] ?></a>
  53.                             <span>&yen;<?php echo $good['price'] ?></span>
  54.                             <button>马上购票</button>
  55.                         </div>
  56.                     <?php endif ?>
  57.                 <?php endforeach ?>
  59.             </div>
  60.         </div>
  61.     <?php endforeach ?>
  62. </main>
  63.     </body>
  64.     </html>

3.通用头部代码

  1. <?php include 'config.php' ?>
  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <!--    当前文档要用到阿里字体图标-->
  8.     <link rel="stylesheet" href="static/font/iconfont.css">
  9.     <link rel="stylesheet" href="static/css/style.css">
  10.     <title>美景展示首页</title>
  11. </head>
  13. <body>
  14.     <!--公共页眉-->
  15.     <nav class="public-header">
  16.         <a href="index.php">网站首页</a>
  17.         <a href="seckill.php">国内美景</a>
  18.         <!-- <a href="">国外美景</a>
  19.         <a href="">国内外美景</a>
  20.         <a href="">岛国美景</a> -->
  21.         <?php foreach ($categories as $category) :  ?>
  22.             <a href="<?php echo $category['url'] ?>"><?php echo $category['name'] ?>  </a>
  23.         <?php endforeach ?>
  24.         <span>
  25.             <a href=""><i class="iconfont icon-huiyuan2"></i>登录</a>
  26.             <a href="">免费注册</a>
  27.         </span>
  28.     </nav>

4.css样式代码

  1. @import "reset.css";
  3. /*全部顶部导航区*/
  4. .public-header {
  5.     height: 44px;
  6.     background-color: black;
  7.     /*导航链接不要太靠边*/
  8.     padding: 0 20px;
  10.     /*弹性布局*/
  11.     display: flex;
  12.     /*水平排列且不换行*/
  13.     flex-flow: row nowrap;
  14. }
  16. /*设置链接样式*/
  17. .public-header a {
  18.     /*垂直居中*/
  19.     line-height: 44px;
  20.     padding: 0 10px;
  21.     color: #cccccc;
  22. }
  24. /*鼠标悬停链接的样式*/
  25. .public-header > a:hover {
  26.     background-color: #fff;
  27.     color: black;
  28. }
  30. /*最后二个链接:登录,注册居右对齐*/
  31. .public-header > span{
  32.     margin-left: auto;
  33. }
  35. /*设置字体图标*/
  36. .public-header > span i {
  37.     /*字体图标大小必须用font-size,不支持width,height*/
  38.     font-size: 16px;
  39.     /*字体图标可使用color属性设置前景色*/
  40.     color: #ccc;
  41.     padding-right: 10px;
  42. }
  44. .slider a> img {
  45.     margin: -12px 5px 10px 5px;
  46.     margin-left: 5px;
  47.     width: 580px;
  48.     height: 300px;
  49. }
  50. .slider a> img:last-of-type:hover {
  51.     box-shadow: 0 0 8px #888888;
  52. }
  54. body > main {
  55.     margin: 20px 0;
  56.     flex: 1;
  58.     display: flex;
  59.     flex-direction: column;
  61.      /* 实现头尾固定, 中间滚动 */
  62.      overflow-y: scroll;
  63. }
  65. body > main > .goods {
  66.     margin: 20px 0;
  67.     display: flex;
  68.     flex-direction: column;
  69. }
  70. body > main > .goods > .title {
  71.     align-self: center;
  73.     border-bottom: 3px solid lightcoral;
  74.     margin: 10px 0;
  75. }
  76. body > main > .goods > .title a {
  77.     font-size: 23px;
  78.     text-decoration: none;
  79. }
  80. body > main > .goods > .content {
  81.     display: grid;
  82.     grid-template-columns: repeat(3, 160px);
  83.     grid-gap: 20px;
  84.     place-content: start center;
  86. }
  87. body > main a {
  88.     font-size: 13px;
  89.     text-decoration: none;
  90. }
  92. body > main div span {
  93.     color: red;
  94. }
  95. /* 所有图片样式 */
  96. main img {
  97.     width: 160px;
  98.     height: 160px; 
  99. }
  100. main img:hover {
  101.     border: 1px solid #aaa;
  102.     box-sizing: border-box;
  103. }
  105. /* 购买按钮 */
  106. body > main button {
  107.     font-size: 13px;
  108.     width: 60px;
  109.     height: 20px;
  110.     background-color: blue;
  111.     color: white;
  112.     border: none;
  113.     outline:none;
  114.     border-radius: 10px;
  115.     margin-left: 0px;
  116. }
  117. body > main button:hover {
  118.     background-color: lightcoral;
  119.     cursor: pointer;
  120.     box-shadow: 0 0 3px #888;
  121. }

5.实现随机获取图片代码

  1. <?php include __DIR__ . '/inc/public_header.php'  ?>
  3. <?php
  4. // 1. 获取到商品数组中的随机的6个商品的键名
  5. $seckillGoodsKeys = array_rand($goods, 6);
  7. // 2. 根据这个6个键名,再获取到具体的6个需要秒杀的商品
  8. foreach ($seckillGoodsKeys as $key) {
  9.     $seckillGoods[] = $goods[$key];
  10. }
  11. // print_r($seckillGoods);
  12. ?>
  15. <main>
  16.     <div class="goods">
  17.         <div class="title">
  18.             <a href="">国内美景</a>
  19.         </div>
  20.         <div class="content">
  21.             <?php foreach ($seckillGoods as $good) : ?>
  22.                 <div>
  23.                     <a href="<?php echo $good['url'] ?>"><img src="<?php echo STATIC_PATH . $good['pic'] ?>" alt=""></a>
  24.                     <a href=""><?php echo $good['name'] ?></a>
  25.                     <span>&yen;<?php echo $good['price'] ?></span>
  26.                     <button>马上购买</button>
  27.                 </div>
  28.             <?php endforeach ?>
  29.         </div>
  30.     </div>
  34. </main>

6.图片详情页面代码

  1. <?php include __DIR__ . '/inc/public_header.php'  ?>
  3. <?php
  4. // 1. 获取栏目
  5. $cid = $_GET['cid'];
  7. // 获取栏目名称
  8. function getCateName($cid, $categories) 
  9. {
  10.     foreach ($categories as $category) {
  11.         // 使用intval(),将栏目id数值型字符串强制临时转不整数
  12.         if ($category['id'] === intval($cid)) {
  13.             $cateName = $category['name'];
  14.         }
  15.     }
  17.     return $cateName;
  18. }
  19. $cateName = getCateName($cid, $categories);
  21. // 获取该栏目所有商品
  22. function getCateGoods($cid, $goods)
  23. {
  24.     foreach ($goods as $good) {
  25.         if ($good['cid'] === intval($cid)) {
  26.             $currentGoods[] = $good;
  27.         }
  28.     }
  30.     return $currentGoods;
  31. }
  33. $currentGoods = getCateGoods($cid, $goods);
  34. ?>
  37. <main>
  38. <!-- 当前只显示一个频道/栏目的信息, 不再需要双重循环 -->
  40.         <div class="goods">
  41.             <div class="title">
  42.                 <a href=""><?php echo $cateName ?></a>
  43.             </div>
  44.             <div class="content">
  45.                 <?php foreach ($currentGoods as $good) : ?>
  47.                         <div>
  48.                             <a href="<?php echo $good['url'] ?>"><img src="<?php echo STATIC_PATH . $good['pic'] ?>" alt=""></a>
  49.                             <a href=""><?php echo $good['name'] ?></a>
  50.                             <span>&yen;<?php echo $good['price'] ?></span>
  51.                             <button>购买</button>
  52.                         </div>
  54.                 <?php endforeach ?>
  56.             </div>
  57.         </div>
  59. </main>

7.主要信息设置页部分代码

  1. <?php
  3. // 网站配置
  4. $siteTitle = '迷你商城';
  6. // 图片路径
  7. const STATIC_PATH = 'static/';
  9. // 栏目导航
  10. $categories = [
  11.     // ['id' => 1, 'name' => '网站首页', 'url' => 'list.php?cid=1'],
  12.     // ['id' => 2, 'name' => '国内美景', 'url' => 'list.php?cid=2'],
  13.     ['id' => 3, 'name' => '国外美景', 'url' => 'list.php?cid=3'],
  14.     ['id' => 4, 'name' => '国内外美景', 'url' => 'list.php?cid=4'],
  15.     ['id' => 5, 'name' => '岛国美景', 'url' => 'list.php?cid=5'],
  16. ];
  18. // 模块导航
  20. // 商品信息
  21. $goods = [
  22.     [
  23.         'id' => 1,
  24.         'name' => '国内美景1',
  25.         'pic'=> 'img/1.jpg',
  26.         'url'=> 'detail.php?id=1',
  27.         'price'=>99,
  28.         'detail'=>'东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1东方美女1',
  29.         'cid' => 1,
  30.     ],
  31.     [
  32.         'id' => 2,
  33.         'name' => '国内美景2',
  34.         'pic' => 'img/2.jpg',
  35.         'url' => 'detail.php?id=2',
  36.         'price' => 99,
  37.         'detail' => '东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2东方美女2',
  38.         'cid' => 1,
  39.     ],
  40.     ];

8.小结

做这个可以动态获取信息，也就是简单的秒杀的时候，还是有点晕，不知道从何开始，哪个文件表示什么，这个函数又是啥意思做，就是不知道从何下手比较好，后来通过分析，做这个页面的话，我是先把首页和css样式弄好，再把config文件设置好，最后部分没什么先后，刚就好了。

需要完整资源联系：qq1446582191

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