如何在CSS中创建gmail风格的个人资料菜单？

我想做一个像Gmail一样的配置文件菜单，它包含用户的显示名和用户名，还有两个带有设置和注销的按钮。我想订8号

{{name}
{{useremail}
{{visiblename}

注销

在这里，我的朋友，唯一的，材料设计！ 你可以找到css框架来帮助你做到这一点

比如说

角的

  <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>