实际项目中不懂的地方（不断更新）

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