运用Smarty模板进行html布局

来源：互联网发布：西直门桥数据编辑：程序博客网时间：2024/06/06 03:23

先建立一个框架文件

<div id="header">Header</div><div id="content" style="width: 1000px">    <div id="sidebar" style="float: left;width: 200px">        <ul>            <li>iPhone6</li>            <li>iPhone6 plus</li>            <li>iPhone6s</li>            <li>iPhone6s plus</li>        </ul>    </div>    <div id="main" style="float: right;width: 800px">        {block name="main"}{/block}    </div></div><div id="footer" style="clear: both">Footer</div>

然后是内容文件

php文件

<?php    require_once "../Smarty/Smarty.class.php";    $smarty = new Smarty();    $smarty->display("f.tpl");?>

tpl文件

{extends file="common.html"}{block name="main"}    <div>itcast</div>{/block}

还可以使用包含文件的方式

<div>    <div>        {include file="header.html"}    </div>    <div style="width: 1000px">        <div style="width: 200px;float: left">            {include file="sidebar.html"}        </div>        <div style="width: 800px;float: right">            iPhone6s plus高端大气上档次        </div>    </div>    <div style="clear: both">Footer</div></div>

Smarty和已有html模板结合

html引入的css js 图片路径相对于php文件设置

css引入的图片路径相对于css文件设置

0 0