Question

我在页面中使用了卡片实现，页面看起来像这样

您可以在我的图片中看到我的卡片内容和说明，我按照materialize的指南操作，但在我的页面中无法使用

这是我的代码

    <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta name="description" content="">
            <meta name="author" content="">
            <!-- Favicons-->
            <link rel="apple-touch-icon-precomposed" href="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/apple-touch-icon-152x152.png">
            <meta name="msapplication-TileColor" content="#FFFFFF">
            <meta name="msapplication-TileImage" content="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/mstile-144x144.png">
            <link rel="icon" href="<?php echo base_url(); ?>assets/home-user/assets/img/favicon/favicon-32x32.png" sizes="32x32">
            <title>Home</title>
            <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
            <!-- Materialize core CSS -->
            <link href="<?php echo base_url(); ?>assets/home-user/materialize/css/materialize.css" rel="stylesheet" type="text/css">
            <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
            <!--[if lt IE 9]>
                <script src="assets/js/html5shiv.js"></script>
                <script src="assets/js/respond.min.js"></script>
            <![endif]-->
            <link href="<?php echo base_url(); ?>assets/home-user/template.css" rel="stylesheet" type="text/css">
        </head>
<body>
            <div class="container">
                        <div class="row">
                    <div class="col s12 m7">
                      <div class="card">
                        <div class="card-image">
                          <img src="http://materializecss.com/images/sample-1.jpg">

                        </div>

                        <div class="card-content">
                        <span class="card-title">Card Title</span>
                          <p>I am a very simple card. I am good at containing small bits of information.
                          I am convenient because I require little markup to use effectively.</p>
                        </div>

                        <div class="card-action">
                          <a href="#">This is a link</a>
                        </div>
                      </div>
                    </div>
            </div>
        <script src="<?php echo base_url(); ?>assets/home-user/assets/js/jquery.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/home-user/materialize/js/materialize.js"></
        <script src="<?php echo base_url(); ?>assets/home-user/index.js"></script>
</body>

我不知道我的代码有什么问题，谢谢

Answer 1

加载实现css和js 文件以及 jquery 文件...这是一个工作代码段

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
   <div class="container">
            <div class="row">
        <div class="col s12 m7">
          <div class="card">
            <div class="card-image">
              <img src="http://materializecss.com/images/sample-1.jpg">

            </div>

            <div class="card-content">
            <span class="card-title">Card Title</span>
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>

            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
</div>

＆＃13;

具体化的卡片内容不适合同类

1 个答案: