• 注册
  • 交流 交流 关注:1 内容:9

    得推企业网站模板开发教程之首页制作

  • 查看作者
  • 打赏作者
  • 当前位置: 站长社区 > deituicms > 交流 > 正文
    • 交流
    • 企业网站首页模板制作

      首页页面结构

       

          1、轮显广告

          2、首页导航

          4、产品推荐

          5、文章推荐

          6、页面底部

      一、轮显广告制作

          1、引入css

      1
      <link href="/plugin/swiper/css/swiper.min.css" rel="stylesheet" />

          2、轮显html代码

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      <div class="flashBox" style="margin-top: -20px; margin-bottom: 20px;">
                  <div class="swiper-container" style="width: 100%;overflow: hidden;" id="indexFlash">
                      <div class="swiper-wrapper flex" >
                          {foreach item=c from=$flashList}
                          <div class="swiper-slide">
                              <img style="width: 100%;" src="{$c.imgurl}" />
                          </div>
                          {/foreach}
                      </div>
                        
                      <div class="swiper-pagination flex flex-jc-center"></div>
                    
                  </div>
              </div>

          3、轮显js

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      <script src="/plugin/swiper/js/swiper.min.js"></script>
              <script>
                  $(function(){
                      var flash = new Swiper("#indexFlash", {
                          pagination: {
                              el: '.swiper-pagination',
                          }
                      });
                  })
                   
              </script>

      二、首页导航

          首页导航是在广告管理:wap-nav

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <div class="m-navPic">
              {foreach item=c from=$navList}
              <a href="{$c.link_url}" class="m-navPic-item">
                    <img class="m-navPic-img" src="{$c.logo|images_site}" />
                    <div class="m-navPic-title">{$c.title}</div>
                      
              </a>
               
              {/foreach}
          </div>

      三、产品推荐

          产品推荐调用的是文章推荐接口

      1
      {get data=list model=article fun=recList("$sets.productCatid",5)}

      四、文章推荐

           文章推荐调用的是文章推荐接口

      1
      {get data=list model=article fun=recList("$sets.articleCatid",6)}

      页面代码:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      82
      83
      84
      85
      86
      87
      88
      89
      90
      91
      92
      93
      94
      95
      96
      97
      <!DOCTYPE html>
      <html>
      {include file="head.html"}
      <link href="/plugin/swiper/css/swiper.min.css" rel="stylesheet" />
       
      <body>
      <div class="header">
          <div class="header-title">{$site.sitename}</div>
      </div>
      <div class="header-row"></div>
      <div class="main-body">
          {get data=sets model=table_data fun=getData("const")}
          <div class="swiper-container" id="indexFlash">
              <div class="swiper-wrapper" >
                  {foreach item=c from=$flashList}
                  <div class="swiper-slide">
                      <img class="imgWidth" src="{$c.imgurl}" />
                  </div>
                  {/foreach}
              </div>
                
              <div class="swiper-pagination flex flex-jc-center"></div>
            
          </div>
          <div class="m-navPic">
              {foreach item=c from=$navList}
              <a href="{$c.link_url}" class="m-navPic-item">
                    <img class="m-navPic-img" src="{$c.logo|images_site}" />
                    <div class="m-navPic-title">{$c.title}</div>
                      
              </a>
               
              {/foreach}
          </div>
          <div  >
              <div class="row-box-hd pdl-10">
                  <div class="flex-1 f16">产品推荐</div>
                  <div gourl="/index.php?m=article&a=list&catid={$sets.productCatid}" class="row-box-more">更多</div>
              </div>
              {get data=list model=article fun=recList("$sets.productCatid",5)}
              <div class="flexlist">
                  {foreach item=c from=$list}
                  <a href="/index.php?m=article&a=show&id={$c.id}" class="flexlist-item pointer">
                      <img class="flexlist-img" src="{$c.imgurl}.100x100.jpg" />
                      <div class="flex-1">
                           
                          <div class="flexlist-title">{$c.title}</div>
                          <div class="cl-money">¥{$c.price}</div>
                          <div class="flexlist-desc">{$c.description}</div>
                      </div>
                       
                  </a>
                  {/foreach}
              </div>
                
          </div>     
          <div class="row-box-hd pdl-10">
              <div class="flex-1 f16">文章推荐</div>
              <div gourl="/index.php?m=article&a=list&catid={$sets.articleCatid}" class="row-box-more">更多</div>
          </div>
          <div >
          {get data=list model=article fun=recList("$sets.articleCatid",5)}
          {foreach item=c from=$list}
          <a href="/index.php?m=article&a=show&id={$c.id}" class="sglist-item">
              {if $c.imgurl}
              <div class="sglist-imgbox">
                  <img class="sglist-img" src="{$c.imgurl}.middle.jpg" />
              </div>
              {/if}
              <div class="sglist-title">{$c.title}</div>
              <div class="sglist-desc">{$c.description}</div>
                
          </a>
          {/foreach}
          </div>
            
      </div>
      <div class="flex-center pd-10">
          <a class="f12 cl3" href="http://beian.miit.gov.cn">{$site.icp}</a>
      </div>
      {assign var="ftnav" value="index"}  
      {include file="ftnav.html"}
      {include file="footer.html"}
      <script src="/plugin/swiper/js/swiper.min.js"></script>
      <script>
          $(function(){
              var flash = new Swiper("#indexFlash", {
                  pagination: {
                      el: '.swiper-pagination',
                  }
              });
          })
           
      </script>
      </body>
       
      </html>

      擅长SEOSEM网站诊断、方案编写、优化运维

      请登录之后再进行评论

      登录

      分享有礼

    • 发表内容
    • 做任务
    • 实时动态