Question

This website似乎没有使用任何javascript（除了webfont的东西）。然而，单击链接会应用一组css规则。它是如何工作的以及这里使用的html / css的哪些特性？

据我所知，data-step属性似乎在这方面发挥了作用。但我不熟悉它是如何产生预期效果的。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Web Design in 4 minutes</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    ...
    <link rel="stylesheet" type="text/css" href="website.css">
  </head>
  <body>
    <header id="header">
      <img id="logo" src="jt.png" alt="JT logo">
      <h1>Web Design in 4 minutes</h1>
      <p>
        <a href="http://jgthms.com" target="_blank">by Jeremy Thomas</a>
      </p>
    </header>

    <main>
      <section id="start">
        <p>Let's say you have a product, a portfolio, or just an idea you want to share with everyone on your <em>own</em> website. Before you publish it on the internet, you want to make it look attractive, professional, or at least <em>decent</em> to look at.</p>
        <p>What is the <a class="step" data-step="0" href="#content">first thing</a> you need to work on?</p>
      </section>

      <section id="content">
        <h2>Content</h2>
        <p>The purpose of <strong>design</strong> is to enhance the presentation of the content it's applied to. It might sound obvious, but content being the <strong>primary</strong> element of a website, it should not be established as an afterthought.</p>
        <p>Written content, like the paragraph you're currently reading, makes up for more than 90% of the Web. Styling this textual content will go a long way.</p>
        <p>Let's assume you've already finalised the content you want to publish and just created an empty <code>style.css</code> file, what is the <a class="step" data-step="1" href="#centering">first rule</a> you can write?</p>
      </section>

      <section id="centering">
        <h2>Centering</h2>
        <p>Long lines of text can be hard to parse, and thus hard to <strong>read</strong>. Setting a limit of characters per line greatly enhances the readability and appeal of a wall of text.</p>
<pre><span class="selector">body</span> {
  <span class="attribute">margin</span>: <span class="number">0</span> auto;
  <span class="attribute">max-width</span>: <span class="number">50</span><span class="unit">em</span>;
}</pre>
        <p>After styling the text <em>blocks</em>, what about styling the <a class="step" data-step="2" href="#font-family">text itself</a>?</p>
      </section>

      <section id="font-family">
        <h2>Font family</h2>
        <p>The browser's font defaults to <code>"Times"</code>, which can look unappealing (mostly because it is the "unstyled" font). Switching to a <strong>sans-serif</strong> font like <code>"Helvetica"</code> or <code>"Arial"</code> can vastly improve the look of your page.</p>
<pre><span class="selector">body</span> {
  <span class="attribute">font-family</span>: <span class="string">"Helvetica"</span>, <span class="string">"Arial"</span>, sans-serif;
}</pre>
        <p><em>If you want to stick with a serif font, try <code>"Georgia"</code>.</em></p>
        <p>While this makes the text more <em>appealing</em>, let's also make it <a class="step" data-step="3" href="#spacing">more readable</a>.</p>
      </section>
      ...

CSS

/* Base styles */

a strong {
  color: inherit;
}

hr {
  background: none;
  border: none;
  border-bottom: 1px solid #d8dee9;
}

img {
  height: auto;
  max-width: 100%;
}

pre {
  overflow: auto;
  white-space: pre-wrap;
}

footer {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-top: 4em;
  text-align: center;
}

/* Initial state */

#visited {
  background-color: white;
  bottom: 0;
  color: white;
  display: block;
  left: 0;
  padding: 1em;
  position: fixed;
  right: 0;
  text-align: center;
}

#visited:visited {
  background-color: #e81c4f;
}

#logo,
section,
footer {
  display: none;
}

#start {
  display: block;
}

/* 00 Content */

html.step0 #content {
  display: block;
}

/* 01 Centering */

html.step1 #centering {
  display: block;
}

html.step1 header,
html.step1 main {
  margin: 0 auto;
  max-width: 50em;
}
...

Answer 1

该网站正在制定href和id概念。（同页导航）

http://jgthms.com/web-design-in-4-minutes/

示例：

<a href="#id">go to id</a>
<div style="margin-top:2000px;"></div>
<a id="id">id</a>

这指的是同一页面导航。默认情况下，内容为display:none，点击后即可显示。

希望它对你有所帮助。

干杯！

单击链接应用css

1 个答案: