模版布局就是为了提高代码复用,将网页中相同部分代码互相引入

Original 2019-04-20 19:33:01 241
abstract:基础模版base代码如下:{//基础模版中只允许出现block标签} {block name="header"} {include file="public/header" /} {/block} {block name="main"} 主体部分 {/block} {block na

基础模版base代码如下:

{//基础模版中只允许出现block标签}

{block name="header"}
{include file="public/header" /}
{/block}

{block name="main"}
主体部分
{/block}

{block name="footer"}
{include file="public/footer" /}
{/block}

{//基础模板中的内容原样输出内容}
我是php新手

头部代码header如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="GB2312">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/style/css/style.css"/>
    <script src="/style/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/style/js/jquery.SuperSlide.2.1.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="header clearfixe">
    <div class="header_1">
        <div class="logo fl">
            <a href="/"><img src="/style/images/hb_1.png"/></a>
        </div>
        <div class="sousuo flr">
            <span><a href="#">登陆</a><a href="#">注册</a></span>
            <form action="" method="post">
                <input class="sousuo_ipt1" type="text" id="" value="" />
                <input class="sousuo_ipt2" type="submit" value="搜索"/>
            </form>
        </div>
    </div>
</div>
<div class="nav">
    <div class="nav_ul">
        <div class="nav_li">
            <a href="/index.php"><span>首页</span><span class="on"></span></a>
        </div>
        <div class="nav_li">
            <a href="#"><span>**之门</span><span class="on"></span></a>
            <ul class="ziul">
                <li><a href="#">公司简介</a></li>
                <li><a href="#">大事记</a></li>
                <li><a href="#">组织架构</a></li>
                <li><a href="#">领导关怀</a></li>
                <li><a href="#">新闻动态</a></li>
                <li><a href="#">公司章程</a></li>
                <li><a href="#">企业文化</a></li>
                <li><a href="#">荣誉资质</a></li>
                <li><a href="#">社会责任</a></li>
            </ul>
        </div>
        <div class="nav_li">
            <a href="#"><span>在线客服</span><span class="on"></span></a>
        </div>


    </div>
    <!--nav-->
    <script type="text/javascript">


        $(".nav_li").hover(function () {

            $(this).find(".ziul").addClass("on")
        },function () {

            $(this).find(".ziul").removeClass("on")
        })

        $(".nav_li:last").addClass("nav_li_last")
    </script>
</div>


<div class="banner">
    <div class="hd">
        <ul>
            <li></li>
        </ul>
    </div>
    <div class="bd">
        <ul>
            <li _src="url(style/images/hb_1.jpg)" style="background: no-repeat;background-position: center center;"></li>
            <li _src="url(style/images/hb_1.jpg)" style="background: no-repeat;background-position: center center;"></li>
            <li _src="url(style/images/hb_1.jpg)" style="background: no-repeat;background-position: center center;"></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    jQuery(".banner").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"fold",  autoPlay:true, autoPage:true, trigger:"click",interTime:5000,
        startFun:function(i){
            var curLi = jQuery(".banner .bd li").eq(i);
            if( !!curLi.attr("_src") ){
                curLi.css("background-image",curLi.attr("_src")).removeAttr("_src")
            }
        }
    });
</script>

主体代码main如下:
{extend name="base" /}

{//将父模块中的main区块进行重写}
{block name="main"}

<div class="main">
    <div class="main4 clearfixe">
        <div class="main4_left fl">
            <div class="hd">
                  <span class="more">
                     <a href="#">+</a>
                     <a href="#">+</a>
                  </span>
                <ul>
                    <li>行业新闻</li>
                    <li>新区新闻</li>
                </ul>
            </div>
            <div class="bd">
                <img src="style/images/hb_15.jpg"/>
                <div class="conWrap">
                    <div class="con">
                        <ul>
                            <li><a href="#">
                                <h4>刑事诉讼制度改革推进 严格排除非法证据防止冤错案</h4>
                                <span>2017-10-24</span>
                            </a></li>
                            <li><a href="#">
                                <h4>刑事诉讼制度改革推进 严格排除非法证据防止冤错案</h4>
                                <span>2017-10-24</span>
                            </a></li>
                        </ul>
                    </div>
                    <div class="con">
                        <ul>
                            <li><a href="#">
                                <h4>刑事诉讼制度改革推进 严格排除非法证据防止冤错案</h4>
                                <span>2017-10-24</span>
                            </a></li>
                            
                            <li><a href="#">
                                <h4>刑事诉讼制度改革推进 严格排除非法证据防止冤错案</h4>
                                <span>2017-10-24</span>
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            jQuery(".main4_left").slide({ mainCell:".conWrap",effect:"fold",targetCell:".more a"});
        </script>
        <div class="main4_right flr">
            <div class="main4_right_li1">
                <a href="#">招商入驻</a>
            </div>
            <div class="main4_right_li2">
                <a href="#">售后服务</a>
            </div>
            <div class="main4_right_li3">
                <a href="#">招贤纳士</a>
            </div>
            <div class="main4_right_li4">
                <a href="#">联系我们</a>
            </div>
        </div>
    </div>
</div>

{/block}


{//凡是写在模板block之外的全部忽略}
我是PHP新手

底部footer代码如下:
<div class="footer">
    <div class="footer1">
        <div class="footer1_1 clearfixe">
            <span></span>
        </div>
    </div>
    <div class="footer2">
        <p class="fl"><span>版权所有&copy;***.com</span><span>**商业管理有限公司</span><span>陇ICP备*****</span></p>
    </div>
</div>
</body>
</html>



Correcting teacher:天蓬老师Correction time:2019-04-22 09:46:00
Teacher's summary:页面中总有一些部分是相同或相似的, 这些部分, 就可以共享出来, 被更多页面引用, 这就像编程中的函数是一样的, 代码复用

Release Notes

Popular Entries