开头几句话:
<title>{$GLOBALS['S']['title']}</title> <meta name="keywords" content="{$GLOBALS['S']['keywords']}"> <meta name="description" content="{$GLOBALS['S']['description']}"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
为了网站优化,内页只写标题不写关键词和描述:
首页:
<title>{$GLOBALS['S']['title']}</title> <meta name="keywords" content="{$GLOBALS['S']['keywords']}"> <meta name="description" content="{$GLOBALS['S']['description']}">
列表页标题:
<title>{$type['title']}_{$GLOBALS['S']['title']}</title>
新闻详情页 产品详情页:
<title>{$article['title']}_{$GLOBALS['S']['title']}</title>
样式表和文件替换路径:
<link rel="stylesheet" href="{$GLOBALS['skin']}css/css.css" />
头部调用:
{include="head.html"}
底部调用:
{include="foot.html"}
一级栏目循环名称:
{loop table="classtype" mshow="1" tid='1886'} //tid号为要循环的这个一级栏目的id <li class="btn"> <a href="{$v['url']}">{$v['classname']}</a> </li> {/loop}
循环一级栏目下的所有二级栏目:
{loop table="classtype" mshow="1" pid='1886'} <li {if($type[ 'tid']==$v[ 'tid'])} class="open" {/if} > //遍历循环二级栏目后加高亮 <a href="{$v['url']}">{$v['classname']}</a> </li> {/loop}
<li> <a href="/">首页</a> </li>
首页调用某个一级栏目下的内容:
{loop table="article" tid="1893" limit="8"} <a href="{$v['url']}"> <li> <div class="img"> <div class="h"><img src="{$v['litpic']}"></div> <div class="s"><img src="{$v['litpic']}"></div> </div> <h1>{$v['title']}</h1> <span>{fun newstr($v['description'],150)}</span></li> </a> {/loop}
表示调用的数量是调出8个内容 limit="8"
标题 {$v['title']}
链接 {$v['url']}
缩略图 {$v['litpic']}
描述 {fun newstr($v['description'],150)}
日期 {fun date('Y/m/d',$v['addtime'])}
页脚里一级栏目的跳转:
{loop table="classtype" mshow="1" tid='1881'}<a href="{$v['url']}">关于我们</a> {/loop}
列表页的面包屑:
<div class="position col-lg-5 col-md-5 hidden-xs">
<i class="glyphicon glyphicon-home"></i> 您当前的位置:首页 >
{loop table="classtype" tid="$type['tid']" mshow="1"} <a href="{$v['url']}">{$v['classname']}</a>
{/loop}
</div>
上一篇 下一篇:
<div class="ly_prev_next"> <ul> <li class="fl"><span>上一篇:</span>
{if($aprev)}<a href="{$aprev['url']}">{$aprev['title']}</a>{else}暂无内容{/if}
</li> <li class="fr"><span>下一篇:</span>
{if($anext)}<a href="{$anext['url']}">{$anext['title']}</a>{else}暂无内容{/if}
</li> </ul> </div>
artical.html 就是 show 页面
<div class="newdetail_tit"> <h3>{$article['title']}</h3> <p>发布时间:{fun date('Y-m-d',$article['addtime'])} 作者:</p> </div> <div class="newdetail_content"> {$article['body']} </div>
标题名称: {$article['title']}
发布时间: {fun date('Y-m-d',$article['addtime'])}
文章内容: {$article['body']}
page页面调用后台文字内容: {$type['body']}
列表页的二级栏目导航循环遍历:
<ul class="col-lg-7 col-md-7 col-sm-12 col-xs-12"> {loop table="classtype" pid="1881" mshow="1"} <li {if($type[ 'tid']==$v[ 'tid'])} class="a" {/if}> <a href="{$v['url']}" title="{$v['classname']}">{$v['classname']}</a> </li> {/loop} </ul>
list列表页
新闻部分列表分页:
{foreach $lists as $v} <!-- 列表循环体 --> <li> <div class="news_two_box wow slideInUp"> <a href="{$v['url']}" class="news_two_img"> <img class="js_thumb" src="{$v['litpic']}" title="{$v['title']}" alt="{$v['title']}"> </a> <a href="{$v['url']}" class="news_two_txt"> <span>{$v['title']}</span> <i>{fun newstr($v['description'],200)}</i> </a> <p class="news_two_date"> <span>{fun date('Y-m-d',$v['addtime'])}</span> </p> <a href="{$v['url']}" class="ser_but news_two_but"><i><span class="i_buttontext">查看详情</span></i></a> </div> </li> {/foreach}
标题:{$v['title']}
链接:{$v['url']}
缩略图:{$v['litpic']}
描述:{fun newstr($v['description'],200)}
日期:{fun date('Y-m-d',$v['addtime'])}
进入某个栏目的链接:
{loop table="classtype" mshow="1" tid='1886'} <a href="{$v['url']}">+查看更多</a>
{/loop}
产品列表页左侧导航栏目 遍历循环出二级栏目:
<p>产品名称</p> <ul> <li> {loop table="classtype" tid="1886" mshow="1"} <a href="">全部产品</a> {/loop} </li> {loop table="classtype" pid="1886" mshow="1"} <li {if($type[ 'tid']==$v[ 'tid'])} class="a" {/if}> <a href="{$v['url']}" title="{$v['classname']}">{$v['classname']}</a> </li> {/loop} </ul>
当前栏目名称:
{loop table="classtype" tid="$type['tid']" mshow="1"}<a href="{$v['url']}">{$v['classname']}</a>{/loop}
表单功能:
模板路径在 template->default->message->message.html
内容随机调取:
{loop table="article" tid="3" limit="8" orderby="RAND()"} <li class="animate-box " data-animate-effect="fadeInUp"> <div> {loop table="classtype" tid="$type['tid']" mshow="1"}<span class="hylx">{$v['classname']}</span>{/loop} <a href="{$v['url']}"><img src="{$v['litpic']}" width="327" height="237"></a> <span class="n_title"><a href="{$v['url']}">{$v['title']}</a></span> <span class="n_date">{fun date('m-d',$v['addtime'])}</span> <p>{fun newstr($v['description'],150)}</p> </div> </li> {/loop}
表单提交:
直接在后台的栏目管理里面的在线留言后面的字段管理新建相对应的字段名然后根据 message.html 页面来把相对应的name名添加上就行了
修改分页的php文件:
www->include->Functions.php
分页相对应的样式:
/*分页样式开始*/ .pages a{ margin: 0 5px; background: #000; padding: 5px 10px; color: #fff; } .pages{ text-align: center; } .pages li a{ color: #000; } .c{ color: red!important; } /*分页样式结束*/
另一个浅色的分页样式:
/*分页样式开始*/ .pages a{ margin: 0 5px; border: 1px solid #dddddd; padding: 5px 10px; color: #555555; } .pages{ text-align: center; margin-top: 25px; } .pages li a{ color: #000; } .c{ background: #09f; color: #fff!important; } /*分页样式结束*/
html页面:
<div class="pages"> {$pages} </div>
分页 pages 要与foreach标签一起使用!
留言:
<form action="index.php" action="post"> <input type="hidden" name="c" value="message"> <input type="hidden" name="a" value="add"> <input type="hidden" name="tid" value="11"> <ul> <li class="clearfix"><span>姓名</span><input type="text" placeholder="请输入姓名" name="name"></li> <li class="clearfix"><span>电话</span><input type="text" placeholder="请输入电话" name="phone"></li> <li class="clearfix"><span>邮箱</span><input type="text" placeholder="请输入邮箱" name="email"></li> <li class="clearfix"><span>留言内容</span><textarea name="content"></textarea></li> <li class="clearfix"><input type="submit" value="提交" class="btn"></li> </ul>
</form>
友情链接:
<!--友情链接开始--> <div class="tem_inner links"> <div class="links_title"><span>友情链接 LINK</span></div> <div class="links_list"> {loop table="links" } <a href="{$v['gourl']}" target="_blank">{$v['name']}</a> {/loop} </div> </div> <!--友情链接结束-->
缩略图: {$v['image']}
看变量写法 找 source 里面的a_links.php
show_cp页面:
<div class="pro_detail clearfix"> <div class="pro_detail_box col-lg-6 col-md-6 col-sm-6 col-xs-6"> <img src="{$product['litpic']}" alt="{$product['title']}" /> </div> <div class="pro_detail_info col-lg-6 col-md-6 col-sm-6 col-xs-6"> <h3>{$product['title']}</h3> <div> <b>产品概述</b> <p>{fun newstr($product['cpgs'],200)}</p> <b>性能范围</b> <p>{$product['xnfw']}..</p> <b>应用环境</b> <p>{$product['yyhj']}..</p> <p class="lxfs">销售热线:0533-4662466 4662477</p> <div class="dj_btn"> <a href="">在线咨询</a> <form id="down" method="post" action="index.php"> <input type="hidden" name="c" value="product"> <input type="hidden" name="a" value="download"> <input type="hidden" name="id" value="{$product['id']}"> <input type="hidden" name="downfiles" value=""> <button id="download">下载产品样本资料</button> </form> </div> </div> </div> </div> <div class="pro_detail_tab "> <div class="hd"> <span class="on">产品概述</span> <span>型号意义</span> <span>技术参数表</span> <span>性能曲线</span> <span>结构图</span> <span>安装尺寸</span> <span>其它</span> </div> <div class="bd"> <div style="display:block;"> {$product['body']}</div> <div> {$product['cpxh']}</div> <div> {$product['jscs']}</div> <div> {$product['xnqx']}</div> <div> {$product['jgt']}</div> <div> {$product['wxcc']}</div> <div> {$product['other']}</div> </div> </div>
show产品页面变量:
产品缩略图: {$product['litpic']}
产品标题: {$product['title']}
产品内容: {$product['body']}
手机端开始:
后台系统设置中把移动端打开。
在 default_Mobile 文件夹中新建 article 和 product 两个文件夹目录 还有 index.html首页页面
css images 和js放在 skin 下的 default 下的 Mobile 里面 新建 css images js 文件夹
样式格式: {$GLOBALS['skin']}Mobile/css
手机版首页调用某个栏目下的产品内容:
<div class="widget-header"> <h2>产品中心</h2> </div> <div class="widget-body"> <ul class="list"> {loop table="product" tid="18" limit="10"} <li class="list-item"> <a href="{$v['url']}" title="{$v['title']}"> <div class="image-container"> <img src="{$v['litpic']}" alt="{$v['title']}"> </div> <div class="title">{$v['title']}</div> </a> </li> {/loop} </ul> </div>
套单个栏目:
{loop table="classtype" mshow="1" tid='32'}
<p><a href="{$v['url']}" title="">{$v['classname']}</a></p>
{/loop}
后台生成静态页面:
一级栏目下 栏目设置的地方->高级设置->静态生成目录写一级栏目的英文名。
静态文件名写该一级或者二级的英文名。
product-> product1.
product-> product2.
碎片管理:
系统->自定义模板标签->将 {fun labelcus(3,'body')} 这个变量写到html里面直接调用。
加搜索功能:
<!--搜索开始--> <form id="searchform" method="get" action="index.php?"> <input type="hidden" name="c" value="product"> <input type="hidden" name="a" value="search"> <div class="input-group search_group"> <input type="text" name="word" class="form-control input-sm" placeholder="产品搜索"> <span class="input-group-btn"> <span id="submit_search" title="产品搜索" class="glyphicon glyphicon-search btn-lg" aria-hidden="true"> </span> </span> </div> </form> <!--搜索结束-->
<script language="javascript"> $(function() { $('#submit_search').click( function() { $('#searchform').submit(); } ) }) </script>
看php文件看的是source下的 product.php 文件里面的内容
推荐产品或者推荐新闻:
{loop table="article" tid="26" limit="8" trait="2"} //数字值为后台审查元素的值。
{/loop}
写网站通用样式开始:
@charset "utf-8"; /* CSS Document */ #main { margin-top: 20px; } * { margin: 0; padding: 0; word-wrap: break-word; } a { text-decoration: none; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } a.underline:hover { text-decoration: underline; } a img { border: none; } body { margin: 0px; padding: 0px; position: relative; } body, td, div, a, li, form { color: #391f0e; line-height: 20px; font-family: Arial, "Microsoft yahei" } div, form, p, img, ul, ol, li, dl, dt, dd, button, input { margin: 0px; padding: 0px; font-size: 12px; } li { list-style: none; } /*table{font-size: 13px;}*/ .clear { clear: both !important; width: 0px !important; height: 0px !important; line-height: 0px !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; float: none !important; position: static !important; background: none !important; } /* For IE 6/7 (trigger hasLayout) */ .fl { float: left; } .fr { float: right; } .block { display: block !important; } .box { width: 100%; margin: 0 auto; height: auto; } .w { width: 1000px; margin: 0 auto; } /*通用样式结束*/
css样式的过渡效果:
transition: width 1s, height 1s, transform 1s;
-moz-transition: width 1s, height 1s, -moz-transform 1s;
-webkit-transition: width 1s, height 1s, -webkit-transform 1s;
-o-transition: width 1s, height 1s,-o-transform 1s;
整张背景图作为整个body的背景图的样式:
body { background: url(../images/img8.png); width: 100%; height: 100%; background-repeat: no-repeat; background-size: 100% 100%; background-attachment: fixed; }
根据js获取屏幕的高度给div赋值:
var top1 = (document.documentElement.clientHeight-440)/2;
if(top1>0){
$(".a_a").css("margin-top",top1+"px");
}
var top1 = document.documentElement.clientHeight;
if(top1>0){
$(".waveWrapper").css("height",top1+"px");
}
鼠标移动上去img变图片 移开时图片变回来
<img src="images/img10.png" onmouseover="this.src='images/img11.png'" onmouseout="this.src='images/img10.png'">