search

博客列表 >景点介绍动态填充网站（0110PHP开发）

景点介绍动态填充网站（0110PHP开发）

小辰
小辰原创
2020年01月14日 12:37:03625浏览

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

上一条：宝塔的数据库 ftp 等工具无法连接 ，如何解决？下一条：PHP filter 过滤器知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多