登录  /  注册
博主信息
博文 26
粉丝 0
评论 2
访问量 33943
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
景点介绍动态填充网站(0110PHP开发)
小辰
原创
600人浏览过

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. }
  13. $seckillGoods = getSeckillGoods($goods, 3);
  14. ?>
  15. <!-- 轮播图 -->
  16. <main>
  17. <div class="slider">
  18. <a href=""><img src="static/img/1.jpg" alt=""></a>
  19. </div>
  20. <div class="goods">
  21. <div class="title">
  22. <a href="">国内风景</a>
  23. </div>
  24. <div class="content">
  25. <?php foreach ($seckillGoods as $good) : ?>
  26. <div>
  27. <a href="<?php echo $good['url'] ?>"><img src="<?php echo STATIC_PATH . $good['pic'] ?>" alt=""></a>
  28. <a href=""><?php echo $good['name'] ?></a>
  29. <span>&yen;<?php echo $good['price'] ?></span>
  30. <button>立即购票</button>
  31. </div>
  32. <?php endforeach ?>
  33. </div>
  34. </div>
  35. <?php foreach ($categories as $category) : ?>
  36. <div class="goods">
  37. <div class="title">
  38. <a href=""><?php echo $category['name'] ?></a>
  39. </div>
  40. <div class="content">
  41. <?php foreach ($goods as $good) : ?>
  42. <!-- 只输出与当前栏目id相等的商品信息,只输出属于当前栏目的商品 -->
  43. <?php if ($category['id'] === $good['cid']) : ?>
  44. <div>
  45. <a href="<?php echo $good['url'] ?>"><img src="<?php echo STATIC_PATH . $good['pic'] ?>" alt=""></a>
  46. <a href=""><?php echo $good['name'] ?></a>
  47. <span>&yen;<?php echo $good['price'] ?></span>
  48. <button>马上购票</button>
  49. </div>
  50. <?php endif ?>
  51. <?php endforeach ?>
  52. </div>
  53. </div>
  54. <?php endforeach ?>
  55. </main>
  56. </body>
  57. </html>

3.通用头部代码

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

4.css样式代码

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

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

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

6.图片详情页面代码

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

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

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

8.小结

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

需要完整资源联系:qq1446582191

批改老师:天蓬老师天蓬老师

批改状态:合格

老师批语:先不要上来就写代码, 先在纸上画个简单流程图, 想好需要哪些页面, 哪些素材, 哪些数据, 再动手就知道要做什么了
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学