0
This website似乎沒有使用任何JavaScript（除了webfont的東西）。然而點擊一個鏈接應用一組css規則。它是如何工作的，以及在這裏使用了html/css的哪些功能？通過單擊鏈接應用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;
}
...
自發布以來，我已經更新了該問題。回購代碼不同，並且從回購庫運行HTML文件的本地副本沒有相同的影響。它顯示了最後一頁。該網站有相關的代碼和我感興趣的影響。 – francium
您確實在正文末尾看到了大量的JavaScript代碼？ – j08691
它使用javascript來分配類：'if（target！==''）{id = target.split（'＃'）[1]; document.getElementById（id）.className ='animate'; }' – tewathia