摘要：通过本章的学习，了解了模板布局的使用和调用，了解了模板布局在网站开发中的重要性，通过合理的模板布局，可以简化页面布局的代码，极大地提高网页的编写速度。练习代码如下（小米商城登录页面）：app\index\controller\index.php: <?php namespace app\index\controller; use app\model\index\logi
通过本章的学习，了解了模板布局的使用和调用，了解了模板布局在网站开发中的重要性，通过合理的模板布局，可以简化页面布局的代码，极大地提高网页的编写速度。练习代码如下（小米商城登录页面）：
app\index\controller\index.php:
<?php
namespace app\index\controller;
use app\model\index\login\Container;
use app\model\index\login\Facade;
use think\Controller;
use think\Db;
use think\facade\View;
use think\Request;
class Index extends Controller
{
public function index()
{
}
public function login()
{
return $this->view->engine->layout('layout','{__CONTENT__}')->fetch('index@index/login');
}
}app\index\view\index\login.html:
<!DOCTYPE html>
{extend name="base"}
{block name='top'}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="shortcut icon" type="image/x-icon" href="/static/images/footlogo.png" />
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="/static/css/login.css">
<link rel="stylesheet" type="text/css" href="/static/font-awesome/css/font-awesome.min.css">
<script type="text/javascript" src="/static/layui/layui.js"></script>
</head>
<body>
{/block}
{block name='content'}
<div class="content">
<div class="login_content">
<div class="login_form">
<div class="login_form_main">
<p style="color: #ff6700;" id="regTabs_0" onclick=" ChangeReg('0','register_',1)">账号登录</p>
<span>|</span>
<p id="regTabs_1" onclick=" ChangeReg('1','register_',1)">扫码登录</p>
</div>
<div class="clear"></div>
<div class="login_form_content" id="register_0">
<form>
<input style="height: 45px" type="text" name="username" placeholder="邮箱/ 手机号码/小米ID">
<input style="height: 45px" type="text" name="password" placeholder="密码">
<button>登录</button>
</form>
<h6><a href="" style="color: #ff6700;">手机短信登录/注册</a><span><a href="">立即注册</a> | <a href="">忘记密码？</a></span></h6>
<div class="login_form_pic">
<p>其他方式登录</p>
<ul>
<li class="pic1" style="margin-right: 35px;"><i class="fa fa-qq"></i></li>
<li class="pic2" style="margin-right: 35px;"><i class="fa fa-weibo"></i></li>
<li class="pic3" style="margin-right: 35px;"><i class="fa fa-twitter-square"></i></li>
<li class="pic4"><i class="fa fa-weixin"></i></li>
</ul>
</div>
</div>
<div class="login_form_content0" style="display: none;" id="register_1">
<img src="/static/images/下载.png">
<p>使用<span style="color: #ff6700;">小米商城APP</span>扫一扫</p>
<p>小米手机可打开「设置」>「小米帐号」扫码登录</p>
</div>
</div>
</div>
</div>
{/block}
{block name='bottom'}
</body>
</html>
{/block}app\index\view\base.html:
{block name='top'}
{/block}
{block name='header'}
{include file='public/header' /}
{/block}
{block name='content'}
{/block}
{block name='footer'}
{include file='public/footer' /}
{/block}
{block name='bottom'}
{/block}app\index\view\public\header.html：
<div class="header"> <a href="#"><img src="/static/images/5.png"></a> </div>
app\index\view\public\footer.html：
<p style="margin-top: 60px;">简体<span>|</span>繁体<span>|</span>English<span>|</span> 常见问题<span>|</span> 隐私政策</p> <p>小米公司版权所有-京ICP备10046444-<img src="/static/images/ghs.png"> 京公网安备11010802020134号-京ICP证110507号</p>
public\static\static\css\login.css:
*{margin: 0px; padding: 0px;}
li{list-style:none;}
a{text-decoration: none;color: #ccc;cursor: pointer;}
.clear{clear: both;}
.header{width: 1226px;height: 100px;margin: 0px auto;line-height:90px;padding-left: 40px; margin-top:20px;}
.content{width: 100%;height: 580px;background: url(../images/login.png);}
p{width: 1226px;height: 38px;margin:0px auto;line-height: 38px;text-align: center;color: #757575;}
span{font-size: 13px;margin:0px 10px;}
.login_content{width: 1226px;height: 520px;margin:0px auto;}
.login_form{width: 410px;height: 520px;float: right;background: #fff;margin: 30px 50px;}
.login_form_main{width: 330px;margin:25px auto; }
.login_form_main p{font-size: 23px;text-align: center;float: left;color: #757575;width: 150px;height: 50px;line-height: 50px;}
.login_form_main span{font-size: 30px;float: left;height: 50px;line-height: 50px;color: #e0e0e0;}
.login_form_content{margin-top: 25px;}
input{border: none;width: 328px;height: 28px;padding: 11px;margin: 15px auto;border:1px solid #e0e0e0;display: block;}
button{border: none;width: 350px;display: block;height: 50px; margin: 25px auto 0px;background: #ff6700;color: #fff;}
.login_form_content h6{font-weight: 300;width: 350px;margin: 0px auto;height: 40px;line-height: 40px;}
.login_form_content span{float: right;}
.login_form_pic{width: 350px;margin:100px auto 0px;border-top: 1px solid #e0e0e0 ; position: relative;}
.login_form_pic p{width: 100px;height: 30px;line-height: 30px;color: #ccc;background: #fff;position: absolute;top:-15px;left: 125px;}
.login_form_pic ul {width: 233px; margin: 20px auto 0px;}
.login_form_pic ul li{float: left;height: 32px;width: 32px;line-height: 32px;color: #fff;text-align: center;border-radius: 16px;background:#6D6E6A; }
.login_form_pic ul li i{font-size: 17px;}
.pic1:hover{background: #0288d1;}
.login_form_content0{width: 350px;margin: 0px auto;text-align: center;}
.login_form_content0 img{height: 190px;width: 180px;margin:70px auto 15px;}
.login_form_content0 p{width: 350px;margin:0px auto; line-height: 20px;height: 20px;}效果图：
批改老师：天蓬老师批改时间：2019-02-27 13:07:47
老师总结：活用活用, 不错, 将前端 的案例,直接套模板, 做了一个动态的网站
