css - 如何在 CSS 中制作 gmail 样式的配置文件菜单？

Question

我想制作一个类似于 Gmail 的配置文件菜单，其中包含用户的显示名称和他的用户名，以及两个带有设置和注销的按钮。我想把它做成 8 Angular 。

http://prntscr.com/q1vd8y

  <li>

        <!-- user profile -->
        <div class="profile">
          <img class="avatar"  src="" /><span></span>
          <!-- more menu -->
          <ul class="menu">
            <li class="name">{{name}}</li>
            <li class="name">{{useremail}}</li>
            <li class="name">{{visiblename}}</li>
            <li><a href="={{url}}">Settings</a></li>
            <li><a [routerLink]='["/logout"]'>Log out</a></li>
          </ul>
        </div>
      </li>
    </ul>

Answer 1

https://material.io/design/

我的 friend ，这是唯一的 Material Design! 你可以找到 css 框架来帮助你像

https://materializecss.com/

例如!

https://material.angular.io/对于 Angular