使用TinkPHP实现品字形布局

一、后台管理模版



后台管理模版通常使用frameset/iframe来布局。例如:

<!DOCTYPE html>
<html>
<head>
    <title>frameset</title>
</head>
<body>
    <frameset>
        <frame src="left.html"></frame>
        <frameset>
            <frame src="left.html"></frame>
            <frame src="right.html"></frame>
        </frameset>>
    </frameset>
</body>
</html>

但是在使用框架开发中我们不会去直接访问一个页面,而是通过访问一个控制器来获取一个被渲染的模版。针对上面的品型结构来实现一个控制器。

二、控制器


<?php
    namespace Home\Controller;
    use mysqli;
    use Think\Controller;

    /**
    *
    */
    class IndexContoller extends Controller{
        //渲染主视图
        public function  index(){
            $this->display();
        }
     //渲染顶部视图
        public function top(){
            $this->display();
        }
    //渲染左部视图
        public function left(){
            $this->display();
        }
    //渲染右部视图
        public function right(){
            $this->display();
        }
    }

三、模版


  • index.html
<!DOCTYPE html>
<html>
<head>
    <title>frameset</title>
</head>
<body>
    <frameset>
        <frame src="localhost/Applaction/Home/Idex/top"></frame>
        <frameset>
            <frame src="localhost/Applaction/Home/Idex/left"></frame>
            <frame src="localhost/Applaction/Home/Idex/right"></frame>
        </frameset>>
    </frameset>
</body>
</html>

这里的src全部替换成相应的控制器

  • 其它视图
<!DOCTYPE html>
<html>
<head>
    <title>frameset</title>
</head>
<body>
    This is top
    This is left
    This is right
</body>
</html>

四、常量使用



ThinkPHP中已经定义了许多常量,我们可以直接拿来使用。

 查看系统已定义常量,get_defined_constants就是用来获取所有常量的函数。

 public function getServerConst(){
        var_dump(get_defined_constants(true));
    }

经常使用与路径相关的常量有以下一些

这是我的项目结构:

直接在HTML中使用常量

访问结果

时间: 2024-10-19 13:35:41

使用TinkPHP实现品字形布局的相关文章

HTML学习笔记21——框架集(品字形布局)

框架:<frameset rows="200px,*">                      //rows表示行分块(cols表示列分块),*表示除了200px之外的大小,都赋给第二行 <frame src="xx.html" ></frame> <frame src="xx.html" ></frame>  </frameset> 不需要<body><

品字布局

满屏品字布局 思路:上面的div宽100%,下面的两个div分别宽50%,然后用float或者inline使其不换行即可. <div class="header">头部</div> <div class="left">左</div> <div class="right">右</div> .header,.left,.right{height: 300px;} .header{

CSS布局之品字布局

最近有同学面试被问到关于品字布局的问题.虽然我觉得这种布局确实比较难看,应该也不会用到,但是既然有人问到,我还是自己尝试写了一下品字布局.其实很简单. 先看效果: 第一种: 第二种: 第一种: 其实实现方法很简单,基本思路: (1)三块高宽是确定的: (2)上面那块用margin: 0 auto;居中: (3)下面两块用float或者inline-block不换行: (4)用margin调整位置使他们居中. inline方法代码如下: <!DOCTYPE html> <html>

后台首页品字形(frameset)框架搭建

get_defined_constants([true])//显示所有常量信息.参数true,表示分组显示,查看当前系统给我提供了哪些常量可以使用,包括自定义常量. __CONTROLLER__//获得请求当前控制器的URL地址,不包括控制器后面的方法.CONTROLLER_NAME//获得控制器的名称 类似的还有__MODULE__//获得当前请求模块的URL地址字符串,MODULE_NAME//获得模块名 __ACTION__//获得请求方法的URL,不包括参数,ACTION_NAME//获

Web前端面试指导(十七):一个满屏 品 字布局 如何设计?

题目点评 这道题目有可能是笔试题,有可能面谈的时候进行叙述,如果是笔试题要求对css样式代码非常熟练,如果是面谈叙述,就需要你的表达能力非常强,要抓住要点,把需要用到的技能点讲清楚就可以了. 需要用到技术 1.     元素水平居中对齐 1)        使用margin对齐(推荐) 2)        使用left:50% 3)        使用text-align 2.  元素对相对窗口定位 1)        使用filxed(推荐) 2)        使用absolute定位 3)

品字布局设计

基本思路1:三块高宽是确定的:上面那块用margin: 0 auto;居中:下面两块用float或者inline-block不换行:用margin调整位置使他们居中. <!DOCTYPE html> <html>     <head lang="en">       <meta charset="UTF-8">       <title></title>     <style>  *

满屏品字布局css

<!doctype> <html> <head> <title>test</title> </head> <style> *{ margin:0; padding: 0; } .main{ width:100%; height: 60%; } .main .left, .main .right{ width:50%; height: 100%; float:left; background: #a23; } .main .

一个满屏 品 字布局 如何设计?

需要用到的技术 1.     元素水平居中对齐 1)        使用margin对齐(推荐) 2)        使用left:50% 3)        使用text-align 2.  元素对相对窗口定位 1)        使用filxed(推荐) 2)        使用absolute定位 3)        使用html和body的width和height填?这个窗口 3.     元素左右定位 1)        使用float左右浮动 2)        使用绝对定位进行左右

thinkphp搭建后台品字形框架页面

页面分为三个部分 head,left,right共同组成了index 在indexController中 function Index(){ $this->display(); } //展现后腰头部页面 function head(){ $this->display(); } //左边页面 function left(){ $this -> display(); } //右边页面 function right(){ $this->display(); } 前台一共有四个页面 分别是