[Angular实战网易云]——3、页面布局

最新推荐文章于 2024-02-18 05:00:00 发布

虽菜但瘾

最新推荐文章于 2024-02-18 05:00:00 发布

阅读量660

点赞数

分类专栏： Angular网易云文章标签： html5 less angular2

本文链接：https://blog.csdn.net/sungoodluck666/article/details/108651883

版权

本文介绍如何在Angular项目中实现根页面布局，包括头部、底部和中间内容区域，以及可选的侧边菜单。通过创建app.component及app.component.less文件，设置全局路由重定向至首页，并在home模块下创建组件。最后，讨论了网站页面布局的两栏式和三栏式设计，强调了合理内容分布对用户体验的重要性。

摘要由CSDN通过智能技术生成

根页面

创建完目录之后，就可以实现根页面了，各个子页面都是嵌套在根页面之中，所以根页面要有一定的布局。一般的pc页面都是包含头部、底部、中间的内容、左侧和右侧的菜单视情况而定。
页面布局
这个案例也是采用这种布局。在这里插入图片描述

app.component

<div id="app">
  <nz-layout class="layout">
  <!--头部-->
    <nz-header class="header">
      <div class="wrap">
        <div class="left">
          <h1>Music</h1>
          <ul nz-menu nzTheme="dark" nzMode="horizontal">
            <li nz-menu-item>发现</li>
            <li nz-menu-item>歌单</li>
          </ul>
        </div