mdui实现移动端手机端个人中心我的页面菜单效果代码-html代码-BFW代码库

mdui实现移动端手机端个人中心我的页面菜单效果代码

代码语言：html

代码描述：mdui实现移动端手机端个人中心我的页面菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/mdui.min.css">

    <style>
        .mw-mf-page-left,
        #mengji-sidebar {
          background-color: #fcfaf2;
          min-height: 100vh;
        }
        
        #mengji-sidebar-header {
          min-height: 33vh;
          /* https://www.pixiv.net/artworks/90849869 */
          background-image: url(//repo.bfw.wiki/bfwrepo/image/611da9b999795.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90);
          background-size: 100% auto;
          background-position: bottom;
          background-color: #3a5d5e;
          color: #fcfaf2;
          padding: 10px;
        }
        #mengji-sidebar-header a {
          color: inherit;
          text-decoration: none;
        }
        
        #mengji-sidebar .name-card {
          display: flex;
          padding: 15px;
          align-items: center;
        }
        
        #mengji-sidebar .name-card > .avator {
          width: 56px;
          height: 56px;
          margin-right: 32px;
          border-radius: 50%;
          overflow: hidden;
        }
        
        #mengji-sidebar .name-card > .avator > img {
          width: 100%;
          height: 100%;
        }
        
        #mengji-sidebar-content {
          padding-bottom: 76px;
        }
        
        .glass {
          opacity: 0.75;
        }
    </style>


</head>

<body translate="no">
    <div id="mengji-sidebar">
        <div id="mengji-sidebar-header">
            <div class="mdui-toolbar tool glass">
                <div class="mdui-toolbar-spacer"></div>
                <a href="javascript:;" class="mdui-btn mdui-btn-icon">
                    <i class="mdui-icon material-icons">settings</i>
                </a>
            </div>
            <a class="name-card">
                <div class="avator">
                    <img src="//repo.bfw.wiki/bfwrepo/image/60d41f5173b0d.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_10.........完整代码请登录后点击上方下载按钮下载查看