4

我想为我的 Web 应用程序设计一个布局，使用 Angular Material Design 的布局，它们的布局建立在 flexbox 上。

在 codepen 上，我尝试创建我想要的布局，但它确实看起来像我希望的那样。

   <html lang="en" ng-app="StarterApp">
  <head>
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.css">
  </head>
  <body layout="column" ng-controller="AppCtrl">
    <div flex layout="row" layout-align="center center" style="border: 1px solid #FF00FF; height: 30px; position: fixed;">
      <h1>Please make me fixed</h1>
    </div>
    <div flex layout="row" layout-align="center center" style="border: 1px solid #FF00FF; height:30px; position: fixed;">
       <h1>Please make me fixed</h1>
    </div>
    <div layout="row" flex>

    </div>
    <!-- Angular Material Dependencies -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-aria.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular-material.min.js"></script>
  </body>
</html>
  1. 创建一个固定的导航栏，由两个不同颜色的块组成。
  2. 一个 div flexbox，flex 值为 30。
4

0 回答 0