一、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>
(9)如何实现让填写完信息的邮件列表清空,参考加红色背景的代码
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
var data=JSON.parse(xhr.responseText);
if(data['status']==0){
oName="";
oEmail="";
oMessage="";
oHint.innerHTML=data['msg'];
}else{
document.getElementById("name").value="";
document.getElementById("email").value="";
document.getElementById("message").value="";
oHint.innerHTML='<span style="color:green">'+data['data']+'</span>';
}
}
}
(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>