得推企业网站模板开发教程之首页制作
查看视频教程或者获取有关《得推企业网站模板开发教程》更多信息

企业网站首页模板制作

首页页面结构

    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>