laravel圣杯布局

最新推荐文章于 2024-03-20 11:43:51 发布

原创最新推荐文章于 2024-03-20 11:43:51 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#lavarel

这篇博客详细介绍了如何使用Flex布局来实现经典的圣杯布局。内容包括HTML结构、CSS样式设置，以及header、footer、左侧、中间和右侧内容区域的布局实现。重点展示了flexbox在创建响应式和自适应网页布局中的应用。

在这里插入图片描述

@extends('layout.shengbeibuju')
@section('title','shengbeibuju')
@section('left')
<p>left</p >
@endsection
@section('main')
<p>center</p >

@endsection
@section('right')
<p>right</p >
@endsection

<!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: lightcoral;
  flex: 0 0 200px;
  height: 400px;
  width: 100px;
  line-height: 400px;
 }
 .flex-right{
  background-color: lightcoral;
  flex: 0 0 200px;
  height: 400px;
  width: 100px;
  line-height: 400px;
  text-align: center;
 }
 .flex-center{
  background-color: lightyellow;
  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>