search

博客列表 >1月10-12日作业写了一个汽车宣传站的移动端并进行了PHP站点模块化

1月10-12日作业写了一个汽车宣传站的移动端并进行了PHP站点模块化

阿喜
阿喜原创
2020年01月15日 10:55:20596浏览

1月10-12日作业写个汽车产品移动端站并进行了PHP站点模块化

写了这一个移动端有很多坑，有一些解决了，有一些还没有解决。
如：vh这个单位在不同的浏览器上面就会出错。后面又换成了PX单位。
站点分上中下三部分:header ,main, footer三部分。如将中间main自动flex为1可上下不固定。期待老师解决。还有字体在电脑端还行，在移动端看是没有办法看。
先上一下布局的效果图：

上一下首页index.html部分的布局代码。列表页与首页一样，产品详情页我就偷了一个懒。就是将首页的CSS代码部分，div标签将：“images-goods” 改为“images-details” ，然后增加一个images-details的样式。觉得用flex布局太方便了。几行代码就出来了一个产品详情页。

首页布局index.html代码如下：

  1. <!--主体-->
  2. <main>
  3.     <div class="main-part">
  4.         <section>
  5.             <h3><span>促销区</span></h3>
  6.             <article>
  7.                 <div class="images-goods">
  8.                     <div>
  9.                         <a href=""><img height="120" src="images/SUV/01.jpg"></a>
  10.                         <span><i>¥:</i><i>210000.00元</i></span>
  11.                         <span><i>型号:</i><i>7300LI</i></span>
  12.                         <span>女图片介绍一下美女美绍</span>
  13.                     </div>
  14.                 </div>
  15.                 <div class="images-goods">
  16.                     <div>
  17.                         <a href=""><img height="120" src="images/SUV/02.jpg" ></a>
  18.                         <span><i>¥:</i><i>210000.00元</i></span>
  19.                         <span><i>型号:</i><i>7300LI</i></span>
  20.                         <span>女图片介绍一下美女美绍</span>
  21.                     </div>
  22.                 </div>
  23.                 <div class="images-goods">
  24.                     <div>
  25.                         <a href=""><img height="120" src="images/SUV/04.jpg"></a>
  26.                         <span><i>¥:</i><i>210000.00元</i></span>
  27.                         <span><i>型号:</i><i>7300LI</i></span>
  28.                         <span>女图片介绍一下美女美绍</span>
  29.                     </div>
  30.                 </div>
  31.                 <div class="images-goods">
  32.                     <div>
  33.                         <a href=""><img height="120" src="images/SUV/05.jpg" ></a>
  34.                         <span><i>¥:</i><i>210000.00元</i></span>
  35.                         <span><i>型号:</i><i>7300LI</i></span>
  36.                         <span>女图片介绍一下美女美绍</span>
  37.                     </div>
  38.                 </div>
  39.                 <div class="images-goods">
  40.                     <div>
  41.                         <a href=""><img height="120" src="images/SUV/06.jpg" ></a>
  42.                         <span><i>¥:</i><i>210000.00元</i></span>
  43.                         <span><i>型号:</i><i>7300LI</i></span>
  44.                         <span>女图片介绍一下美女美绍</span>
  45.                     </div>
  46.                 </div>
  47.                 <div class="images-goods">
  48.                     <div>
  49.                         <a href=""><img height="120" src="images/SUV/01.jpg" ></a>
  50.                         <span><i>¥:</i><i>210000.00元</i></span>
  51.                         <span><i>型号:</i><i>7300LI</i></span>
  52.                         <span>女图片介绍一下美女美绍</span>
  53.                     </div>
  54.                 </div>
  55.             </article>
  56.         </section>
  57.         <section>
  58.             <h3><span>SUV专区</span></h3>
  59.             <article>
  60.                 <div class="images-goods">
  61.                     <div>
  62.                         <a href=""><img height="120" src="images/SUV/01.jpg"></a>
  63.                         <span><i>¥:</i><i>210000.00元</i></span>
  64.                         <span><i>型号:</i><i>7300LI</i></span>
  65.                         <span>女图片介绍一下美女美绍</span>
  66.                     </div>
  67.                 </div>
  68.                 <div class="images-goods">
  69.                     <div>
  70.                         <a href=""><img height="120" src="images/SUV/02.jpg" ></a>
  71.                         <span><i>¥:</i><i>210000.00元</i></span>
  72.                         <span><i>型号:</i><i>7300LI</i></span>
  73.                         <span>女图片介绍一下美女美绍</span>
  74.                     </div>
  75.                 </div>
  76.                 <div class="images-goods">
  77.                     <div>
  78.                         <a href=""><img height="120" src="images/SUV/04.jpg"></a>
  79.                         <span><i>¥:</i><i>210000.00元</i></span>
  80.                         <span><i>型号:</i><i>7300LI</i></span>
  81.                         <span>女图片介绍一下美女美绍</span>
  82.                     </div>
  83.                 </div>
  84.                 <div class="images-goods">
  85.                     <div>
  86.                         <a href=""><img height="120" src="images/SUV/05.jpg" ></a>
  87.                         <span><i>¥:</i><i>210000.00元</i></span>
  88.                         <span><i>型号:</i><i>7300LI</i></span>
  89.                         <span>女图片介绍一下美女美绍</span>
  90.                     </div>
  91.                 </div>
  92.                 <div class="images-goods">
  93.                     <div>
  94.                         <a href=""><img height="120" src="images/SUV/06.jpg" ></a>
  95.                         <span><i>¥:</i><i>210000.00元</i></span>
  96.                         <span><i>型号:</i><i>7300LI</i></span>
  97.                         <span>女图片介绍一下美女美绍</span>
  98.                     </div>
  99.                 </div>
  100.                 <div class="images-goods">
  101.                     <div>
  102.                         <a href=""><img height="120" src="images/SUV/01.jpg" ></a>
  103.                         <span><i>¥:</i><i>210000.00元</i></span>
  104.                         <span><i>型号:</i><i>7300LI</i></span>
  105.                         <span>女图片介绍一下美女美绍</span>
  106.                     </div>
  107.                 </div>
  108.             </article>
  109.         </section>
  110.         <section>
  111.             <h3><span>轿车专区</span></h3>
  112.             <article>
  113.                 <div class="images-goods">
  114.                     <div>
  115.                         <a href=""><img height="120" src="images/car/01.jpg"  ></a>
  116.                         <span><i>¥:</i><i>210000.00元</i></span>
  117.                         <span><i>型号:</i><i>7300LI</i></span>
  118.                         <span>女图片介绍一下美女美绍</span>
  119.                     </div>
  120.                 </div>
  121.                 <div class="images-goods">
  122.                     <div>
  123.                         <a href=""><img height="120" src="images/car/02.jpg"></a>
  124.                         <span><i>¥:</i><i>210000.00元</i></span>
  125.                         <span><i>型号:</i><i>7300LI</i></span>
  126.                         <span>女图片介绍一下美女美绍</span>
  127.                     </div>
  128.                 </div>
  129.                 <div class="images-goods">
  130.                     <div>
  131.                         <a href=""><img height="120" src="images/car/03.jpg" ></a>
  132.                         <span><i>¥:</i><i>210000.00元</i></span>
  133.                         <span><i>型号:</i><i>7300LI</i></span>
  134.                         <span>女图片介绍一下美女美绍</span>
  135.                     </div>
  136.                 </div>
  137.                 <div class="images-goods">
  138.                     <div>
  139.                         <a href=""><img height="120" src="images/car/04.jpg"  ></a>
  140.                         <span><i>¥:</i><i>210000.00元</i></span>
  141.                         <span><i>型号:</i><i>7300LI</i></span>
  142.                         <span>女图片介绍一下美女美绍</span>
  143.                     </div>
  144.                 </div>
  145.                 <div class="images-goods">
  146.                     <div>
  147.                         <a href=""><img height="120" src="images/car/05.jpg"  ></a>
  148.                         <span><i>¥:</i><i>210000.00元</i></span>
  149.                         <span><i>型号:</i><i>7300LI</i></span>
  150.                         <span>女图片介绍一下美女美绍</span>
  151.                     </div>
  152.                 </div>
  153.                 <div class="images-goods">
  154.                     <div>
  155.                         <a href=""><img height="120" src="images/car/06.jpg"  ></a>
  156.                         <span><i>¥:</i><i>210000.00元</i></span>
  157.                         <span><i>型号:</i><i>7300LI</i></span>
  158.                         <span>女图片介绍一下美女美绍</span>
  159.                     </div>
  160.                 </div>
  161.             </article>
  162.         </section>
  163.         <section>
  164.             <h3><span>轿车专区</span></h3>
  165.             <article>
  166.                 <div class="images-goods">
  167.                     <div>
  168.                         <a href=""><img height="120" src="images/car/01.jpg"  ></a>
  169.                         <span><i>¥:</i><i>210000.00元</i></span>
  170.                         <span><i>型号:</i><i>7300LI</i></span>
  171.                         <span>女图片介绍一下美女美绍</span>
  172.                     </div>
  173.                 </div>
  174.                 <div class="images-goods">
  175.                     <div>
  176.                         <a href=""><img height="120" src="images/car/02.jpg"></a>
  177.                         <span><i>¥:</i><i>210000.00元</i></span>
  178.                         <span><i>型号:</i><i>7300LI</i></span>
  179.                         <span>女图片介绍一下美女美绍</span>
  180.                     </div>
  181.                 </div>
  182.                 <div class="images-goods">
  183.                     <div>
  184.                         <a href=""><img height="120" src="images/car/03.jpg" ></a>
  185.                         <span><i>¥:</i><i>210000.00元</i></span>
  186.                         <span><i>型号:</i><i>7300LI</i></span>
  187.                         <span>女图片介绍一下美女美绍</span>
  188.                     </div>
  189.                 </div>
  190.                 <div class="images-goods">
  191.                     <div>
  192.                         <a href=""><img height="120" src="images/car/04.jpg"  ></a>
  193.                         <span><i>¥:</i><i>210000.00元</i></span>
  194.                         <span><i>型号:</i><i>7300LI</i></span>
  195.                         <span>女图片介绍一下美女美绍</span>
  196.                     </div>
  197.                 </div>
  198.                 <div class="images-goods">
  199.                     <div>
  200.                         <a href=""><img height="120" src="images/car/05.jpg"  ></a>
  201.                         <span><i>¥:</i><i>210000.00元</i></span>
  202.                         <span><i>型号:</i><i>7300LI</i></span>
  203.                         <span>女图片介绍一下美女美绍</span>
  204.                     </div>
  205.                 </div>
  206.                 <div class="images-goods">
  207.                     <div>
  208.                         <a href=""><img height="120" src="images/car/06.jpg"  ></a>
  209.                         <span><i>¥:</i><i>210000.00元</i></span>
  210.                         <span><i>型号:</i><i>7300LI</i></span>
  211.                         <span>女图片介绍一下美女美绍</span>
  212.                     </div>
  213.                 </div>
  214.             </article>
  215.         </section>
  216.     </div>
  217. </main>
  218. <?php inc
  219. </body>
  220. </html>

全站CSS代码如下：

  1. /*引进矢量标*/
  2. @import url(../ico-css/iconfont.css);
  4. /*初始化*/
  5. * {
  6.     margin: 0 auto;
  7.     padding: 0;
  8.     /* outline: 1px dashed; */
  9.     -webkit-tap-highlight-color: transparent;
  10. }
  12. img {
  13.     width: 100%;
  14. }
  16. a {
  17.     font-size: 14px;
  18.     text-decoration: none;
  19. }
  21. ul li {
  22.     margin: 0;
  23.     padding: 0;
  24. }
  26. li {
  27.     list-style: none;
  28. }
  30. /*头部样式*/
  31. body {
  32.     min-width: 320px;
  33.     max-width: 768px;
  34.     margin: 0 auto;
  35.     position: relative;
  36.     flex-direction: column;
  37.     background-color: #edeff0;
  38.     overflow-x: hidden;
  39.     font-size: 16px;
  40.     color: gray;
  41.     width: auto;
  42.     height: auto;
  43.     display: flex;
  44.     box-sizing: border-box;
  45.     vertical-align: top;
  46.     -webkit-overflow-scrolling: touch;
  48. }
  49. /* 上导航栏 */
  50. header {
  51.     vertical-align: top;
  52.     height: 45px;
  53.     width: 100%;
  54.     background-color: #444444;
  55.     color: #ffffff;
  56.     display: flex;
  57.     box-sizing: border-box;
  58.     flex-direction: row;
  59.     justify-content: space-between;
  60.     align-items: center;
  61. }
  63. body header a {
  64.     height: 45px;
  65.     font-size: 16px;
  66.     line-height:45px;
  67.     align-content: center;
  68.     color: #ffffff;
  69.     letter-spacing: 8px
  70. }
  72. body header a:hover {
  73.     background: white;
  74.     color: black;
  75. }
  76. /* 底部导航栏样式 */
  77. footer {
  78.     height: 60px;
  79.     width: 100%;
  80.     background-color: #444444;
  81.     color: #ffffff;
  82. }
  84. footer ul {
  85.     height: 60px;
  86.     display: flex;
  87.     box-sizing: border-box;
  88.     flex-flow: row nowrap;
  89.     justify-content: space-between;
  90. }
  92. footer ul li {
  93.     flex: 1;
  94. }
  95. footer ul li a span {
  96.     display: flex;
  97.     height: 60px;
  98.     flex-flow: column wrap;
  99.     width: 50%;
  100.     letter-spacing: 5px
  101. }
  102. footer ul li a span i:first-of-type {
  103.     color: white;
  104.     font-size: 25px;
  105.     padding: 5px 0 2px 0;
  106.     font-style: normal;
  107. }
  109. footer ul li a span i:last-of-type {
  110.     color: white;
  111.     font-size: 15px;
  112.     font-style: normal;
  113. }
  115. /*首页例表页主体区*/
  116. body>main {
  117.     display: flex;
  118.     flex: 1;
  119.     flex-direction: column;
  120.     width: 100%;
  121.     overflow-y: scroll;
  122. }
  124. body>main>.main-part {
  125.     width: 100%;
  126.     margin-top: 5px;
  127.     margin-bottom: 20px;
  129. }
  130. body>main>.main-part>section>h3{
  131.     margin-bottom: 5px;
  132.     text-align: center;
  133. }
  134. body>main>.main-part>section>h3>span {
  135.     font-size: 16px;
  136.     color: red;
  137.     text-align: center;
  138.     border-bottom: 2px solid red;
  139.     font-weight: bolder;
  140. }
  142. body>main>.main-part>section>article {
  143.     display: flex;
  144.     flex-flow: row wrap;
  145.     margin-top: 5px;
  146. }
  147. body>main>.main-part>section>article>.images-goods{
  148.     display: flex;
  149.     flex-flow:row wrap;
  150.     width: 33.3%;
  151.     justify-content: space-evenly;
  152.     align-items: center;
  153. }
  154. body>main>.main-part>section>article>.images-goods>div{
  155.     display: flex;
  156.     flex-flow: column wrap;
  157.     justify-content:space-evenly;
  158.     align-content: space-between;
  159.     width: 90%;
  160.     margin: 10px 5px;
  161.     border-radius: 5px;
  162.     background-color:rgb(245, 245, 245);
  163. }
  164. body>main>.main-part>section>article>.images-goods>div:hover{
  165.     box-shadow: 0 0 5px silver;
  166. }
  167. body>main>.main-part>section>article>.images-goods>div img{
  168.     border-radius: 5px 5px 0 0;
  169.     height: 150px;
  170. }
  171. body>main>.main-part>section>article>.images-goods>div>span{
  172.     width: 100%;
  173.     height: 25px;
  174.     line-height: 25px;
  175.     display: flex;
  176.     box-sizing: border-box;
  177.     padding: 0 10px;
  178.     overflow: hidden;
  179.     white-space: nowrap;
  180.     text-overflow:ellipsis;
  181. }
  182. body>main>.main-part>section>article>.images-goods>div>span>i{
  183.     height: 25px;
  184.     line-height: 25px;
  185.     display: block;
  186.     box-sizing: border-box;
  187.     overflow: hidden;
  188.     text-overflow:ellipsis;
  189.     font-style: normal;
  190.  }
  191.   body>main>.main-part>section>article>.images-goods>div>span>i:first-of-type {
  192.     width: 30%;
  193.     color: tomato;
  194.     height: 25px;
  195.     text-align: right;
  197. }
  198. body>main>.main-part>section>article>.images-goods>div>span>i:last-of-type {
  199.     width:70%;
  200.     text-align:left;
  201. }
  202. /* 产品详情页样式 */
  203. body>main>.main-part>section>article>.images-details{
  204.     display: flex;
  205.     flex: 1;
  206.     width: 100%;
  207.     justify-content: space-evenly;
  208.     align-items: center;
  209. }
  210. body>main>.main-part>section>article>.images-details>div{
  211.     display: flex;
  212.     flex: 1;
  213.     width: 100%;
  214.     flex-flow: column wrap;
  215.     justify-content: space-evenly;
  216.     align-items:left;
  217. }
  218. body>main>.main-part>section>article>.images-details>div img{
  219.     border-radius: 5px 5px 0 0;
  220.     height: 300px;
  221. }
  222. body>main>.main-part>section>article>.images-details>div span{
  223. width: 100%;
  224. height: auto;
  225. line-height: 25px;
  226. display: flex;
  227. box-sizing: border-box;
  228. padding: 0 10px;
  229. }
  230. body>main>.main-part>section>article>.images-details>div>span i:first-of-type {
  231.     width: 30%;
  232.     color: tomato;
  233.     height: 25px;
  234.     text-align: right;
  236. }
  237. body>main>.main-part>section>article>.images-details>div>span i:last-of-type {
  238.     width:70%;
  239.     text-align:left;
  240. }

  1. 第二步将站点进行PHP站点模块化练习。
    2.1将公共部分的头部public_header.php与尾部public_footer.php进行分离。
    2.2现在还没有数据库，就将站点的常量以及网站数据做一个数组写在：config.php中。
    先来看一下首页效果图吧：

    再看只改了几行代码的产品详情图：

    现在看一下代码部分吧：
    公共头部public_header.php代码如下：

    1. <!-- 引入网站配置 -->
    2. <?php include 'config.php' ?>
    3. <!DOCTYPE html>
    4. <html lang="en">
    5. <head>
    6.  <meta charset="UTF-8">
    7.  <title><?php echo $siteTitle?></title>
    8.  <meta name="apple一mobile一web一app一capable" content="yes">
    9.  <link rel="stylesheet" href="css/index.css">
    10. </head>
    11. <body>
    12. <!--头部-->
    13. <header>
    14.  <a href="index.php">首页</a>
    15.  <a href="sales.php">促销</a>
    16.  <?php foreach ($categories as $category) : ?>
    17.  <a href="<?php echo $category['url'] ?>"><?php echo $category['name'] ?></a>
    18.  <?php endforeach ?>
    19. </header>

    公共尾部public_footer.php如下：

    1. <!--脚部-->
    2. <footer>
    3.  <ul>
    4.      <li>
    5.          <a href="#"><span> <i class="iconfont icon-cheliangguanli"></i><i>SUV</i></span></a>
    6.      </li>
    7.      <li>
    8.          <a href="#"><span> <i class="iconfont icon-cheliang-"></i><i>轿车</i></span></a>
    9.      </li>
    10.      <li>
    11.          <a href="#"><span> <i class="iconfont icon-shiyongshouce"></i><i>手册</i></span></a>
    12.      </li>
    13.      <li>
    14.          <a href="#"><span> <i class="iconfont icon-huiyuan"></i><i>会员</i></span></a>
    15.      </li>
    17.  </ul>
    18. </footer>
    19. </body>
    20. </html>

    网站配置config.php如下：

    1.  //网站标题命名
    2.  $siteTitle='汽车4S店销售网';
    4.  //定义图片路径常量
    5.  const STATIC_PATH = 'images/';
    7.  //定义优惠促销价格
    8.  const price2  = '150000';
    10.  //顶部导航栏目
    11.  $categories= [
    12.      ['id'=>1, 'name'=>'SUV','url'=>'list.php?cid=1'],
    13.      ['id'=>2, 'name'=>'轿车','url'=>'list.php?cid=2'],
    14.  ];
    16.  //底部模块栏目
    17.  $module = [
    18.      ['id'=>1, 'name'=>'SUV','url'=>'module.php?cid=1'],
    19.      ['id'=>2, 'name'=>'轿车','url'=>'module.php?cid=2'],
    20.      ['id'=>3, 'name'=>'手册','url'=>'module.php?cid=3'],
    21.      ['id'=>4, 'name'=>'轿车','url'=>'module.php?cid=4'],
    22.  ];
    23.  //车辆信息
    24.  $goods = [
    25.      [
    26.          'id' => 1,
    27.          'name' => '轿车001',
    28.          'pic' => '01.jpg',
    29.          'price' => '150000',
    30.          'model' => 'H9运动版',
    31.          'url' => 'detail.php?id=1',
    32.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    33.          'cid'=>'2',
    34.      ],
    35.      [
    36.          'id' => 2,
    37.          'name' => '轿车001',
    38.          'pic' => '02.jpg',
    39.          'price' => '210000',
    40.          'model' => 'H10运动版',
    41.          'url' => 'detail.php?id=2',
    42.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    43.          'cid'=>'2',
    44.      ],
    45.      [
    46.          'id' => 3,
    47.          'name' => '轿车003',
    48.          'pic' => '03.jpg',
    49.          'price' => '140000',
    50.          'model' => 'H10运动版',
    51.          'url' => 'detail.php?id=3',
    52.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    53.          'cid'=>'2',
    54.      ],
    55.      [
    56.          'id' => 4,
    57.          'name' => '轿车004',
    58.          'pic' => '04.jpg',
    59.          'price' => '138000',
    60.          'model' => 'H12运动版',
    61.          'url' => 'detail.php?id=4',
    62.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    63.          'cid'=>'2',
    64.      ],
    65.      [
    66.          'id' => 5,
    67.          'name' => '轿车005',
    68.          'pic' => '05.jpg',
    69.          'price' => '260000',
    70.          'model' => 'H13运动版',
    71.          'url' => 'detail.php?id=5',
    72.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    73.          'cid'=>'2',
    74.      ],
    75.      [
    76.          'id' => 6,
    77.          'name' => '轿车006',
    78.          'pic' => '06.jpg',
    79.          'price' => '210000',
    80.          'model' => 'H9运动版',
    81.          'url' => 'detail.php?id=6',
    82.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    83.          'cid'=>'2',
    84.      ],
    85.      [
    86.          'id' => 7,
    87.          'name' => 'SUV',
    88.          'pic' => '07.jpg',
    89.          'price' => '210000',
    90.          'model' => 'SUV运动版',
    91.          'url' => 'detail.php?id=7',
    92.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    93.          'cid'=>'1',
    94.      ],
    95.      [
    96.          'id' => 8,
    97.          'name' => 'SUV',
    98.          'pic' => '08.jpg',
    99.          'price' => '220000',
    100.          'model' => 'SUV运动版02',
    101.          'url' => 'detail.php?id=8',
    102.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    103.          'cid'=>'1',
    104.      ],
    105.      [
    106.          'id' => 9,
    107.          'name' => 'SUV',
    108.          'pic' => '09.jpg',
    109.          'price' => '220000',
    110.          'model' => 'SUV运动版03',
    111.          'url' => 'detail.php?id=9',
    112.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    113.          'cid'=>'1',
    114.      ],
    115.      [
    116.          'id' => 10,
    117.          'name' => 'SUV',
    118.          'pic' => '10.jpg',
    119.          'price' => '220000',
    120.          'model' => 'SUV运动版03',
    121.          'url' => 'detail.php?id=10',
    122.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    123.          'cid'=>'1',
    124.      ],
    125.      [
    126.          'id' => 11,
    127.          'name' => 'SUV',
    128.          'pic' => '11.jpg',
    129.          'price' => '270000',
    130.          'model' => 'SUV运动版08',
    131.          'url' => 'detail.php?id=11',
    132.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    133.          'cid'=>'1',
    134.      ],
    135.      [
    136.          'id' => 12,
    137.          'name' => 'SUV',
    138.          'pic' => '12.jpg',
    139.          'price' => '220000',
    140.          'model' => 'SUV运动版08',
    141.          'url' => 'detail.php?id=12',
    142.          'details'=>'车辆详细介绍有待小编更新中，敬请期待',
    143.          'cid'=>'1',
    144.      ],
    146.  ];

    万事准备好了，就等着做首页了。首页优惠促销就是增加了一个if判断。判断价格；其他的两个栏目就是遍历了产品中的数组。
    网站首页index.php如下：

    1. <!-- 引入公共头部 -->
    2. <?php include __DIR__ . '/inc/public_header.php' ?>
    3. <!--主体-->
    4. <main>
    5.  <div class="main-part">
    6.      <section>
    7.          <h3><span>促销专区</span></h3>
    8.          <article>
    9.              <?php foreach ($goods as $good) : ?>
    10.                  <!-- 如果产品宣传价格低于规定的优惠促销价格 -->
    11.                  <?php if ($good['price']  <=  price2) : ?>
    12.                      <div class="images-goods">
    13.                          <div>
    14.                              <a href="<?php echo $good['url'] ?>"><img height="120" src="<?php echo STATIC_PATH . $good['pic'] ?>"></a>
    15.                              <span><i>&yen;:</i><i><?php echo $good['price'] ?>元</i></span>
    16.                              <span><i>型号:</i><i><?php echo $good['model'] ?></i></span>
    17.                              <span><?php echo $good['details'] ?></span>
    18.                          </div>
    19.                      </div>
    20.                  <?php endif ?>
    21.              <?php endforeach ?>
    22.          </article>
    23.      </section>
    24.      <?php foreach ($categories as $category) : ?>
    25.          <section>
    26.              <h3><span><?php echo $category['name'] ?></span></h3>
    27.              <article>
    28.                  <?php foreach ($goods as $good) : ?>
    29.                      <?php if ((int) $category['id'] === (int) $good['cid']) : ?>
    30.                          <div class="images-goods">
    31.                              <div>
    32.                                  <a href="<?php echo $good['url'] ?>"><img height="120" src="<?php echo STATIC_PATH . $good['pic'] ?>"></a>
    33.                                  <span><i>&yen;:</i><i><?php echo $good['price'] ?>元</i></span>
    34.                                  <span><i>型号:</i><i><?php echo $good['model'] ?></i></span>
    35.                                  <span><?php echo $good['details'] ?></span>
    36.                              </div>
    37.                          </div>
    39.                      <?php endif ?>
    40.                  <?php endforeach ?>
    41.              </article>
    42.          </section>
    43.      <?php endforeach ?>
    44.  </div>
    45. </main>
    46. <!-- 引入公共尾部 -->
    47. <?php include __DIR__ . '/inc/public_footer.php' ?>

    网站列表页list.php如下：

    1. <!-- 引入公共头部 -->
    2. <?php include __DIR__.'/inc/public_header.php' ?>
    3. <!--主体-->
    4. <main>
    5.  <div class="main-part">
    6.  </section>
    7.  <!-- 获取地址栏传过来的栏目ID参数值 -->
    8.  <?php $cid = $_GET['cid'];?>
    9.      <?php foreach ($categories as $category) : ?>
    10.          <!-- 判断地址栏的栏目ID与数组中的ID参数值相等 -->
    11.          <?php if ($category['id'] === intval($cid)) :?>
    12.          <section>
    13.              <h3><span><?php echo $category['name'] ?></span></h3>
    14.              <article>
    15.                  <!-- 获取当前栏目下的商品值 -->
    16.                  <?php foreach ($goods as $good) : ?>
    17.                      <?php if ((int) $category['id'] === (int) $good['cid']) : ?>
    18.                          <div class="images-goods">
    19.                              <div>
    20.                                  <a href="<?php echo $good['url'] ?>"><img height="120" src="<?php echo STATIC_PATH . $good['pic'] ?>"></a>
    21.                                  <span><i>&yen;:</i><i><?php echo $good['price'] ?>元</i></span>
    22.                                  <span><i>型号:</i><i><?php echo $good['model'] ?></i></span>
    23.                                  <span><?php echo $good['details'] ?></span>
    24.                              </div>
    25.                          </div>
    27.                      <?php endif ?>
    28.                  <?php endforeach ?>
    29.              </article>
    30.          </section>
    32.          <?php endif ?>
    33.      <?php endforeach ?>
    34.  </div>
    35. </main>
    36. <!-- 引入公共尾部 -->
    37. <?php include __DIR__. '/inc/public_footer.php' ?>

    网站详细页detail.php如下：

    1. <!-- 引入公共头部 -->
    2. <?php include __DIR__ . '/inc/public_header.php' ?>
    3. <!--主体-->
    4. <main>
    5.  <div class="main-part">
    6.      <section>
    7.          <!-- 获取地址栏传过来的产品ID参数值 -->
    8.          <?php $id = $_GET['id']; ?>
    9.          <?php foreach ($goods as $good) : ?>
    10.              <?php if ($good['id']  ==  $id) : ?>
    11.                  <h3><span><?php echo $good['model'] ?></span></h3>
    12.                  <article>
    14.                      <div class="images-details">
    15.                          <div>
    16.                              <a href="<?php echo $good['url'] ?>"><img height="120" src="<?php echo STATIC_PATH . $good['pic'] ?>"></a>
    17.                              <span><i>&yen;:</i><i><?php echo $good['price'] ?>元</i></span>
    18.                              <span><i>型号:</i><i><?php echo $good['model'] ?></i></span>
    19.                              <span><?php echo $good['details'] ?></span>
    20.                          </div>
    21.                      </div>
    22.                  <?php endif ?>
    23.              <?php endforeach ?>
    24.                  </article>
    25.      </section>
    26.  </div>
    27. </main>
    28. <!-- 引入公共尾部 -->
    29. <?php include __DIR__ . '/inc/public_footer.php' ?>

    总结：
    网页布局在电脑端还是比较容易写，就是在手机端兼容性有困难，全站完成没有难度。还是得多写。

上一条：12-21首页头部布局作业下一条：2020年1月15日-列举后台数据库添加、修改记录共用一个模板遇到的坑-php线上培训九期班
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多