Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1月10-12日作业写了一个汽车宣传站的移动端并进行了PHP站点模块化
Blogger Information
Blog 5
fans 0
comment 0
visits 2753
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
1月10-12日作业写了一个汽车宣传站的移动端并进行了PHP站点模块化
阿喜
Original
588 people have browsed it

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' ?>

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：vh, vw不会产生错位的, 应该你是用错了元素, 用在html上试试看, 因为这个单与设备相关
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