https://getmdl.io/网页内用的main.css怎么得到？

Question

https://getmdl.io/网页内用的main.css怎么得到？

发布于
2016-12-03

新手上路，请多包涵

我将.md用marked生成了html文件，变成如今的页面：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="../mdl/material.min.css" />
  <link rel="stylesheet" href="../mdl/font.css" />
  <link rel="stylesheet" href="../stylesheets/style.css" />
  <script src="../mdl/material.min.js"></script>
  <meta charset="utf-8">
  <title>news</title>
</head>
<style>
  .page-content {
    border-radius: 2px;
    padding: 80px 50px;
    margin-bottom: 80px;
  }
</style>

<body>
  <!-- Always shows a header, even in smaller screens. -->
  <div class="mdl-layout mdl-js-layout ">
    <header class="mdl-layout__header mdl-layout__header--scroll">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">MENU</span>
        <!-- Add spacer, to align navigation to the right -->
        <div class="mdl-layout-spacer"></div>
        <!-- Navigation. We hide it in small screens. -->
        <nav class="mdl-navigation mdl-layout--large-screen-only">
          <a class="mdl-navigation__link" href="">主页</a>
          <a class="mdl-navigation__link" href="">登陆</a>
          <a class="mdl-navigation__link" href="">注册</a>
        </nav>
      </div>
    </header>
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title">Title</span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">主页</a>
        <a class="mdl-navigation__link" href="">登陆</a>
        <a class="mdl-navigation__link" href="">注册</a>
      </nav>
    </div>
    <main class="mdl-layout__content">
      <div class=" mdl-grid">
        <div class="mdl-cell mdl-cell--1-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div>
        <div class="page-content mdl-color--white mdl-shadow--4dp content mdl-color-text--grey-800 mdl-cell mdl-cell--10-col">
          <h1>Basic认证</h1>
          <blockquote>
            <p>Basic认证是客户端与服务器进行请求时，允许通过用户名和密码实现的一种身份认证方式</p>
          </blockquote>
          <p>如果一个页面需要Basic认证，它会检查请求报文头中的Authorization字段的内容，该字段的值由认证方式和加密值构成，如下所示:</p>
          <pre>
            <code>&gt;GET/HTTP/1.1
&gt;Authorization: Basic dXNlcjpwYXNz
&gt;User-Agent:curl/7.24.0 (x86_ 64-apple一darwin12.0) libcurl/7.24.0 OpenSSL/0.g.8r zlib/1.2.5
&gt;Host:www.baidu.com
&gt;Accept:*/*
</code></pre>
          <p>在Basic认证中，它会将用户和密码部分组合:&quot;username&quot;+&quot;:&quot;+&quot;password&quot;。然后进行Base64编码，如下所示：</p>
          <pre><code>var encode=function(username,password){
return new Buffer(username+’:’+password).toString(’base64');
};
</code ></pre>
          <p>如果用户首次访问该网页，URL地址中也没携带认证内容，那么浏览器会响应一个401未授权的状态码，如下所示:</p>
          <pre><code class=" language-markup">function (req, res){
  var auth = req.headers[’authorization'] || ' ';
  var parts = auth.split(' ');
  var method = parts[0] ||' ';//Basic
  var encoded = parts[1] ||' ';//dXNlcjpwYXNz
  var decoded = new Buffer(encoded,’base64').toString(’ut仁8').split(&quot;:”);
  var user = decoded[0];//user
  var pass = decoded[1];//pass
  if(!checkUser(user, pass)){
    res.setHeader('WWW-Authenticate'，’Basic realm=&quot;Secure Area&quot;’);
    res.writeHead(401);
    res.end();
  }else{
    handle(req, res);
  }
}
</code></pre>
          <p>在上面的代码中，响应头中的WWW-Authenticate字段告知浏览器采用什么样的认证和加密方式。一般而言，未认证的情况下，浏览器会弹出对话框进行交互式提交认证信息.</p>
          <p><img src="http://upload-images.jianshu.io/upload_images/1521354-274e155fcc0660a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
              alt="浏览器弹出的交互式提交认证信息的对话框"></p>
          <p>当认证通过，服务器端响应200状态码之后，浏览器会保存用户名和密码口令，在后续的请求中都携带上Authorization信息。</p>
          <p><strong>虽然经过Base64加密后在网络中传送，但是这几乎是明文，十分危险，一般只有在HTTPS情况下使用。也可加入服务器端随机数来保护认证过程</strong></p>
          <p>参考文献：</p>
          <ul>
            <li><a href="http://www.csdn.net/article/2015-12-04/2826393-web-authentication-methods-explained">在Node应用中实施Web认证的四大方法</a></li>
            <li><a href="https://blog.risingstack.com/web-authentication-methods-explained/">Web Authentication Methods Explained</a></li>
          </ul>

        </div>
      </div>
    </main>
    <!--<footer class="mdl-mini-footer">
      <div class="mdl-mini-footer__left-section">
        <div class="mdl-logo">Powerd By Yaco</div>
        <ul class="mdl-mini-footer__link-list">
          <li><a href="#">Help</a></li>
          <li><a href="#">More</a></li>
        </ul>
      </div>
    </footer>-->
  </div>

</body>

</html>

是我惊奇的是code标签内的代码段没有样式

无样式

然而我将

<h1>Basic认证</h1>
          <blockquote>
            <p>Basic认证是客户端与服务器进行请求时，允许通过用户名和密码实现的一种身份认证方式</p>
          </blockquote>
          <p>如果一个页面需要Basic认证，它会检查请求报文头中的Authorization字段的内容，该字段的值由认证方式和加密值构成，如下所示:</p>
          <pre>
            <code>&gt;GET/HTTP/1.1
&gt;Authorization: Basic dXNlcjpwYXNz
&gt;User-Agent:curl/7.24.0 (x86_ 64-apple一darwin12.0) libcurl/7.24.0 OpenSSL/0.g.8r zlib/1.2.5
&gt;Host:www.baidu.com
&gt;Accept:*/*
</code></pre>
          <p>在Basic认证中，它会将用户和密码部分组合:&quot;username&quot;+&quot;:&quot;+&quot;password&quot;。然后进行Base64编码，如下所示：</p>
          <pre><code>var encode=function(username,password){
return new Buffer(username+’:’+password).toString(’base64');
};
</code ></pre>
          <p>如果用户首次访问该网页，URL地址中也没携带认证内容，那么浏览器会响应一个401未授权的状态码，如下所示:</p>
          <pre><code class=" language-markup">function (req, res){
  var auth = req.headers[’authorization'] || ' ';
  var parts = auth.split(' ');
  var method = parts[0] ||' ';//Basic
  var encoded = parts[1] ||' ';//dXNlcjpwYXNz
  var decoded = new Buffer(encoded,’base64').toString(’ut仁8').split(&quot;:”);
  var user = decoded[0];//user
  var pass = decoded[1];//pass
  if(!checkUser(user, pass)){
    res.setHeader('WWW-Authenticate'，’Basic realm=&quot;Secure Area&quot;’);
    res.writeHead(401);
    res.end();
  }else{
    handle(req, res);
  }
}
</code></pre>
          <p>在上面的代码中，响应头中的WWW-Authenticate字段告知浏览器采用什么样的认证和加密方式。一般而言，未认证的情况下，浏览器会弹出对话框进行交互式提交认证信息.</p>
          <p><img src="http://upload-images.jianshu.io/upload_images/1521354-274e155fcc0660a1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"
              alt="浏览器弹出的交互式提交认证信息的对话框"></p>
          <p>当认证通过，服务器端响应200状态码之后，浏览器会保存用户名和密码口令，在后续的请求中都携带上Authorization信息。</p>
          <p><strong>虽然经过Base64加密后在网络中传送，但是这几乎是明文，十分危险，一般只有在HTTPS情况下使用。也可加入服务器端随机数来保护认证过程</strong></p>
          <p>参考文献：</p>
          <ul>
            <li><a href="http://www.csdn.net/article/2015-12-04/2826393-web-authentication-methods-explained">在Node应用中实施Web认证的四大方法</a></li>
            <li><a href="https://blog.risingstack.com/web-authentication-methods-explained/">Web Authentication Methods Explained</a></li>
          </ul>

用F12放进https://getmdl.io/components/官网里面后其是有样式的

其样式显示来自main.css
请问我该怎么做让我的html也有样式？？？

css 前端框架 material-design html material-design-lite

阅读 2.9k

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

https://getmdl.io/网页内用的main.css怎么得到？

你尚未登录，登录后可以

css布局怎么保证右边一直在可视范围内？

element-plus 的 el-radio-group 组件选中一个值之后通过selectedColor.value = ''无法取消选中？

CSS如何巧妙实现标题居中、关闭按钮居右效果？

js阻止冒泡问题？

Scss的rgba()方法无法对变量进行二次编译？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？