【无标题】

pinyTT

于 2022-04-13 19:30:36 发布

阅读量38

点赞数

文章标签： laravel

本文链接：https://blog.csdn.net/Lucy_sun/article/details/124155764

版权

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>@yield("title",'圣杯布局')</title>

</head>
<style>
 *{
  color: #fff;
  text-align: center;
 }
 header{
  background-color: lightpink;
  height: 150px;
  width: 100%;
  line-height: 150px;
 }
 .flex-box{
  display: flex;
 }
 .flex-left{
  background-color: lightblue;
  flex: 0 0 200px;
  height: 400px;
  width: 100px;
  line-height: 400px;
 }
 .flex-right{
  background-color: lightblue;
  flex: 0 0 200px;
  height: 400px;
  width: 100px;
  line-height: 400px;
  text-align: center;
 }
 .flex-center{
  background-color: lightgray;
  flex-grow: 1;
  height: 400px;
  width: 50px;
  line-height: 400px;
  text-align: center;
 }
 footer{
  background-color: lightpink;
  height: 150px;
  width: 100%;
  line-height: 150px;
  text-align: center;
 }
</style>
<body>
 <header>header</header>
 <div class="flex-box">
  <div class="flex-left">@yield('left')</div>
  <div class="flex-center">@yield('main')</div>
  <div class="flex-right">@yield('right')</div>
 </div>
 <footer>footer</footer>

</body>
</html>

在这里插入图片描述

pinyTT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
【无标题】

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>@yield("title",'圣杯布局')</title></head><style> *{ color: #fff; text-align: center; } header{ background-color: lightpink; height: 150p
复制链接

扫一扫

【无标题】

“相关推荐”对你有帮助么？