模板继承,模仿php页面
//base.html 模板
{block name="header"}
{include file="public/header" /}
{/block}
{block name="main"}
main:
{/block}
{block name="fooder"}
{include file="public/fooder" /}
{/block}
//header.html 头部导航
// template.php自定义常量 _CSS_ 'tpl_replace_string' =>[
// '_CSS_' =>str_replace('index.php', '', //$_SERVER['SCRIPT_NAME'])
// ]
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="_CSS_/static/style.css">
</head>
<body>
<div class="header">
<div class="fl">
<img src="_CSS_/static/image/logo.png" width="140px" height="60"> </div>
<ul class="top_nav">
<li>首页</li>
<li>视频教程</li>
<li>入门教程</li>
<li>社区问答</li>
<li>技术文章</li>
<li>编程词典</li>
<li>资源下载</li>
<ul>
<div class="search">
<input type="text" name="">
<span>搜所</span>
</div>
<div class="login fr">
<span>登录</span>
<span>注册</span>
</div>
<div class="fc"></div>
</div>
//fooder.html 底部导航
<div class="fooder">
<div class="fooder_left fl">
<div class="bottom_nav">
<ul>
<li>网站首页</li>
<li>PHP视频</li>
<li>PHP实战</li>
<li>PHP代码</li>
<li>PHP手册</li>
<li>词条</li>
<li>手记</li>
</ul>
<div class="fc"></div>
</div>
<div style="margin-top:30px;">
<span style="color:#787D82;font-size:12px;margin-left:60px;">PHP中文网:独家原创,永久免费的在线PHP视频教程,PHP技术学习阵地!</span>
<img src="_CSS_/static/image/label_lg.png" width="60">
</div>
<div style="margin-top:30px;">
<span style="color:#787D82;font-size:14px;margin-left:60px;">Copyright 2014-2019 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9</span>
<span style="color:#787D82;font-size:14px;margin-left:30px;">免责申明</span>
<span style="color:#787D82;font-size:14px;margin-left:30px;">赞助与捐赠</span>
</div>
</div>
<div class="fooder_right fr">
<span><img src="_CSS_/static/image/weixin.png" width="100"></span> <span><img src="_CSS_/static/image/phpcn.jpg" width="100"></span>
</div>
</div>
</body>
</html>
//index.html 主体页面 模板继承
{extend name="base"}
{block name="main"}
<div class="main">
<div class="main_left fl">
<div class="main_left_home">
首页<span style="margin:0 10px;">></span>技术文章
</div>
<div class="main_left_nav">
<span class="fl">方向：</span>
<ul class="fl">
<li>全部</li> <li>后端开发</li> <li>WEB前端</li> <li>数据库</li> <li>运维</li> <li>开发工具</li> <li>PHP框架</li> <li>每日编程</li> <li>头条</li> <li>博客</li> <li>更多</li>
</ul>
</div>
<div class="fc"></div>
<div class="main_left_nav">
<span class="fl">分类：</span>
<ul class="fl">
<li>php教程</li> <li>php问题</li> <li>php知识</li> <li>mysql问题</li> <li>html问题</li> <li>css问题</li> <li>js问题</li> <li>phpstudy问题</li> <li>python问题</li> <li>更多</li>
</ul>
</div>
<div class="fc"></div>
<div style="width:800px;">
<div class="main_left_list">
<img src="_CSS_/static/image/wordpress.jpg" width="260" height="160" class="fl">
<div class="fl" style="width:480px;margin-left:20px;"> <h2>wordpress如何设置文章置顶</h2>
<p style="margin:15px 0px 15px;line-height:26px;">wordpress设置文章置顶的方法：1、登录wordpress后台；2、点击左侧菜单栏文章-所有文章；3、鼠标移动到文章标题，点击快速编辑；4、勾选右边置顶这篇文章；5、最后点击更新按钮即可。</p>
<p><span>所属分类:wordpress</span>   <span>浏览:315</span>   <span>添加时间:2019-11-02 17:59:59</span></p>
</div>
<div class="fc"></div>
</div>
<div class="main_left_list">
<img src="_CSS_/static/image/wordpress.jpg" width="260" height="160" class="fl">
<div class="fl" style="width:480px;margin-left:20px;">
<h2>wordpress如何设置文章置顶</h2>
<p style="margin:15px 0px 15px;line-height:26px;">wordpress设置文章置顶的方法：1、登录wordpress后台；2、点击左侧菜单栏文章-所有文章；3、鼠标移动到文章标题，点击快速编辑；4、勾选右边置顶这篇文章；5、最后点击更新按钮即可。</p>
<p><span>所属分类:wordpress</span>   <span>浏览:315</span>   <span>添加时间:2019-11-02 17:59:59</span></p>
</div>
</div>
<div class="main_left_list"> <img src="_CSS_/static/image/wordpress.jpg" width="260" height="160" class="fl"> <div class="fl" style="width:480px;margin-left:20px;">
<h2>wordpress如何设置文章置顶</h2>
<p style="margin:15px 0px 15px;line-height:26px;">wordpress设置文章置顶的方法：1、登录wordpress后台；2、点击左侧菜单栏文章-所有文章；3、鼠标移动到文章标题，点击快速编辑；4、勾选右边置顶这篇文章；5、最后点击更新按钮即可。</p>
<p><span>所属分类:wordpress</span>   <span>浏览:315</span>   <span>添加时间:2019-11-02 17:59:59</span></p>
</div>
</div>
</div>
<div class="fc"></div> </div> <div class="main_right fl"> <div class="tech">发布技术文章</div>
<div class="news_first">
<h3>头条</h3> <img src="_CSS_static/image/zww.png">
<p>同为动态语言，PHP为何比Python快那么多？原因解</p> <p>2019年最新最全面的CMS开发视频教程（收藏）</p>
<p>预警！！！PHP 远程代码执行漏洞</p>
<p>ThinkPHP6.0今天正式发布</p>
<p>优化CSS并加速网站的21种方法</p>
<p>Web 性能优化：图片优化让网站大小减少 62%</p>
<p>四大常见PHP开源CMS网站系统安装视频教程</p>
<p>金九银十，学习正当时！ php中文网新课不断上线中！</p>
</div>
</div>
</div>
<div class="fc"></div>
{/block}
//静态资源文件public/static style.css image图片文件夹
*{margin: 0;padding: 0;}.fl{float:left;}.fr{float:right;}.fc{clear:both;}
/*头部样式*/.header{width:100%;height:65px;background:#000000;color:#AFAFAF;}.top_nav li{float:left;list-style:none;line-height: 60px;text-align: center;margin-left:40px;}.search{margin-left:60px; height:60px;width:250px;display: inline-block;line-height: 60px;}.search input{margin-top: 18px; padding-left:10px;border: none;border-radius:24px;height:26px;width:200px;position:absolute;}.search span{font-size: 14px;position: relative;height: 26px;width:60px;line-height: 26px;text-align: center;background: rgb(0,0,255,0.8);top:0px;left:151px;border-top-right-radius:24px;border-bottom-right-radius:24px;display: inline-block;}
.login{margin-right:100px;height: 60px;width:150px;}.login span{height: 60px;width:100px;line-height: 60px;text-align: center;margin-left: 20px;}
/*主体样式左边*/
.main{width:100%;font-size: 14px;background: #EEEEEE;display: inline-block;}.main_left{width:800px;background: #ffffff;margin-left:110px;margin-top: 20px;}.main_left li{float:left;list-style: none;margin-left: 15px;}.main_left_home{width:800px;height: 60px;line-height: 60px;border-bottom: #f5f5f5;padding-left: 10px;}.main_left_nav{width:800px;height: 60px;line-height: 60px;background: ;border-bottom: 1px solid #EEEEEE;padding-left: 10px;}.main_left_list{margin:0px 0px;padding: 5px 0px;background: #FFFFFF; border-bottom: 1px solid #EEEEEE;display: inline-block;}
/*右边*/
.main_right{width:380px;margin-left:20px;}.tech{width:378px;height:58px;background: #FF5722;border: 2px solid #F01400;margin-top: 20px;color:#ffffff;font-size: 20px;line-height: 60px;text-align: center;} h3{margin:10px 0px;}.news_first{width:380px;border-top:2px solid #000000;margin-top: 10px;background: #ffffff;}.news_first p{margin: 10px 10px;}
/*底部样式*/
.fooder{width:100%;height:200px;background:#393D49;}.bottom_nav ul{padding-top: 30px;margin-left: 30px;}.bottom_nav ul li{float:left;list-style: none;color:#C8CDD2;font-size: 14px;margin-left:30px;}.fooder_right{margin:50px 100px;}