如何在CSS中制作Gmail样式个人资料菜单？

Question

我想在Gmail中创建一个配置文件菜单，其中包含用户的显示名称和用户名，以及两个带有设置和注销的按钮。我想以角度8做它。

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/

我的朋友，这里是唯一的材料设计！ 您可以找到可帮助您完成

的css框架

https://materializecss.com/

例如！

https://material.angular.io/（角度）