abstract：//base.html 模板{block name="header"} {include file="public/header" /} {/block}{block name="main"} &
//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>社區(qū)問答</li>
<li>技術(shù)文章</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>網(wǎng)站首頁</li>
<li>PHP視頻</li>
<li>PHP實戰(zhàn)</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中文網(wǎng):獨家原創(chuàng),永久免費的在線PHP視頻教程,PHP技術(shù)學習陣地!</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 http://www.miracleart.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>技術(shù)文章
</div>
<div class="main_left_nav">
<span class="fl">方向：</span>
<ul class="fl">
<li>全部</li> <li>后端開發(fā)</li> <li>WEB前端</li> <li>數(shù)據(jù)庫</li> <li>運維</li> <li>開發(fā)工具</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設置文章置頂?shù)姆椒ǎ?、登錄wordpress后臺；2、點擊左側(cè)菜單欄文章-所有文章；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設置文章置頂?shù)姆椒ǎ?、登錄wordpress后臺；2、點擊左側(cè)菜單欄文章-所有文章；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設置文章置頂?shù)姆椒ǎ?、登錄wordpress后臺；2、點擊左側(cè)菜單欄文章-所有文章；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">發(fā)布技術(shù)文章</div>
<div class="news_first">
<h3>頭條</h3> <img src="_CSS_static/image/zww.png">
<p>同為動態(tài)語言，PHP為何比Python快那么多？原因解</p> <p>2019年最新最全面的CMS開發(fā)視頻教程（收藏）</p>
<p>預警?。。HP 遠程代碼執(zhí)行漏洞</p>
<p>ThinkPHP6.0今天正式發(fā)布</p>
<p>優(yōu)化CSS并加速網(wǎng)站的21種方法</p>
<p>Web 性能優(yōu)化：圖片優(yōu)化讓網(wǎng)站大小減少 62%</p>
<p>四大常見PHP開源CMS網(wǎng)站系統(tǒng)安裝視頻教程</p>
<p>金九銀十，學習正當時！ php中文網(wǎng)新課不斷上線中！</p>
</div>
</div>
</div>
<div class="fc"></div>
{/block}
//靜態(tài)資源文件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;}
Correcting teacher：天蓬老師Correction time：2019-11-12 11:18:28
Teacher's summary：完成的不錯, 作業(yè)放在代碼塊中提交效果更好