网站基础布局（圣杯布局）

最新推荐文章于 2022-08-08 15:07:59 发布

高级项目经理

最新推荐文章于 2022-08-08 15:07:59 发布

阅读量215

点赞数

分类专栏： web前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837268/article/details/90315972

版权

web前端专栏收录该内容

419 篇文章 10 订阅

订阅专栏

<template>
<body class="HolyGrail">
  <header>...</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">...</main>
    <nav class="HolyGrail-nav">...</nav>
    <aside class="HolyGrail-ads">...</aside>
  </div>
  <footer>...</footer>
</body>
</template>
<style>
.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
}

.HolyGrail-nav {
  /* 导航放到最左边 */
  order: -1;
}
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

高级项目经理

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站基础布局（圣杯布局）

<template><body class="HolyGrail"> <header>...</header> <div class="HolyGrail-body"> <main class="HolyGrail-content">...</main> <nav class=...
复制链接

扫一扫