Community Learn Tools Library Leisure
search
English
Home > List of blog posts > Flex 与 Grid 实现一个带有导航条的简单页面布局
Blogger Information
Blog 29
fans 0
comment 0
visits 11078
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Flex 与 Grid 实现一个带有导航条的简单页面布局
尹辉
Original
531 people have browsed it

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. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：总体为什么问题
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post