当前位置：网站首页>Laravel implements the Holy Grail model with template inheritance

Laravel implements the Holy Grail model with template inheritance

2022-04-23 05:20:00 【klx2545845553】

The parent template

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>
    <div class="container">
        <div class="header">
            @section('header')
            <h1> head </h1>
            @show
        </div>
        <div class="left">
            @section('left')
            <h1> Left </h1>
            @show
        </div>
        <div class="right">
            @section('right')
            <h1> Right </h1>
            @show
        </div>
        <div class="main">
            @section('main')
            <h1> in </h1>
            @show
        </div>
        <div class="footer">
            @section('footer')
            <h1> The footer </h1>
            @show
        </div>
    </div>
</body>
<style type="text/css"> /* *{ margin: 0; padding: 0; }*/ .container{
       border:3px solid red; height: 600px; /* margin: 20px 20px 20px 20px;*/ position: relative; } .header{
       border:1px solid red; text-align: center; overflow:hidden; top: 0; width: 100%; height: 80px; } .left{
       width: 200px; height: 400px; border:1px solid lightgreen; float: left; text-align: center; line-height: 400px; } .main{
       border:2px solid blue; height: 400px; text-align: center; float: left; width: 1000px; } .right{
       width: 200px; height: 400px; border:2px solid green; float: right; text-align: center; line-height: 400px; } .footer{
       border:2px solid lightcoral; text-align: center; position: absolute; bottom: 0; /* 4.  Set the footers position by absolute after , And then bottom Value to 0, You can put it at the bottom of the page  */ height: 110px; width: 100%; } </style>
</html>

Template inheritance

@extends('layout.modelfather')
@section('title'," grail ")
@section('header')
<h1>header</h1>
@endsection
@section('left')
<h3>left</h3>
@endsection
@section('right')
<h3>right</h3>
@endsection
@section('main')
<h1> Holy Grail model </h1>
@endsection
@section('footer')
<h3>footer</h3>
@endsection