一、yike模板
1.index_index.html
（1）<extend name="Public:base" />
Public就是base.html所在的文件夹，比如放Frame文件夹里，就应该是<extend name="Frame:base" />
子模板（其实是当前操作的入口模板）中使用继承
模板继承是3.1.2版本添加的一项更加灵活的模板布局方式，模板继承不同于模板布局，甚至来说，应该在模板布局的上层。模板继承其实并不难理解，就好比类的继承一样，模板也可以定义一个基础模板（或者是布局），并且其中定义相关的区块（block），然后继承（extend）该基础模板的子模板中就可以对基础模板中定义的区块进行重载。
因此，模板继承的优势其实是设计基础模板中的区块（block）和子模板中替换这些区块。
每个区块由<block></block>标签组成，并且不支持block标签的嵌套。
（2）foreach相当于一个循环，name:表示数据源;item:表示循环变量;SlideshowList是个数据，slider相当于当前循环的属性，属性+个.img 那不就是值吗
<?php dump($slider.image);?>
<foreach name="SlideshowList" item="slider">
<div class="swiper-slide">
<div class="banner_box">
<img src="{$slider.image}" alt="">
</div>
</div>
</foreach>
（3）通过将<?php dump($xxx.xxx);?>放在对应需要打印的元素前，然后审查对应的位置，可以看到多了一个pre标签，标签内包裹的就是打印出来的信息
（4）适配
@media (max-width: 1600px) and (min-width: 1401px){
}
@media (max-width: 1400px) and (min-width: 1201px){
}
@media (max-width: 1200px) and (min-width: 1025px){
}
@media (max-width: 1024px) and (min-width: 768px){
}
@media (max-width: 767px) and (min-width: 320px){
}(7)导航栏固定
position:fixed;(8) 增加BACK TO TOP浮标
首先下载对应的图标
html代码
<div class="top" style="position: fixed;right: 0px;top: 50%;width: 50px;height: 50px;margin-top: -25px;background-color: #f4f4f4;border-radius: 50%;text-align: center;margin: 0 auto;cursor: pointer;"><span id="backup"><img src="{$Resource.back_top}" style="margin: 0 auto;margin-top: 8px;"></span></div>js代码
<script>document.getElementById("backup").onclick=function(){window.scrollTo(0,0); }</script>
（10）如何点击首页的推荐图，定位到产品页产品表格内，相应产品的位置
产品列表图，对产品进行循环，自定义所有产品的id="{$v.id}"
<foreach name="vo.productlist" item="v"><tr class="trbox" id="{$v.id}"><td style="border-bottom: 1px solid #ddd;" class="tdbox"><div class="list-img-box"><img class="img-responsive" src="{$v.product_img.0.image}"><div class="red-shade"><span class="plus-sign">+</span></div></div><h6>{$v.product_title}</h6></td><td style="background: #f9f9f9;border-bottom: 1px solid #ccc;" class="tdbox first">{$v.product_description}</td><td style="background: #f1f1f1;border-bottom: 1px solid #aaa;" class="tdbox">{$v.product_chanpin}</td><td style="background: #f9f9f9;border-bottom: 1px solid #ccc;" class="tdbox">{$v.product_chanpinss}</td></tr></foreach>首页关于推荐产品，注意<a href="/product/all/#相应的id">，这个id需要通过在产品列表图右键审查产品的id.
注意，如果在后台设置了分页，那么a链接就是/product/all/id/20/#26，只是列举
<div id="main-product"><ul class="main-product-ul"><li class="col-sm-3 col-xs-6" id="position1"><a href="/product/all/#56"><div class="hp-img-box"><img class="img-responsive main-img" src={$Resource.home_product2} /><img src="/Uploads/Resource/2017-08-24/599e7d4c3b081.png" class="img-responsive top-tri" /><img src="/Uploads/Resource/2017-08-24/599e7d6566f4f.png" class="img-responsive bottom-tri" /><div class="bg-yellow"></div></div><h4>PM-A049</h4></a></li>
（12）给电脑端增加语言导航栏，在header文件适当位置下增加如下代码
<nav class="lang "><a href="" style="width: auto;height: auto;">{$Content.English}<i class="fa fa-caret-down"></i></a><div class="lang_box"><a href=" " style="font-size: 16px;">{$Content.English}</ a><a href="?lang=de">{$Content.German}</a><a href="?lang=es">{$Content.Spanish}</a><a href="?lang=pt">{$Content.Portuguese}</a><a href="?lang=ru">{$Content.Russian}</a><a href="?lang=ar">{$Content.arabic}</a> <a href="?lang=cs">{$Content.Czech}</a> </div></nav>
（13）video标签。注意，src里面的视频需要能够拖入到浏览器中查看，如果不能，就得到类似“格式工厂”的软件中进行视频转编码，需要将它变成AVCh264 编码格式。
<video src="/Theme/default/videos/Testing.mp4" width="320" height="240" controls="controls"></video>（14）实现点击某一个分类，被选中的分类改变样式
css代码
.listActive a{font-weight: bolder!important;color: #1da838!important;border-bottom: 1px solid #bbb;}js代码
<script>window.onload=function(){console.log(sessionStorage.listIndex);var url = location.href;if(url.indexOf("id")===-1){sessionStorage.listIndex=0;}if(sessionStorage.listIndex!==null){$(".drop-down .product-row").eq(sessionStorage.listIndex).addClass("listActive");}else{$(".drop-down .product-row").eq(0).css("color","red");}$(".drop-down .product-row").click(function(){sessionStorage.listIndex=$(this).index();})};
</script>html代码
div class="product-list-box"><div class="drop-down"><foreach name="CatalogType" item="rs"><div class="product-row row"><a href="/product/all/id/{$rs.id}" id="{$rs.name}" class="h3h3">{$rs.name}</a></div></foreach><div class="row product-one">（15）如果页面下方出现可以水平滑动的滚动条，可以增加样式，将滚动条去除
body{overflow-x: hidden;width: 100%;
}（17）返回到上一页
1.通过超链接返回到上一页<a href="#" onclick="javascript:history.back(-1);">返回到上一页</a><a href="#" onClick="javaScript:history.go(-1)">返回上一页</a>2.用按钮代码<input type=”button” name=”Submit” onclick=”javascript:history.back(-1);” value=”返回上一页”>
3 图片代码<a href=”javascript :;” onClick=”javascript :history.back(-1);”><img src=”图片路径” border=”0″ title=”返回上一页”></a>(18)实现未固定宽度的div水平垂直居中：为父元素设置text-align:center，然后再设置
.btn-group{text-align: center;}.btn-group .btn{float: none;display: inline-block;}（19）导航栏
手机导航栏
#min_lang{display: none;
}
@media (max-width: 767px){nav.Language{display: none;}#min_lang{padding: 10px 0;display: block;}#min_lang a{color: #000;padding: 0 10px;}
}接在原先导航栏ul结束后
<div id="min_lang"><a href="?lang=es">{$Content.English}</a><a href="?lang=es">{$Content.Spanish}</a><a href="?lang=pt">{$Content.Portuguese}</a></div>电脑导航栏
<nav class="Language"><a href="?lang=en">{$Content.English}</a><div class="Language_box"><a href="?lang=en">{$Content.English}</a><a href="?lang=es">{$Content.Spanish}</a><a href="?lang=pt">{$Content.Portuguese}</a></div></nav> <style>.ez-header{text-align: center;}.ez-header .container{display: inline-block;}.Language{display: inline-block;position: relative;width: 120px;}.Language a{color: red;width: 120px;text-align: center;display: inline-block;font-size: 18px;}.Language a:hover{color: red;}.Language_box{position: absolute;padding-top: 40px;top: 26px;left: 0;background-color: #fff;min-width: 120px;height: 0;width: 100%;display: none;}.Language_box >a{line-height: 40px;}</style>（21）页面高度不够，如何使最下方的空白去掉
给黑色底部添加样式
.footer{position: fixed;bottom: 0px;width: 100%;}
一段简单的js实现奇行和偶行的背景色不同，odd和even
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>$(".list-paddingleft-2").find("li:odd").css("background","#eee");
</script>
(22)给网页添加ico图标
<link href="图标路径.ico" rel="icon" type="image/x-icon" />