得推企业网站模板开发教程之首页制作
企业网站首页模板制作
首页页面结构
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>