我从头开始构建了终极教育网站 — 第 3 天
很多人问我，要花多少时间在这上面。我想可能需要两到三周。但是，这个问题让我重新思考我在网站上花费了多少时间。我光是主页就花了8个小时。因此，我决定快速创建内容，而不是像前几天那样关注微小的细节。我已经浪费了你们很多注意力，现在让我们直接进入流程。
第 19 小时：创建化学内容页面
我将首先在 Chemistry/3/ 目录中创建 periodicality-of-elements-qa.html 文件。此页面将包含有关元素周期性主题的问题和解答。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodicity of Elements - Questions and Answers</title>
<!-- styles and scripts -->
</head>
<body>
<header>
<nav>
<div>
<p>As usual, I included a basic HTML boilerplate with links to necessary scripts and styles, along with navigation to main pages. I am using a container div, aside element with the id table-of-contents, which will be populated using javascript, and finally the main tag.</p>
<p>Next, I added the content, formatted with heading tags and some paragraph tags for the main body. For formulas and symbols I used the LaTeX syntax, LaTeX is used because it is the go-to standard:<br>
</p>
<pre class="brush:php;toolbar:false"> <h2>
<p>This contains a lot of content, which is formatted using headings and sub-headings, some lists and tables. I also added an "About the Author" tag for authenticity.</p>
<p>I needed to style this page so that the text can be readable, and it doesn't look too bad. I will add an additional css file into this page, keeping style.css and style-main.css for common elements.</p>
<h2>
Hour 20: Styling the content page and adding JS for dynamic Table of Contents
</h2>
<p>I created an style tag inside the head element, and added basic style to it:<br>
</p>
<pre class="brush:php;toolbar:false"> <style>
header {
background: linear-gradient(135deg, #252525 0%, #303030 100%); /* Subtle gradient for depth */
padding: 1.2rem 0; /* Slightly increased padding */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* More pronounced, darker shadow */
position: sticky;
top: 0;
z-index: 1000; /* Increased z-index for better layering */
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out; /* Smooth transition for sticky effect */
transform: translateY(0); /* Initial state for smooth sticky animation */
}
header.sticky-active {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Different shadow when sticky */
transform: translateY(-5px); /* Slight lift when sticky */
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px; /* Slightly increased side padding */
}
.logo {
font-size: 2rem; /* Slightly larger logo */
font-weight: 700; /* Bolder logo */
color: #7db4ff; /* Updated logo color, slightly lighter */
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); /* Subtle text shadow for depth */
transition: transform 0.3s ease-in-out;
}
.logo:hover {
transform: scale(1.05); /* Gentle scale on hover */
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 30px; /* Use gap for spacing between list items */
}
nav ul li a {
text-decoration: none;
color: #f0f0f0; /* Slightly brighter text color */
position: relative; /* For the underline effect */
padding-bottom: 4px; /* Space for the underline */
transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
overflow: hidden; /* Clip the pseudo-element */
}
nav ul li a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: #7db4ff; /* Same as logo color for consistency */
transform: scaleX(0); /* Initially hidden */
transform-origin: bottom right;
transition: transform 0.4s ease-out;
}
nav ul li a:hover {
color: #90caf9; /* Lighter hover color */
transform: translateY(-2px); /* Slight lift on hover */
}
nav ul li a:hover::before {
transform: scaleX(1);
transform-origin: bottom left;
}
/* Optional: Add an active state highlight */
nav ul li a.active {
color: #90caf9;
font-weight: 600;
}
nav ul li a.active::before {
transform: scaleX(1);
}
/* Enhancements for Mobile (consider using JavaScript for more advanced mobile menus) */
@media (max-width: 1024px) {
header {
display: hidden;
}
}
:root {
--primary-bg: #f9f9f9; /* Very light grey for a softer white */
--secondary-bg: #ffffff; /* Pure white for content areas */
--text-primary: #212121; /* Dark grey for primary text */
--text-secondary: #757575; /* Medium grey for secondary text */
--accent-color: #2962ff; /* A vibrant blue */
--hover-color: #5393ff; /* Lighter blue for hover states */
--border-color: #e0e0e0; /* Light grey for borders */
--code-bg: #f0f0f0; /* Very light grey for code backgrounds */
--code-text: #333333; /* Dark grey for code text */
--toc-active: #2962ff;
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
--transition-fast: 0.15s ease-in-out;
--transition-normal: 0.3s ease-in-out;
}
body {
font-family: 'Roboto', sans-serif; /* A clean and modern sans-serif font */
line-height: 1.6;
margin: 0;
background-color: var(--primary-bg);
color: var(--text-primary);
padding-bottom: 40px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
overflow-x: hidden;
}
/* Custom Scrollbar - Light theme version */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background-color: #bdbdbd;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background-color: #9e9e9e;
}
.container {
max-width: 1200px;
margin: 50px auto;
padding: 60px;
background-color: var(--secondary-bg);
box-shadow: var(--shadow-md);
border-radius: 8px;
display: grid;
grid-template-columns: minmax(250px, 300px) 1fr;
gap: 40px;
}
#table-of-contents {
padding: 30px;
background-color: var(--secondary-bg);
border-radius: 6px;
position: sticky;
top: 30px;
height: fit-content;
border: 1px solid var(--border-color);
}
/* Custom Scrollbar for Table of Contents */
#table-of-contents::-webkit-scrollbar {
width: 6px; /* Thinner scrollbar */
}
#table-of-contents::-webkit-scrollbar-track {
background: #f1f1f1; /* Light background for the track */
border-radius: 3px; /* Slightly rounded track */
}
#table-of-contents::-webkit-scrollbar-thumb {
background-color: #bdbdbd; /* Medium grey for the thumb */
border-radius: 3px; /* Slightly rounded thumb */
}
#table-of-contents::-webkit-scrollbar-thumb:hover {
background-color: #9e9e9e; /* Darker grey on hover */
}
#table-of-contents > h2 {
font-size: 1.5rem;
margin-top: 0;
margin-bottom: 15px;
color: var(--text-primary);
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
text-align: left;
}
#table-of-contents ul {
list-style: none;
padding: 0;
margin: 0;
}
#table-of-contents li {
margin-bottom: 10px;
padding-left: 0;
border-left: 3px solid transparent;
transition: border-left-color var(--transition-fast), color var(--transition-fast);
}
#table-of-contents li:hover,
#table-of-contents li.active {
border-left-color: var(--toc-active);
}
#table-of-contents li.active > a {
color: var(--toc-active);
font-weight: 500;
}
#table-of-contents a {
text-decoration: none;
color: var(--text-secondary);
display: block;
padding: 6px 0;
transition: color var(--transition-fast);
}
#table-of-contents a:hover {
color: var(--hover-color);
}
#table-of-contents ul ul {
margin-left: 15px;
margin-top: 6px;
}
/* Main content styles - Focus on readability */
main {
padding: 40px;
border-radius: 6px;
overflow: hidden;
background-color: var(--secondary-bg);
box-shadow: var(--shadow-sm);
}
main > *:not(:last-child) {
margin-bottom: 2em;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
h1 {
font-size: 2.5rem;
border-bottom: 2px solid var(--accent-color);
padding-bottom: 0.4em;
margin-bottom: 1em;
}
h2 {
font-size: 24px;
border-bottom: 1px solid var(--accent-color);
padding-bottom: 0.3em;
margin-bottom: 0.9em;
color: var(--accent-color);
}
h3 {
font-size: 1.6rem;
margin-bottom: 0.7em;
}
h4 {
font-size: 1.4rem;
margin-bottom: 0.6em;
}
p {
margin-bottom: 1.5em;
color: var(--text-secondary);
orphans: 3;
widows: 3;
word-break: break-word;
}
ul, ol {
margin-left: 25px;
margin-bottom: 1.7em;
}
li {
margin-bottom: 0.7em;
color: var(--text-secondary);
line-height: 1.5;
word-break: break-word;
}
strong {
font-weight: 600;
color: var(--text-primary);
}
em {
font-style: italic;
color: var(--accent-color);
}
a {
color: var(--accent-color);
text-decoration: none;
transition: color var(--transition-fast);
border-bottom: 1px solid transparent; /* Subtle underline on hover */
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 2em;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: var(--secondary-bg);
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
word-break: break-word;
}
th {
background-color: #f5f5f5; /* Lighter header background */
font-weight: 600;
color: var(--text-primary);
}
tbody tr:nth-child(even) {
background-color: #fafafa; /* Very light grey for even rows */
}
/* Code blocks - Light theme styling */
pre {
background-color: var(--code-bg);
color: var(--code-text);
padding: 12px 18px;
border-radius: 4px;
overflow-x: auto;
font-family: 'Menlo', monospace;
font-size: 0.9rem;
line-height: 1.5;
margin-bottom: 1.6em;
white-space: pre-wrap;
border: 1px solid var(--border-color);
}
code {
font-family: 'Menlo', monospace;
background-color: #e8e8e8; /* Even lighter background for inline code */
color: var(--code-text);
padding: 3px 6px;
border-radius: 3px;
word-break: break-word;
}
pre code {
background-color: transparent;
padding: 0;
}
/* Horizontal rules - Simpler style */
hr {
border: none;
height: 1px;
background-color: var(--border-color);
margin: 2em 0;
}
/* Blockquotes - Clean separation */
blockquote {
border-left: 3px solid var(--accent-color);
padding: 10px 15px;
margin: 1.5em 0;
font-style: italic;
background-color: #f5f5f5;
border-radius: 3px;
color: var(--text-secondary);
}
blockquote p {
margin-bottom: 0;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.container {
max-width: 90%;
padding: 50px;
grid-template-columns: 1fr;
gap: 30px;
}
#table-of-contents {
position: static;
margin-bottom: 30px;
}
#table-of-contents > h2 {
text-align: center;
}
}
@media (max-width: 768px) {
main {
padding: 30px;
}
h1 {
font-size: 2.2rem;
}
h2 {
font-size: 22px;
}
nav{
display:none;
}
}
@media (max-width: 480px) {
.container {
padding: 30px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 20px;
}
}
</style>
登录后复制
这只是基本样式，对标题和主要内容进行了一些更改，以确保元素可读，不会太分散注意力，并且在整个网站上保持一致。
我还为表格、块引用和代码块添加了 CSS，以提高可读性。
我还想添加一个脚本来使左侧的目录具有交互性。因此，我将此脚本添加到 body 标记的底部：
<script>
// script.js
document.addEventListener('DOMContentLoaded', () => {
const mainContent = document.querySelector('main');
const tableOfContents = document.getElementById('table-of-contents');
if (!mainContent || !tableOfContents) {
console.error('Main content or table of contents element not found.');
return;
}
const headings = mainContent.querySelectorAll('h2, h3, h4');
const tocList = document.createElement('ul');
let currentList = tocList;
const stack = [currentList];
headings.forEach(heading => {
const tagName = heading.tagName;
const id = heading.id;
const text = heading.textContent;
if (id) {
const listItem = document.createElement('li');
const link = document.createElement('a');
link.href = `#${id}`;
link.textContent = text;
listItem.appendChild(link);
if (tagName === 'H2') {
while (stack.length > 1) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
stack.push(document.createElement('ul'));
currentList = stack[stack.length - 1];
listItem.appendChild(currentList);
} else if (tagName === 'H3') {
while (stack.length > 2) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
stack.push(document.createElement('ul'));
currentList = stack[stack.length - 1];
listItem.appendChild(currentList);
} else if (tagName === 'H4') {
while (stack.length > 3) {
stack.pop();
}
currentList = stack[stack.length - 1];
currentList.appendChild(listItem);
}
}
});
// Remove any empty ul elements that might have been created
function removeEmptyLists(list) {
Array.from(list.children).forEach(item => {
if (item.tagName === 'UL' && item.children.length === 0) {
item.remove();
} else if (item.tagName === 'LI') {
const childUl = item.querySelector('ul');
if (childUl) {
removeEmptyLists(childUl);
}
}
});
}
removeEmptyLists(tocList);
const tocTitle = document.createElement('h2');
tocTitle.textContent = 'Table of Contents';
tableOfContents.appendChild(tocTitle);
tableOfContents.appendChild(tocList);
});
</script>
登录后复制
此脚本会自动从主元素中的标题生成嵌套目录，该目录可以无缝运行。该脚本会自动填充我之前创建的目录旁标记。
最后，我通过在 head 标签内添加这些脚本和链接标签来添加对 LaTeX 公式和方程的支持。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/contrib/auto-render.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
renderMathInElement(document.body, {
delimiters: [
{ left: "$", right: "$", display: false },
{ left: "$$", right: "$$", display: true }
]
});
});
</script>
登录后复制
这样，内容页面就完成了。我喜欢它的设计非常简约，不会分散对内容的注意力，并且仍然具有所有必要的功能。
如果您想了解实际版本的情况，而不仅仅是自己复制内容，请参阅此处：元素的周期性 - 问题与解答
第 21 至 25 小时：完成化学内容页
我将在 Chemistry/3/ 文件夹中创建 periodicality-of-elements-notes.html 文件。这将包含有关元素周期性的注释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Periodicity of Elements - Notes</title>
<!-- styles and scripts -->
</head>
<body>
<header>
<nav>
<div>
<p>This is the same base HTML structure as the previous file, periodicity-of-elements-qa.html. </p>
<p>Now, for the most time consuming part, copying over the massive text of the notes and formating it with headings, paragraphs, and lists. I've also used LaTeX syntax where appropriate.<br>
</p>
<pre class="brush:php;toolbar:false"> <h1>
Structure of Periodic Table
</h1>
<h2>
<p>I've added the base CSS from before, but I also added new CSS to style the calculator container, did I mention, this page also has a calculator, for interactivity:<br>
</p>
<pre class="brush:php;toolbar:false"> <style for="Calculator">
/* Light Mode Styles */
.calculator-container {
background-color: #f5f5f5; /* Light background */
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
margin: 20px 0;
}
.calculator-controls {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.calculator-controls input,
.calculator-controls button {
padding: 10px;
border-radius: 4px;
border: 1px solid #ccc; /* Light border */
background-color: #fff; /* White background */
color: #333; /* Dark text */
transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */
}
.calculator-controls input:focus,
.calculator-controls button:focus {
outline: none;
box-shadow: 0 0 5px #3498db; /* Focus highlight (same as dark mode) */
}
.calculator-controls input {
flex: 2;
}
.calculator-controls button {
flex: 1;
}
.calculator-controls button:hover {
background-color: #e0e0e0; /* Slightly darker on hover */
cursor: pointer;
}
#calculator-output {
overflow-x: auto;
}
#calculator-output table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
#calculator-output th,
#calculator-output td {
border: 1px solid #ccc; /* Light border */
padding: 8px;
text-align: left;
}
#calculator-output th {
background-color: #3498db; /* Header color (same as dark mode) */
color: white;
}
#calculator-output tr:nth-child(even) {
background-color: #f0f0f0; /* Slightly darker for even rows */
}
#calculator-output tr:hover {
background-color: #e8e8e8; /* Slightly darker on hover */
}
/* Loading Spinner */
.loading-spinner {
border: 4px solid #ccc; /* Light border */
border-top: 4px solid #3498db; /* Spinner color (same as dark mode) */
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 20px auto;
display: none;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.calculator-container h2 {
margin-top: 0;
color: #333; /* Darker text color for heading */
}
</style>
登录后复制
这是一个非常基本的样式，但目前还可以。
然后，我像以前一样添加了目录的 JavaScript，并添加了一个脚本来生成元素属性表：
;
document.addEventListener('DOMContentLoaded', function () {
let elementInput = document.getElementById('element-input');
让calculateBtn = document.getElementById('calculate-btn');
让calculatorOutput = document.getElementById('计算器输出');
const 元素数据 = {
“H”：{
“Hfg_298_15K”：-241.8，
“Hfg_0K”：-217.8，
“熵_298_15K”：130.7，
“Integrated_Heat_Capacity_0_to_298_15K”：25.7，
“热容量_298_15K”：28.8，
“电子能量水平”：[1216.5，1025.7]，
“电离能量”：13.6，
“电子亲和力”：0.75
},
“他”： {
"Hfg_298_15K": 0,
"Hfg_0K": 0,
“熵_298_15K”：126.1，
“Integrated_Heat_Capacity_0_to_298_15K”：20.8，
“Heat_Capacity_298_15K”：20.8，
"Electronic_Energy_Levels": [159850, 169084, 171133],
“电离能量”：24.6，
“电子亲和力”：-0.08
},
“李”：{
“Hfg_298_15K”：159.3，
“Hfg_0K”：155.3，
“熵_298_15K”：29.1，
“Integrated_Heat_Capacity_0_to_298_15K”：22.8，
“热容量_298_15K”：24.8，
"Electronic_Energy_Levels": [14908, 17159],
“电离能量”：5.39，
“电子亲和力”：0.61
},
“是”： {
“Hfg_298_15K”：324.3，
“Hfg_0K”：315.3，
“熵_298_15K”：9.5，
“Integrated_Heat_Capacity_0_to_298_15K”：16.8，
“热容量_298_15K”：16.7，
“电子能量水平”：[21978, 38178],
“电离能量”：9.32，
“电子亲和力”：-0.20
},
“乙”：{
“Hfg_298_15K”：565，
“Hfg_0K”：561.5，
“熵_298_15K”：5.9，
“Integrated_Heat_Capacity_0_to_298_15K”：11.1，
“热容量_298_15K”：11.1，
"Electronic_Energy_Levels": [38144, 38178],
“电离能量”：8.30，
“电子亲和力”：0.28
},
“C”：{
“Hfg_298_15K”：716.7，
“Hfg_0K”：711.2，
“熵_298_15K”：5.7，
“Integrated_Heat_Capacity_0_to_298_15K”：8.5，
“Heat_Capacity_298_15K”：8.5，
"Electronic_Energy_Levels": [10193, 21648],
“电离能量”：11.3，
“电子亲和力”：1.26
},
“N”：{
“Hfg_298_15K”：472.7，
“Hfg_0K”：472.7，
“熵_298_15K”：153.3，
“Integrated_Heat_Capacity_0_to_298_15K”：29.1，
“热容量_298_15K”：29.1，
“电子能量水平”：[19233, 28838],
“电离能量”：14.5，
“电子亲和力”：-0.07
},
“O”：{
“Hfg_298_15K”：249.2，
“Hfg_0K”：246.7，
“熵_298_15K”：161.1，
“Integrated_Heat_Capacity_0_to_298_15K”：29.4，
“热容量_298_15K”：29.4，
"Electronic_Energy_Levels": [15867, 22698],
“电离能量”：13.6，
“电子亲和力”：1.46
},
“F”：{
“Hfg_298_15K”：79.4，
“Hfg_0K”：77.2，
“熵_298_15K”：158.8，
“Integrated_Heat_Capacity_0_to_298_15K”：30.2，
“热容量_298_15K”：30.2，
"Electronic_Energy_Levels": [404, 40889],
“电离能量”：17.4，
“电子亲和力”：3.40
},
“氖”：{
"Hfg_298_15K": 0,
"Hfg_0K": 0,
“熵_298_15K”：146.3，
“Integrated_Heat_Capacity_0_to_298_15K”：20.8，
“Heat_Capacity_298_15K”：20.8，
"Electronic_Energy_Levels": [134041, 136541, 138892],
“电离能量”：21.6，
“电子亲和力”：-0.08
},
“娜”：{
“Hfg_298_15K”：107.3，
“Hfg_0K”：107.7，
“熵_298_15K”：153.7，
“Integrated_Heat_Capacity_0_to_298_15K”：44.4，
“热容量_298_15K”：44.4，
“Electronic_Energy_Levels”：[16956, 17293],
“电离能量”：5.14，
“电子亲和力”：0.54
},
“镁”：{
“Hfg_298_15K”：147.7，
“Hfg_0K”：146.2，
“熵_298_15K”：32.7，
“Integrated_Heat_Capacity_0_to_298_15K”：24.9，
“热容量_298_15K”：24.9，
"Electronic_Energy_Levels": [24581, 30994],
“电离能量”：7.65，
“电子亲和力”：-0.30
},
“阿尔”：{
“Hfg_298_15K”：324.3，
“Hfg_0K”：324.1，
“熵_298_15K”：28.3，
“Integrated_Heat_Capacity_0_to_298_15K”：24.4，
“热容量_298_15K”：24.4，
“电子能量水平”：[25057, 33951],
“电离能量”：5.99，
“电子亲和力”：0.43
},
“斯”：{
“Hfg_298_15K”：450.0，
“Hfg_0K”：447.6，
“熵_298_15K”：18.8，
“Integrated_Heat_Capacity_0_to_298_15K”：20.2，
“热容量_298_15K”：20.2，
"Electronic_Energy_Levels": [6209, 14300],
“电离能量”：8.15，
“电子亲和力”：1.39
},
“P”：{
“Hfg_298_15K”：314.6，
“Hfg_0K”：314.6，
“熵_298_15K”：163.2，
“Integrated_Heat_Capacity_0_to_298_15K”：27.3，
“热容量_298_15K”：27.3，
"Electronic_Energy_Levels": [11828, 19553],
“电离能量”：10.5，
“电子亲和力”：0.75
},
“S”：{
“Hfg_298_15K”：278.3，
“Hfg_0K”：275.2，
“熵_298_15K”：167.7，
“Integrated_Heat_Capacity_0_to_298_15K”：29.2，
“热容量_298_15K”：29.2，
"Electronic_Energy_Levels": [21394, 29394],
“电离能量”：10.4，
“电子亲和力”：2.08
},
“Cl”：{
“Hfg_298_15K”：121.3，
“Hfg_0K”：119.1，
“熵_298_15K”：165.2，
“Integrated_Heat_Capacity_0_to_298_15K”：33.3，
“热容量_298_15K”：33.3，
"Electronic_Energy_Levels": [882, 8823],
“电离能量”：13.0，
“电子亲和力”：3.62
},
“阿尔”：{
"Hfg_298_15K": 0,
"Hfg_0K": 0,
“熵_298_15K”：154.8，
“Integrated_Heat_Capacity_0_to_298_15K”：20.8，
“Heat_Capacity_298_15K”：20.8，
"Electronic_Energy_Levels": [93144, 93751, 95282],
“电离能量”：15.8，
“电子亲和力”：-0.08
},
“K”：{
“Hfg_298_15K”：89.2，
“Hfg_0K”：89.2，
“熵_298_15K”：160.3，
“Integrated_Heat_Capacity_0_to_298_15K”：46.2，
“热容量_298_15K”：46.2，
"Electronic_Energy_Levels": [12985, 13042],
“电离能量”：4.34，
“电子亲和力”：0.50
},
“钙”：{
“Hfg_298_15K”：178.2，
“Hfg_0K”：177.3，
“熵_298_15K”：41.6，
“Integrated_Heat_Capacity_0_to_298_15K”：25.9，
“热容量_298_15K”：25.9，
"Electronic_Energy_Levels": [15315, 23652],
“电离能量”：6.11，
“电子亲和力”：-0.02
},
“Sc”：{
"Hfg_298_15K": 0,
"Hfg_0K": 0,
“熵_298_15K”：33.2，
“Integrated_Heat_Capacity_0_to_298_15K”：3.80，
“Heat_Capacity_298_15K”：25.52，
"Electronic_Energy_Levels": [0, 11519.99],
“电离能量”：6.561，
“电子亲和力”：0.189
},
“钛”：{
“Hfg_298_15K”：473.00，
“Hfg_0K”：470.00，
“熵_298_15K”：180.30，
“Integrated_Heat_Capacity_0_to_298_15K”：7.54，
“Heat_Capacity_298_15K”：24.43，
“电子能量水平”：[0、170.132、386.874、6556.833、6598.765、6661.006、6742.756、6842.962、7255.355、8436.618、8492.421、 8602.34],
“电离能量”：6.828，
“电子亲和力”：0.087
},
“钛”：{
“Hfg_298_15K”：473.00，
“Hfg_0K”：470.00，
“熵_298_15K”：180.30，
“Integrated_Heat_Capacity_0_to_298_15K”：7.54，
“Heat_Capacity_298_15K”：24.43，
“电子能量水平”：[0、170.132、386.874、6556.833、6598.765、6661.006、6742.756、6842.962、7255.355、8436.618、8492.421、 8602.34],
“电离能量”：6.828，
“电子亲和力”：0.087
},
};
calculateBtn.addEventListener('点击', function() {
让 selectedElement = elementInput.value.trim();
if (!selectedElement) {
alert('请输入元素符号。');
返回;
}让normalizedElement = selectedElement.charAt(0).toUpperCase() selectedElement.slice(1).toLowerCase();
CalculatorOutput.innerHTML = '<div>
<p>我为计算器添加了很多内容，以及动态生成目录的逻辑，以及计算每个元素的值的逻辑。诺亚问我是否可以集成基本计算器，计算元素及其共价半径和键长。页面现已准备就绪！想看的话就在这里：<br>
元素的周期性 - 注释</p>
<p>这标志着一天的编码结束。我知道，感觉有点仓促，因为确实如此。我无法准确描述我做了什么以及为什么，因为我也不记得其中的大部分内容。我只记得基本的变化。</p>
</div>
登录后复制
以上是我从头开始构建了终极教育网站 — 第 3 天的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
如何修复KB5055523无法在Windows 11中安装？
3 周前
By DDD
如何修复KB5055518无法在Windows 10中安装？
3 周前
By DDD
<🎜>：死铁路 - 如何驯服狼
4 周前
By DDD
<🎜>：种植花园 - 完整的突变指南
2 周前
By DDD
R.E.P.O.的每个敌人和怪物的力量水平
4 周前
By 尊渡假赌尊渡假赌尊渡假赌
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
神秘的JavaScript：它的作用以及为什么重要
Apr 09, 2025 am 12:07 AM
JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。
JavaScript的演变：当前的趋势和未来前景
Apr 10, 2025 am 09:33 AM
JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。
JavaScript引擎：比较实施
Apr 13, 2025 am 12:05 AM
不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。
JavaScript：探索网络语言的多功能性
Apr 11, 2025 am 12:01 AM
JavaScript是现代Web开发的核心语言，因其多样性和灵活性而广泛应用。1)前端开发：通过DOM操作和现代框架（如React、Vue.js、Angular）构建动态网页和单页面应用。2)服务器端开发：Node.js利用非阻塞I/O模型处理高并发和实时应用。3)移动和桌面应用开发：通过ReactNative和Electron实现跨平台开发，提高开发效率。
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
如何使用Next.js（前端集成）构建多租户SaaS应用程序
Apr 11, 2025 am 08:22 AM
本文展示了与许可证确保的后端的前端集成，并使用Next.js构建功能性Edtech SaaS应用程序。 前端获取用户权限以控制UI的可见性并确保API要求遵守角色库
从C/C到JavaScript：所有工作方式
Apr 14, 2025 am 12:05 AM
从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。
使用Next.js（后端集成）构建多租户SaaS应用程序
Apr 11, 2025 am 08:23 AM
我使用您的日常技术工具构建了功能性的多租户SaaS应用程序（一个Edtech应用程序），您可以做同样的事情。 首先，什么是多租户SaaS应用程序？ 多租户SaaS应用程序可让您从唱歌中为多个客户提供服务
