Question

我复制了来自http://materializecss.com/side-nav.html

的物化的样本sidenav

所以我复制了来自inspect元素的代码，这就是我得到的

<!DOCTYPE html>
<html>
<head>
    <title>GROUPIE</title>  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".button-collapse").sideNav();
            $('.parallax').parallax();
            $('.modal-trigger').leanModal();
            $(".dropdown-button").dropdown({
                hover: false
            });
        });
    </script>
</head>
<body>
    <ul id="slide-out" class="side-nav" style="transform: translateX(0px)"> 
        <li>
            <div class="userView">
                <div class="backgroud">
                    <img src="assets/images/asdas.jpg">
                </div>
                <a href="#!user">
                    <img src="assets/images/logo.jpg">
                </a>
                <a href="#!name">
                    <span class="white-text name">
                        Jayvee Javier
                    </span>
                </a>
                <a href="#!email">
                    <span class="white-text email">
                        jayveejavier666@yahoo.com
                    </span>
                </a>
            </div>
        </li>
    </ul>

    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>       
</body>
</html>

但我得到了一个不同的输出就是这个（我比较了网站的输出和我实际得到的）

Expected Result vs Actualt Result

左图是应该看起来的样子。正确的图片是我的实际结果。

它与样品中显示的非常不同。有什么我错了吗？感谢您的帮助。

Answer 1

我将class=backgroud更改为class=background。像魅力一样。

Sidenav UserView Materialize不起作用

1 个答案: