返回模板继承,模仿......登陆

模板继承,模仿php页面

肖凌2019-11-04 21:53:2626

//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>&nbsp&nbsp&nbsp<span>浏览:315</span>&nbsp&nbsp&nbsp<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>&nbsp&nbsp&nbsp<span>浏览:315</span>&nbsp&nbsp&nbsp<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>&nbsp&nbsp&nbsp<span>浏览:315</span>&nbsp&nbsp&nbsp<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;}

最新手记推荐

• 依赖注入小例子• 模板显示用户信息表,并分页显示• 模板继承,模仿php页面• 模拟用户登录验证的案例 依赖注入 Facade• 创建一个验证器, 用来对模型对应的表中字段进行验证处理

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网