得推企业网站模板开发教程之首页制作--powered by www.deituicms.com

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

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

企业网站首页模板制作

首页页面结构

1、轮显广告

2、首页导航

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>

二、首页导航

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

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

三、产品推荐

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

{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>
<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>