我從頭開始建立了終極教育網站 - 第 2 天
- Barbara Streisand原創
- 2025-01-10 11:13:43869瀏覽
昨天，我們處理了index.html，今天我們將處理subject.html 和about.html。我們將看看是否還有足夠的時間來處理化學、數學等主題頁面。
第 14 小時：建立主題頁面
我將從subjects.html開始。就像以前一樣，我將使用我昨天為此專案設計的自訂樣板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Subjects</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've added the basic structure, linked the stylesheet and added navigation that takes us to the other pages. The goal is to keep consistency between pages.</p>
<p>Now, let's add the content for the page. I want a hero section similar to the one on the index page but with a focus on subjects:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This will serve as a good header for the page, and it looks consistent with the index page hero section.</p>
<p>Next up is the main content area: a grid of subjects, like the categories section on the home page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This grid will display all the subjects, making it easy for the user to explore, and it also is consistent with the home page layout.</p>
<p>I'll keep the footer consistent with the rest of the site, and use the same code from index.html.</p>
<h2>
Hour 15: Building the About Page
</h2>
<p>Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - About Us</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've included a header and footer identical to the other pages. This keeps the navigation consistent.</p>
<p>For the about page, I start with a hero section, just like on the home and subject page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>The hero section includes a heading and a short paragraph to introduce the page.</p>
<p>Now, I'll add the main content section, divided into two sections: mission and values.<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This is very standard design, with some bold elements to improve the user experience, which I liked very much.</p>
<p>I initially planned to include a team section, but I decided against it for now. I may add it later when I have more info.<br>
</p>
<pre class="brush:php;toolbar:false"> <!-- <div>
<p>And that completes both subjects.html and about.html for now, and the main-pages are done! For those wondering, this is how our pages looks like at the end of the day.<br>
Subjects Page<br>
About Page</p>
<p>Okay, let's get started with the subject-specific pages.</p>
<h2>
Hour 16: Setting up the Chemistry Subject Page
</h2>
<p>First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Chemistry</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>This page, like the others, starts with my basic HTML structure, with navigation links to our main pages (/index.html, /subjects.html, and /about.html) and also a link to the main style sheets.</p>
<p>Now, let's add the structure for this page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This sets up a three-column layout with an article list on the left, main topics in the center, and another topic list on the right. This is all within the .chemistry-page section. Before moving on, let's address few questions you may have;</p>
- Some href values are "1.html", "organic.html", and some are just "#". Answer: I used "1.html", "organic.html", etc., for links that are ready. The "#" is a placeholder for pages not yet developed. It keeps the structure consistent and visually complete, allowing me to see how the final site will look, while indicating that the content isn't available yet.
Finally, I'll keep the same footer as all of the other pages, to keep consistency.
Hour 17: Styling the Chemistry Page
Now, I need to style this Chemistry page. I started by creating a new file inside the Chemistry folder, style.css.
I wanted a design that was distinct and visually appealing. Here’s what I came up with:
:root {
--primary-color: #00bcd4; /* Vibrant yet professional */
--secondary-color: #ffc107; /* Energetic accent */
--background-dark: #1a1a1a; /* Deeper, richer dark */
--background-light: #2e2e2e; /* Slightly lighter for contrast */
--text-light: #f0f0f0; /* Softer off-white */
--text-accent: #ffffff; /* Pure white for emphasis */
--border-radius: 12px; /* More pronounced curves */
--shadow-light: rgba(0, 0, 0, 0.15); /* Subtle shadow */
--transition-duration: 0.3s;
--font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-family-heading: 'Montserrat', sans-serif;
}
body {
font-family: var(--font-family-base);
background-color: var(--background-dark);
color: var(--text-light);
line-height: 1.6;
-webkit-font-smoothing: antialiased; /* Smoother fonts for webkit browsers */
-moz-osx-font-smoothing: grayscale; /* Smoother fonts for Firefox */
}
.chemistry-page {
display: flex;
max-width: 1200px;
margin: 60px auto; /* Increased top/bottom margin */
padding: 30px; /* Increased padding for spaciousness */
background: linear-gradient(145deg, var(--background-dark), #111111); /* Subtle gradient */
border-radius: var(--border-radius);
box-shadow: 0 8px 16px var(--shadow-light); /* More pronounced shadow */
}
.article-list, .topic-list {
flex: 1;
padding: 30px; /* Increased padding */
background: var(--background-light);
border-radius: var(--border-radius);
box-shadow: 0 4px 8px var(--shadow-light);
margin: 0 15px; /* Increased horizontal margin */
transition: transform var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}
.article-list:hover, .topic-list:hover {
transform: translateY(-5px); /* Gentle lift on hover */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.article-list h2, .topic-list h2 {
margin-bottom: 25px; /* Increased bottom margin */
text-align: center;
font-family: var(--font-family-heading);
font-size: 1.8rem; /* Slightly larger */
color: var(--text-accent);
position: relative; /* For pseudo-element underline */
padding-bottom: 10px;
}
.article-list h2::after, .topic-list h2::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 60px;
height: 3px;
background-color: var(--primary-color);
transform: translateX(-50%);
}
.article-list ul, .topic-list ul {
list-style: none;
padding: 0;
}
.article-list ul li, .topic-list ul li {
margin-bottom: 15px; /* Increased bottom margin */
border-bottom: 1px solid #444; /* Subtle divider */
padding-bottom: 10px;
}
.article-list ul li:last-child, .topic-list ul li:last-child {
border-bottom: none; /* Remove border from the last item */
padding-bottom: 0;
margin-bottom: 0;
}
.article-list ul li a, .topic-list ul li a {
display: block;
padding: 15px; /* Increased padding */
text-decoration: none;
color: var(--text-light);
background: linear-gradient(to bottom right, #333, #222); /* Subtle gradient */
border-radius: calc(var(--border-radius) / 2); /* Smaller radius for list items */
transition: background var(--transition-duration), transform var(--transition-duration);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow to list items */
}
.article-list ul li a:hover, .topic-list ul li a:hover {
background: linear-gradient(to bottom right, var(--primary-color), #0097a7); /* More vibrant hover */
transform: scale(1.02); /* Gentle scale on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
color: var(--text-accent);
}
.content-grid {
flex: 3;
padding: 30px; /* Increased padding */
margin: 0 15px; /* Increased horizontal margin */
}
.topic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider min-width */
gap: 25px; /* Increased gap */
}
.topic-grid a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--text-light);
background: var(--background-light);
padding: 30px; /* Increased padding */
border-radius: var(--border-radius);
box-shadow: 0 4px 8px var(--shadow-light);
transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}
.topic-grid a img {
width: 60px; /* Larger icon */
height: 60px; /* Larger icon */
margin-bottom: 15px; /* Increased bottom margin */
filter: brightness(1.1); /* Slightly brighten the icons */
transition: transform var(--transition-duration);
}
.topic-grid a:hover {
transform: scale(1.05); /* Gentle scale on hover */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.topic-grid a:hover img {
transform: scale(1.1); /* Scale the icon on hover */
}
/* Responsive adjustments with smoother transitions */
@media (max-width: 768px) {
.chemistry-page {
flex-direction: column;
margin: 30px auto; /* Adjust margins for smaller screens */
padding: 20px;
}
.article-list, .topic-list, .content-grid {
margin: 15px 0;
padding: 20px;
}
.topic-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust for smaller screens */
}
}
/* Further refinements for smaller screens */
@media (max-width: 576px) {
.chemistry-page {
padding: 15px;
}
.article-list, .topic-list, .content-grid {
padding: 15px;
}
.article-list h2, .topic-list h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}
.topic-grid {
gap: 15px;
}
.topic-grid a {
padding: 20px;
}
.topic-grid a img {
width: 40px;
height: 40px;
margin-bottom: 10px;
}
}
我添加了充滿活力和現代的設計，具有深色主題和微妙的漸變。佈局使用 Flexbox 和網格來提高回應能力。我還添加了一些漂亮的懸停效果，使頁面更具互動性。
在繼續之前，讓我們先解決您可能有的幾個問題；
- 為什麼要使用自訂屬性（變數）而不是直接在規則中寫入顏色值？
- 配色（充滿活力且專業）是如何選擇的？是什麼讓這些顏色能夠很好地搭配在一起？
答案：我選擇使用自訂屬性（變數）有幾個原因。首先，它們增強了可維護性和一致性。更改整個樣式表的顏色變得與修改根變數的值一樣簡單。這比尋找特定顏色代碼的每個實例要有效得多。此外，變數透過為值賦予有意義的名稱來提高可讀性，使程式碼的意圖更加清晰。它還有助於主題化，並允許根據使用者偏好或不同模式進行動態變更。
選擇配色方案的目的是創造一種「充滿活力且專業」的美感。我想要在精力充沛和值得信賴之間取得平衡。
- --primary-color：#00bcd4（充滿活力的青色）： 這是一種明亮、迷人的顏色，喚起現代感和創新感，適合與科學相關的主題。還沒有過度飽和，保持了一定程度的專業。
- --次要顏色：#ffc107（活力黃）： 這種黃色起到互補的作用，增添了活力和樂觀。黃色通常與創造力和智慧聯繫在一起。
- 深色背景（--background-dark、--background-light）： 深色背景提供了強大、穩定的基礎，使明亮的顏色脫穎而出。它也給人一種精緻的感覺。
- 淺色文字（--text-light、--text-accent）： 深色背景上的灰白色和純白色文字確保高可讀性和乾淨、現代的外觀。
為什麼他們在一起工作得很好：
- 互補對比：青色和黃色是近乎互補的顏色，創造出一種視覺上吸引人的對比，充滿活力但不刺耳。
- 相似和諧：深色背景色調相似，這意味著它們在色輪上彼此接近，營造出和諧和凝聚力的感覺。
- 明度對比：文字和背景之間明度（明度/暗度）的顯著差異確保了出色的可讀性。
- 平衡飽和：原色和次要顏色充滿活力，但不會過度飽和，避免幼稚或壓倒性的外觀。它們被更柔和的背景所平衡。
從本質上講，明亮、現代的原色、溫暖的色調和精緻的深色背景的組合，以及精心挑選的文本顏色，創造了一個既具有視覺吸引力又適合專業、教育環境的調色板。
但是，這些樣式僅適用於化學頁面，不適用於整個網站。因此，我在 Chemistry 中建立了另一個 CSS 檔案 style-main.css 來覆蓋主要樣式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Subjects</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've added the basic structure, linked the stylesheet and added navigation that takes us to the other pages. The goal is to keep consistency between pages.</p>
<p>Now, let's add the content for the page. I want a hero section similar to the one on the index page but with a focus on subjects:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This will serve as a good header for the page, and it looks consistent with the index page hero section.</p>
<p>Next up is the main content area: a grid of subjects, like the categories section on the home page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This grid will display all the subjects, making it easy for the user to explore, and it also is consistent with the home page layout.</p>
<p>I'll keep the footer consistent with the rest of the site, and use the same code from index.html.</p>
<h2>
Hour 15: Building the About Page
</h2>
<p>Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - About Us</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've included a header and footer identical to the other pages. This keeps the navigation consistent.</p>
<p>For the about page, I start with a hero section, just like on the home and subject page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>The hero section includes a heading and a short paragraph to introduce the page.</p>
<p>Now, I'll add the main content section, divided into two sections: mission and values.<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This is very standard design, with some bold elements to improve the user experience, which I liked very much.</p>
<p>I initially planned to include a team section, but I decided against it for now. I may add it later when I have more info.<br>
</p>
<pre class="brush:php;toolbar:false"> <!-- <div>
<p>And that completes both subjects.html and about.html for now, and the main-pages are done! For those wondering, this is how our pages looks like at the end of the day.<br>
Subjects Page<br>
About Page</p>
<p>Okay, let's get started with the subject-specific pages.</p>
<h2>
Hour 16: Setting up the Chemistry Subject Page
</h2>
<p>First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Chemistry</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>This page, like the others, starts with my basic HTML structure, with navigation links to our main pages (/index.html, /subjects.html, and /about.html) and also a link to the main style sheets.</p>
<p>Now, let's add the structure for this page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This sets up a three-column layout with an article list on the left, main topics in the center, and another topic list on the right. This is all within the .chemistry-page section. Before moving on, let's address few questions you may have;</p>
- Some href values are "1.html", "organic.html", and some are just "#". Answer: I used "1.html", "organic.html", etc., for links that are ready. The "#" is a placeholder for pages not yet developed. It keeps the structure consistent and visually complete, allowing me to see how the final site will look, while indicating that the content isn't available yet.
Finally, I'll keep the same footer as all of the other pages, to keep consistency.
Hour 17: Styling the Chemistry Page
Now, I need to style this Chemistry page. I started by creating a new file inside the Chemistry folder, style.css.
I wanted a design that was distinct and visually appealing. Here’s what I came up with:
:root {
--primary-color: #00bcd4; /* Vibrant yet professional */
--secondary-color: #ffc107; /* Energetic accent */
--background-dark: #1a1a1a; /* Deeper, richer dark */
--background-light: #2e2e2e; /* Slightly lighter for contrast */
--text-light: #f0f0f0; /* Softer off-white */
--text-accent: #ffffff; /* Pure white for emphasis */
--border-radius: 12px; /* More pronounced curves */
--shadow-light: rgba(0, 0, 0, 0.15); /* Subtle shadow */
--transition-duration: 0.3s;
--font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-family-heading: 'Montserrat', sans-serif;
}
body {
font-family: var(--font-family-base);
background-color: var(--background-dark);
color: var(--text-light);
line-height: 1.6;
-webkit-font-smoothing: antialiased; /* Smoother fonts for webkit browsers */
-moz-osx-font-smoothing: grayscale; /* Smoother fonts for Firefox */
}
.chemistry-page {
display: flex;
max-width: 1200px;
margin: 60px auto; /* Increased top/bottom margin */
padding: 30px; /* Increased padding for spaciousness */
background: linear-gradient(145deg, var(--background-dark), #111111); /* Subtle gradient */
border-radius: var(--border-radius);
box-shadow: 0 8px 16px var(--shadow-light); /* More pronounced shadow */
}
.article-list, .topic-list {
flex: 1;
padding: 30px; /* Increased padding */
background: var(--background-light);
border-radius: var(--border-radius);
box-shadow: 0 4px 8px var(--shadow-light);
margin: 0 15px; /* Increased horizontal margin */
transition: transform var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}
.article-list:hover, .topic-list:hover {
transform: translateY(-5px); /* Gentle lift on hover */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.article-list h2, .topic-list h2 {
margin-bottom: 25px; /* Increased bottom margin */
text-align: center;
font-family: var(--font-family-heading);
font-size: 1.8rem; /* Slightly larger */
color: var(--text-accent);
position: relative; /* For pseudo-element underline */
padding-bottom: 10px;
}
.article-list h2::after, .topic-list h2::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 60px;
height: 3px;
background-color: var(--primary-color);
transform: translateX(-50%);
}
.article-list ul, .topic-list ul {
list-style: none;
padding: 0;
}
.article-list ul li, .topic-list ul li {
margin-bottom: 15px; /* Increased bottom margin */
border-bottom: 1px solid #444; /* Subtle divider */
padding-bottom: 10px;
}
.article-list ul li:last-child, .topic-list ul li:last-child {
border-bottom: none; /* Remove border from the last item */
padding-bottom: 0;
margin-bottom: 0;
}
.article-list ul li a, .topic-list ul li a {
display: block;
padding: 15px; /* Increased padding */
text-decoration: none;
color: var(--text-light);
background: linear-gradient(to bottom right, #333, #222); /* Subtle gradient */
border-radius: calc(var(--border-radius) / 2); /* Smaller radius for list items */
transition: background var(--transition-duration), transform var(--transition-duration);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow to list items */
}
.article-list ul li a:hover, .topic-list ul li a:hover {
background: linear-gradient(to bottom right, var(--primary-color), #0097a7); /* More vibrant hover */
transform: scale(1.02); /* Gentle scale on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
color: var(--text-accent);
}
.content-grid {
flex: 3;
padding: 30px; /* Increased padding */
margin: 0 15px; /* Increased horizontal margin */
}
.topic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider min-width */
gap: 25px; /* Increased gap */
}
.topic-grid a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--text-light);
background: var(--background-light);
padding: 30px; /* Increased padding */
border-radius: var(--border-radius);
box-shadow: 0 4px 8px var(--shadow-light);
transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}
.topic-grid a img {
width: 60px; /* Larger icon */
height: 60px; /* Larger icon */
margin-bottom: 15px; /* Increased bottom margin */
filter: brightness(1.1); /* Slightly brighten the icons */
transition: transform var(--transition-duration);
}
.topic-grid a:hover {
transform: scale(1.05); /* Gentle scale on hover */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.topic-grid a:hover img {
transform: scale(1.1); /* Scale the icon on hover */
}
/* Responsive adjustments with smoother transitions */
@media (max-width: 768px) {
.chemistry-page {
flex-direction: column;
margin: 30px auto; /* Adjust margins for smaller screens */
padding: 20px;
}
.article-list, .topic-list, .content-grid {
margin: 15px 0;
padding: 20px;
}
.topic-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust for smaller screens */
}
}
/* Further refinements for smaller screens */
@media (max-width: 576px) {
.chemistry-page {
padding: 15px;
}
.article-list, .topic-list, .content-grid {
padding: 15px;
}
.article-list h2, .topic-list h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}
.topic-grid {
gap: 15px;
}
.topic-grid a {
padding: 20px;
}
.topic-grid a img {
width: 40px;
height: 40px;
margin-bottom: 10px;
}
}
這個 style-main.css 檔案會覆蓋主 style.css 中的樣式，並套用到所有頁面。現在我們來談談 style-main.css 的必要性，有經驗的開發人員可能已經理解，但對於經驗不太豐富的開發人員來說；
- 問題： 雖然style.css（在根目錄中）提供了基礎，並且化學特定的style.css 處理獨特的元素，但仍需要修改一些全局樣式專門化學部分。直接更改根 style.css 會影響整個網站，這是不可取的。
- 解決方案： style-main.css 被引入以覆蓋根 style.css 中的某些全局樣式僅在化學頁面。它還允許添加比化學特定 style.css 中的樣式更通用的新樣式，但仍然不適用於整個網站。
- 範例：
- 根 style.css 可能定義預設按鈕顏色。
- 在化學頁面上，您可能需要不同的按鈕顏色，或調整填充。
- style-main.css 將包含覆蓋按鈕顏色和填充的 CSS 規則，但 僅用於 化學部分。
- 好處：
- 模組化： 將樣式修改組織起來並包含在相關主題資料夾中。
- 可維護性： 更容易更新或更改特定部分的樣式，而不影響其他部分。
- 特異性： 覆蓋是有針對性的，不需要複雜的 CSS 選擇器即可達到所需的效果。
- 避免程式碼重複： 主題區域的常見覆蓋或添加可以放置在 style-main.css 中，而不是在多個特定於主題的樣式表中重複。
第 18 小時：特定化學頁面樣式
為了避免讓樣式過於複雜，我決定在 Chemistry 資料夾中使用另一個樣式表檔案 Specific-chemistry.css。這將為主題頁面設定樣式，並保持其他文件整潔。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Subjects</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've added the basic structure, linked the stylesheet and added navigation that takes us to the other pages. The goal is to keep consistency between pages.</p>
<p>Now, let's add the content for the page. I want a hero section similar to the one on the index page but with a focus on subjects:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This will serve as a good header for the page, and it looks consistent with the index page hero section.</p>
<p>Next up is the main content area: a grid of subjects, like the categories section on the home page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This grid will display all the subjects, making it easy for the user to explore, and it also is consistent with the home page layout.</p>
<p>I'll keep the footer consistent with the rest of the site, and use the same code from index.html.</p>
<h2>
Hour 15: Building the About Page
</h2>
<p>Now, let's move on to about.html. I'll start with the same HTML boilerplate as usual:<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - About Us</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>I've included a header and footer identical to the other pages. This keeps the navigation consistent.</p>
<p>For the about page, I start with a hero section, just like on the home and subject page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>The hero section includes a heading and a short paragraph to introduce the page.</p>
<p>Now, I'll add the main content section, divided into two sections: mission and values.<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This is very standard design, with some bold elements to improve the user experience, which I liked very much.</p>
<p>I initially planned to include a team section, but I decided against it for now. I may add it later when I have more info.<br>
</p>
<pre class="brush:php;toolbar:false"> <!-- <div>
<p>And that completes both subjects.html and about.html for now, and the main-pages are done! For those wondering, this is how our pages looks like at the end of the day.<br>
Subjects Page<br>
About Page</p>
<p>Okay, let's get started with the subject-specific pages.</p>
<h2>
Hour 16: Setting up the Chemistry Subject Page
</h2>
<p>First, I created a folder, \Chemistry. Then, inside this folder, I created an index.html file.<br>
</p>
<pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neuron IQ - Chemistry</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style-main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div>
<p>This page, like the others, starts with my basic HTML structure, with navigation links to our main pages (/index.html, /subjects.html, and /about.html) and also a link to the main style sheets.</p>
<p>Now, let's add the structure for this page:<br>
</p>
<pre class="brush:php;toolbar:false"> <section>
<p>This sets up a three-column layout with an article list on the left, main topics in the center, and another topic list on the right. This is all within the .chemistry-page section. Before moving on, let's address few questions you may have;</p>
- Some href values are "1.html", "organic.html", and some are just "#". Answer: I used "1.html", "organic.html", etc., for links that are ready. The "#" is a placeholder for pages not yet developed. It keeps the structure consistent and visually complete, allowing me to see how the final site will look, while indicating that the content isn't available yet.
Finally, I'll keep the same footer as all of the other pages, to keep consistency.
Hour 17: Styling the Chemistry Page
Now, I need to style this Chemistry page. I started by creating a new file inside the Chemistry folder, style.css.
I wanted a design that was distinct and visually appealing. Here’s what I came up with:
:root {
--primary-color: #00bcd4; /* Vibrant yet professional */
--secondary-color: #ffc107; /* Energetic accent */
--background-dark: #1a1a1a; /* Deeper, richer dark */
--background-light: #2e2e2e; /* Slightly lighter for contrast */
--text-light: #f0f0f0; /* Softer off-white */
--text-accent: #ffffff; /* Pure white for emphasis */
--border-radius: 12px; /* More pronounced curves */
--shadow-light: rgba(0, 0, 0, 0.15); /* Subtle shadow */
--transition-duration: 0.3s;
--font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-family-heading: 'Montserrat', sans-serif;
}
body {
font-family: var(--font-family-base);
background-color: var(--background-dark);
color: var(--text-light);
line-height: 1.6;
-webkit-font-smoothing: antialiased; /* Smoother fonts for webkit browsers */
-moz-osx-font-smoothing: grayscale; /* Smoother fonts for Firefox */
}
.chemistry-page {
display: flex;
max-width: 1200px;
margin: 60px auto; /* Increased top/bottom margin */
padding: 30px; /* Increased padding for spaciousness */
background: linear-gradient(145deg, var(--background-dark), #111111); /* Subtle gradient */
border-radius: var(--border-radius);
box-shadow: 0 8px 16px var(--shadow-light); /* More pronounced shadow */
}
.article-list, .topic-list {
flex: 1;
padding: 30px; /* Increased padding */
background: var(--background-light);
border-radius: var(--border-radius);
box-shadow: 0 4px 8px var(--shadow-light);
margin: 0 15px; /* Increased horizontal margin */
transition: transform var(--transition-duration), box-shadow var(--transition-duration); /* Smooth transitions */
}
.article-list:hover, .topic-list:hover {
transform: translateY(-5px); /* Gentle lift on hover */
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}
.article-list h2, .topic-list h2 {
margin-bottom: 25px; /* Increased bottom margin */
text-align: center;
font-family: var(--font-family-heading);
font-size: 1.8rem; /* Slightly larger */
color: var(--text-accent);
position: relative; /* For pseudo-element underline */
padding-bottom: 10px;
}
.article-list h2::after, .topic-list h2::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 60px;
height: 3px;
background-color: var(--primary-color);
transform: translateX(-50%);
}
.article-list ul, .topic-list ul {
list-style: none;
padding: 0;
}
.article-list ul li, .topic-list ul li {
margin-bottom: 15px; /* Increased bottom margin */
border-bottom: 1px solid #444; /* Subtle divider */
padding-bottom: 10px;
}
.article-list ul li:last-child, .topic-list ul li:last-child {
border-bottom: none; /* Remove border from the last item */
padding-bottom: 0;
margin-bottom: 0;
}
.article-list ul li a, .topic-list ul li a {
display: block;
padding: 15px; /* Increased padding */
text-decoration: none;
color: var(--text-light);
background: linear-gradient(to bottom right, #333, #222); /* Subtle gradient */
border-radius: calc(var(--border-radius) / 2); /* Smaller radius for list items */
transition: background var(--transition-duration), transform var(--transition-duration);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); /* Add shadow to list items */
}
.article-list ul li a:hover, .topic-list ul li a:hover {
background: linear-gradient(to bottom right, var(--primary-color), #0097a7); /* More vibrant hover */
transform: scale(1.02); /* Gentle scale on hover */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
color: var(--text-accent);
}
.content-grid {
flex: 3;
padding: 30px; /* Increased padding */
margin: 0 15px; /* Increased horizontal margin */
}
.topic-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Slightly wider min-width */
gap: 25px; /* Increased gap */
}
.topic-grid a {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: var(--text-light);
background: var(--background-light);
padding: 30px; /* Increased padding */
border-radius: var(--border-radius);
box-shadow: 0 4px 8px var(--shadow-light);
transition: transform var(--transition-duration), box-shadow var(--transition-duration);
}
.topic-grid a img {
width: 60px; /* Larger icon */
height: 60px; /* Larger icon */
margin-bottom: 15px; /* Increased bottom margin */
filter: brightness(1.1); /* Slightly brighten the icons */
transition: transform var(--transition-duration);
}
.topic-grid a:hover {
transform: scale(1.05); /* Gentle scale on hover */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.topic-grid a:hover img {
transform: scale(1.1); /* Scale the icon on hover */
}
/* Responsive adjustments with smoother transitions */
@media (max-width: 768px) {
.chemistry-page {
flex-direction: column;
margin: 30px auto; /* Adjust margins for smaller screens */
padding: 20px;
}
.article-list, .topic-list, .content-grid {
margin: 15px 0;
padding: 20px;
}
.topic-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Adjust for smaller screens */
}
}
/* Further refinements for smaller screens */
@media (max-width: 576px) {
.chemistry-page {
padding: 15px;
}
.article-list, .topic-list, .content-grid {
padding: 15px;
}
.article-list h2, .topic-list h2 {
font-size: 1.5rem;
margin-bottom: 20px;
}
.topic-grid {
gap: 15px;
}
.topic-grid a {
padding: 20px;
}
.topic-grid a img {
width: 40px;
height: 40px;
margin-bottom: 10px;
}
}
這為三列佈局提供了樣式，我在 Chemistry 資料夾內的 index.html 中使用了該佈局。它使頁面看起來更乾淨、更專業。我還添加了一些針對小螢幕的響應式設計。
對於想要即時預覽的人：
化學
由於這是一個基本頁面，我覺得不需要加入 script.js
這就是今天的全部內容。我明天可能會見到你。到那時再見'
以上是我從頭開始建立了終極教育網站 - 第 2 天的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn