得推企业网站模板开发教程之首页制作
企业网站首页模板制作
首页页面结构
1、页面导航
2、轮显广告
3、企业简介
4、产品信息
5、文章信息
6、页面底部
一、轮显广告制作
1、引入css
<link href="/plugin/swiper/css/swiper.min.css" rel="stylesheet" />
2、轮显html代码
<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
<script src="/plugin/swiper/js/swiper.min.js"></script> <script> $(function(){ var flash = new Swiper("#indexFlash", { pagination: { el: '.swiper-pagination', } }); }) </script>
二、企业简介
企业简介可以通过文章来调取数据,设置在后台虚拟表:常量
{get data=sets model=table_data fun=getData("const")} {get data=gs model=article fun=get("$sets.aboutID")}
三、产品推荐
产品推荐调用的是文章推荐接口
{get data=list model=article fun=recList("$sets.productCatid",5)}
四、文章推荐
文章推荐调用的是文章推荐接口
{get data=list model=article fun=recList("$sets.articleCatid",6)}
页面代码:
<!DOCTYPE html> <html> {include file="head.html"} <link href="/plugin/swiper/css/swiper.min.css" rel="stylesheet" /> <body> {include file="header.html"} {get data=sets model=table_data fun=getData("const")} <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> <div class="main-body"> {get data=gs model=article fun=get("$sets.aboutID")} <div style="padding: 20px 10px; background-color: #fff; margin-bottom: 20px; "> <div class="flex"> <img style="width: 240px;" src="{$gs.imgurl}.small.jpg" /> <div class="flex-1 mgl-20"> <div class="f18 mgb-10 fw-600">公司简介</div> <div class="cl2 mgb-10" style="line-height: 1.5;">{$gs.description}</div> <div class="flex"> <a href="/index.php?m=article&a=show&id={$gs.id}" class="btn btn-outline-primary">查看详情</a> </div> </div> </div> </div> <div class="pd-5 mgb-20"> <div class="flex-col mgb-20 flex-center"> <div class="f22 fwb mgb-10">产品展示</div> <div class="f16 cl2">RECOMMEND PRODUCT</div> </div> {get data=list model=article fun=recList("$sets.productCatid",5)} <div class="flex flex-wrap mgb-20"> {foreach item=c from=$list} <a href="/index.php?m=article&a=show&id={$c.id}" class="block col-5 bg-white"> <div class="pd-5"> <img class="wmax" src="{$c.imgurl}.middle.jpg" /> <div class="mgb-5">{$c.title}</div> <div class="cl-money">¥{$c.price}</div> </div> </a> {/foreach} </div> <div class="flex flex-center"> <a href="/index.php?m=article&a=list&catid={$sets.productCatid}" class="btn btn-outline-primary">更多产品</a> </div> </div> <div class="row-box"> <div class="flex-col mgb-20 flex-center"> <div class="f22 fwb mgb-10">新闻资讯</div> <div class="f16 cl2">RECOMMEND News</div> </div> {get data=list model=article fun=recList("$sets.articleCatid",6)} <div class="flex flex-wrap mgb-20"> {foreach item=c from=$list} <a href="/index.php?m=article&a=show&id={$c.id}" class="flexlist-item col-2 pointer"> {if $c.imgurl}<img src="{$c.imgurl}.100x100.jpg" class="flexlist-img" />{/if} <div class="flex-1"> <div class="flexlist-title">{$c.title}</div> <div class="flexlist-desc">{$c.description}</div> </div> </a> {/foreach} </div> <div class="flex flex-center"> <a href="/index.php?m=article&a=list&catid={$sets.articleCatid}" class="btn btn-outline-primary">更多资讯</a> </div> </div> </div> {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>