Question

我最近遇到了一些网站性能改进的任务，但由于问题中使用的概念above和below，我感到很困惑，无法实现所要求的内容。（ーー）

折叠是否意味着页面分为两部分？（通过设计和css规则）所以解决方案是检测用于第二部分的css并将其加载到页面底部？

的任务
style.css中的折叠样式下面是延迟上面折叠内容的渲染。提高上述折叠内容的加载速度。

您的解决方案应该仅针对折叠内容的内联CSS，并确保加载main.css不会阻止页面的呈现。

＆＃13;

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('scroll-button').addEventListener('click', () => {
    document.getElementsByClassName('conversation-headline')[0]
        .scrollIntoView(true);
  });
});

＆＃13;

html {
  background-color: #FFF;
}

body {
  background-color: #FFF;
  color: #848484;
  font-family: "Helvetica","Arial",sans-serif;
  margin: 0;
  min-height: 100vh;
}

h1 {
  font-size: 28px;
  font-weight: 100;
}

h2 {
  color: #FFF;
  font-size: 38px;
  font-weight: 100;
}

h3 {
  color: #000;
  font-size: 38px;
  font-weight: 100;
  line-height: 125%;
  margin: 0 40px;
}

.card {
  margin: 0 auto;
  max-width: 79%;
}

.card-content {
  align-items: center;
  box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),
    0 1px 10px 0 rgba(0,0,0,.12),
    0 2px 4px -1px rgba(0,0,0,.2);
  display: flex;
  justify-content: space-around;
  padding: 10px;
}

.conversation-diag {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.conversation-headline {
  color: #000;
  font-size: 38px;
  font-weight: 100;
  line-height: 125%;
  margin: 0 40px;
}

.conversation-pane {
  display: flex;
  flex-direction: column;
  height: 40vh;
  justify-content: space-around;
  padding: 40px;
}

.flipped {
  transform: scaleX(-1);
}

.header {
  align-items: center;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.14),
    0 1px 10px 0 rgba(0, 0, 0, 0.12);
  display: flex;
  height: 10vh;
  padding: 0 16px;
}

.ribbon {
  align-items: center;
  background-color: #848484;
  display: flex;
  flex-direction: column;
  height: 90vh;
  justify-content: space-around;
}

.ribbon button {
  background-color: #FFF;
  box-shadow:
    0 2px 2px 0 rgba(0,0,0,0.14),
    0 3px 1px -2px rgba(0,0,0,0.2),
    0 1px 5px 0 rgba(0,0,0,0.12);
  color: #848484;
  cursor: pointer;
  font-size: 25px;
  padding: 0.7em 0.57em;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Socializer</title>
    <link rel="stylesheet" href="styles/main.css">
    <script src="scripts/app.js" type="text/javascript"></script>
  </head>
  <body>
    <header class="header">
      <svg fill="#848484" height="48" viewbox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 0h24v24H0z" fill="none"/>
          <path d="M21 5v14h2V5h-2zm-4 14h2V5h-2v14zM14 5H2c-.55 0-1 .45-1 1v12c0 .55.45 1 1 1h12c.55 0 1-.45 1-1V6c0-.55-.45-1-1-1zM8 7.75c1.24 0 2.25 1.01 2.25 2.25S9.24 12.25 8 12.25 5.75 11.24 5.75 10 6.76 7.75 8 7.75zM12.5 17h-9v-.75c0-1.5 3-2.25 4.5-2.25s4.5.75 4.5 2.25V17z"/>
      </svg>
      <h1>Socializer</h1>
    </header>
    <div class="ribbon">
      <div class="ribbon-text-container">
        <h2>Really talk to your friends.</h2>
        <h2>Really.</h2>
      </div>
      <button id="scroll-button">Learn More</button>
    </div>
    <div>
      <section class="conversation-pane">
      <h3 class="conversation-headline">Make social media mean something again.</h3>
        <div class="conversation-diag">
          <div class="card">
            <div class="card-content">
              <svg fill="#000000" height="128" viewbox="0 0 24 24" width="128" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="9" cy="9" r="4"/>
                  <path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"/>
                  <path d="M0 0h24v24H0z" fill="none"/>
              </svg>
              <div class="text-container">
                <h3>Miss you!</h3>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-content">
              <div class="text-container">
                <h3>Miss you toooo!</h3>
              </div>
              <svg class="flipped" fill="#000000" height="128" viewbox="0 0 24 24" width="128" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="9" cy="9" r="4"/>
                  <path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"/>
                  <path d="M0 0h24v24H0z" fill="none"/>
              </svg>
            </div>
          </div>
        </div>
      </section>
    </div>
  </body>
</html>

＆＃13;

如何在内容上使用内联CSS

0 个答案: