Flex 与 Grid 实现一个带有导航条的简单页面布局

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
Flex 与 Grid 实现一个带有导航条的简单页面布局

这里做一个如下图所示的页面布局：

1、划分功能区

整个页面分为页头（导航条）、侧边栏、主体内容区和页脚四个部分，使用 Grid 布局来实现功能区的划分：

  • HTML 部分
    1. <body>
    2.   <div class="container">
    3.       <div class="gridItem"><nav></nav></div>
    4.       <div class="gridItem">sidebar</div>
    5.       <div class="gridItem">main content</div>
    6.       <div class="gridItem">
    7.           <footer><p>Copyright &copy; all right reversed. </p></footer>
    8.       </div>
    9.   </div>
    10. </body>
  • CSS 部分
    1. .container {
    2.   display: grid;
    3.   grid-template-rows: 3rem calc(100vh - 6rem) 3rem;
    4.   grid-template-columns: 1fr 3fr;
    5.   grid-template-areas:
    6.       "navbar navbar"
    7.       "sidebar main"
    8.       "footer footer";
    9. }
    10. .gridItem{
    11.   border: 1px solid red;
    12. }
    13. .gridItem:nth-child(1){
    14.   grid-area: navbar;
    15. }
    16. .gridItem:nth-child(2){
    17.   grid-area: sidebar;
    18. }
    19. .gridItem:nth-child(3){
    20.   grid-area: main;
    21. }
    22. .gridItem:nth-child(4){
    23.   grid-area: footer;
    24. }
2、导航条

使用 Flex 布局来实现导航条：

  • HTML 部分（第一个 gridItem 内）
    1. <nav>
    2.   <ul>
    3.       <li><span><a class="linkItem" href="#">link1 </a></span></li>
    4.       <li><span><a class="linkItem" href="#">link2 </a></span></li>
    5.       <li><span><a class="linkItem" href="#">link3 </a></span></li>
    6.       <li><span><a class="linkItem" href="#">link4 </a></span></li>
    7.       <li><span><a class="linkItem" href="#">link5 </a></span></li>
    8.       <li><span><a class="linkItem" href="#">link6 </a></span></li>
    9.   </ul>
    10. </nav>
  • CSS 部分
    1. nav>ul{
    2.   list-style: none;
    3.   display: flex;
    4.   flex-direction: row;
    5.   justify-content: start;
    6. }
    7. nav>ul>li>span{
    8.   margin: 0 1rem;
    9. }
    10. .linkItem{
    11.   line-height: 3rem;
    12. }
3、其他 CSS 样式设置
  1. /* 盒子模型初始化 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. /* 页脚样式 */
  8. footer>p{
  9.     line-height: 3rem;
  10.     text-align: center;
  11. }
【本文由：大丰网站开发 http://www.1234xp.com/dafeng.html 处的文章,转载请说明出处】
更多阅读