回顾挑战
本课属于 Coddy HTML 学习旅程的“前端实践”单元。第 16 课,共 35 课。
挑战
简单现在有一个介绍投资和财务自由的 HTML 页面。请运用你学到的主题设置知识:
- 主色和次色
- 在
:root中定义--primary-color和--secondary-color。 - 将
--primary-color用作 header 和 footer 的背景色,并将--secondary-color用作 body 的背景色。
- 在
- 深色模式
- 创建一个
.dark-mode类,用来更改背景、文本和标题的颜色。 - 在
<body>中手动添加class="dark-mode"来测试效果。
- 创建一个
- 强调色
- 定义
--accent-color,并将其用于按钮的背景色和页脚链接文本颜色(rgb(249, 168, 37))。
- 定义
- 排版
- 定义
--h1-size和--h2-size,并将它们应用于标题。
- 定义
目标:让页面在浅色和深色主题下都显得协调、专业且易于阅读。
亲手试试
<!DOCTYPE html>
<html>
<head>
<title>Recap Challenge</title>
<style>
/* Theme variables */
:root {
--text-color: #333333;
--heading-color: #1a3a6d;
--primary-font: "Georgia", serif;
--secondary-font: "Arial", sans-serif;
}
body {
font-family: var(--primary-font);
color: var(--text-color);
margin: 0;
line-height: 1.6;
}
header {
color: white;
text-align: center;
padding: 2rem 1rem;
background-color: #000000;
}
h1 {
font-family: var(--secondary-font);
margin-bottom: 0.5rem;
}
h2 {
font-family: var(--secondary-font);
color: var(--heading-color);
}
main {
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
}
section {
margin-bottom: 2rem;
background: #fff;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
ul li {
margin-bottom: 0.6rem;
}
button {
background-color: #000000;
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #c17900;
}
footer {
text-align: center;
padding: 1rem;
color: white;
background-color: #000000;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>Financial Freedom</h1>
<p>Smart habits for building wealth and living on your own terms.</p>
</header>
<main>
<section>
<h2>What is Financial Freedom?</h2>
<p>Financial freedom means having enough savings, investments, and cash on hand to afford the lifestyle you want, without worrying about money day-to-day.</p>
</section>
<section>
<h2>Timeless Investing Advice</h2>
<ul>
<li>Start early — the power of compounding works best with time.</li>
<li>Live below your means and save consistently.</li>
<li>Diversify your investments to reduce risk.</li>
<li>Stay patient — avoid emotional decisions during market ups and downs.</li>
</ul>
</section>
<section>
<h2>Money Mindset</h2>
<p>Money is less about numbers and more about behavior. Your mindset and habits matter more than chasing the highest returns.</p>
<button>Learn More</button>
</section>
</main>
<footer>
<p>More resources on <a href="#">Investing & Financial Freedom</a></p>
</footer>
</body>
</html>
前端实践中的所有课
自己练习: Web 在线编辑器