feat: Add CSS layout exercises and corresponding HTML files
- Created multiple exercises under the CSS layout section, including: - Final page layout with CSS styles and HTML structure. - Display and flow concepts with examples of block, inline, and none display types. - Selectors and pseudo-classes with practical examples. - Overflow and sizing handling in CSS. - Grid layout basics for two-dimensional layouts. - Fixed and sticky positioning examples. - Centering techniques for common layout scenarios. - Added README files for each exercise to outline objectives and file structures. - Updated main README to include new sections and usage instructions.
This commit is contained in:
chali
33
02-css-layout/05-final-page/README.md
Normal file
33
02-css-layout/05-final-page/README.md
Normal file
@@ -0,0 +1,33 @@
|
||||
# 练习 5：综合页面
|
||||
|
||||
## 目标
|
||||
|
||||
把前面的 CSS 知识拼起来，做一个完整页面。
|
||||
|
||||
## 项目名称
|
||||
|
||||
前端学习路线页
|
||||
|
||||
## 任务
|
||||
|
||||
请基于给定 HTML，把页面排成一个完整的学习介绍页，要求：
|
||||
|
||||
- 页面有明显的内容容器
|
||||
- 页头、主视觉、课程卡片、进度表单区分明显
|
||||
- 使用 Flex 做卡片区布局
|
||||
- 使用颜色、留白、边框和圆角提升可读性
|
||||
- 不要为了排版去破坏 HTML 结构
|
||||
|
||||
## 建议顺序
|
||||
|
||||
1. 先给 `body` 和主容器设置基础样式
|
||||
2. 再写 `header`、`hero`
|
||||
3. 再写课程卡片布局
|
||||
4. 最后写表单和按钮
|
||||
|
||||
## 文件
|
||||
|
||||
- [starter.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/starter.html)
|
||||
- [starter.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/starter.css)
|
||||
- [answer.html](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/answer.html)
|
||||
- [answer.css](/Volumes/Macintosh HD 1/home/front-end-example/02-css-layout/05-final-page/answer.css)
|
||||
113
02-css-layout/05-final-page/answer.css
Normal file
113
02-css-layout/05-final-page/answer.css
Normal file
@@ -0,0 +1,113 @@
|
||||
body {
|
||||
margin: 0;
|
||||
background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
|
||||
color: #0f172a;
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
}
|
||||
|
||||
.page {
|
||||
width: min(1100px, calc(100% - 40px));
|
||||
margin: 32px auto 48px;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-radius: 20px;
|
||||
background: rgba(255, 255, 255, 0.82);
|
||||
border: 1px solid #dbeafe;
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
color: #1d4ed8;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-top: 24px;
|
||||
padding: 32px 28px;
|
||||
border-radius: 24px;
|
||||
background: #1d4ed8;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 8px;
|
||||
color: #bfdbfe;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
margin: 0 0 12px;
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.hero-link {
|
||||
display: inline-block;
|
||||
padding: 12px 18px;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: #1d4ed8;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.tracks {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.track-card {
|
||||
flex: 1;
|
||||
padding: 22px;
|
||||
border-radius: 18px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dbe4f0;
|
||||
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.contact {
|
||||
margin-top: 24px;
|
||||
padding: 24px;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #dbe4f0;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
padding: 12px 14px;
|
||||
border: 1px solid #cbd5e1;
|
||||
border-radius: 12px;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 140px;
|
||||
padding: 12px 16px;
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: #0f766e;
|
||||
color: #ffffff;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
}
|
||||
60
02-css-layout/05-final-page/answer.html
Normal file
60
02-css-layout/05-final-page/answer.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>前端学习路线页</title>
|
||||
<link rel="stylesheet" href="./answer.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="site-header">
|
||||
<h1>前端学习路线</h1>
|
||||
<nav class="nav">
|
||||
<a href="#html">HTML</a>
|
||||
<a href="#css">CSS</a>
|
||||
<a href="#js">JavaScript</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">第 2 阶段</p>
|
||||
<h2>CSS 布局与视觉</h2>
|
||||
<p>目标是把已经写好的 HTML 页面排得更清晰、更稳定、更可读。</p>
|
||||
</div>
|
||||
<a class="hero-link" href="#tracks">开始练习</a>
|
||||
</section>
|
||||
|
||||
<section class="tracks" id="tracks">
|
||||
<article class="track-card" id="html">
|
||||
<h3>盒模型</h3>
|
||||
<p>理解 margin、padding、border 的区别。</p>
|
||||
</article>
|
||||
<article class="track-card" id="css">
|
||||
<h3>Flex</h3>
|
||||
<p>学会横向排列、间距和居中。</p>
|
||||
</article>
|
||||
<article class="track-card" id="js">
|
||||
<h3>定位</h3>
|
||||
<p>掌握相对定位和绝对定位的配合。</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="contact">
|
||||
<h3>练习登记</h3>
|
||||
<form class="form">
|
||||
<label for="name">姓名</label>
|
||||
<input id="name" type="text" />
|
||||
|
||||
<label for="goal">今日目标</label>
|
||||
<textarea id="goal" rows="4"></textarea>
|
||||
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
02-css-layout/05-final-page/starter.css
Normal file
34
02-css-layout/05-final-page/starter.css
Normal file
@@ -0,0 +1,34 @@
|
||||
body {
|
||||
}
|
||||
|
||||
.page {
|
||||
}
|
||||
|
||||
.site-header {
|
||||
}
|
||||
|
||||
.nav {
|
||||
}
|
||||
|
||||
.hero {
|
||||
}
|
||||
|
||||
.hero-link {
|
||||
}
|
||||
|
||||
.tracks {
|
||||
}
|
||||
|
||||
.track-card {
|
||||
}
|
||||
|
||||
.contact {
|
||||
}
|
||||
|
||||
.form {
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
}
|
||||
60
02-css-layout/05-final-page/starter.html
Normal file
60
02-css-layout/05-final-page/starter.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>前端学习路线页</title>
|
||||
<link rel="stylesheet" href="./starter.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="page">
|
||||
<header class="site-header">
|
||||
<h1>前端学习路线</h1>
|
||||
<nav class="nav">
|
||||
<a href="#html">HTML</a>
|
||||
<a href="#css">CSS</a>
|
||||
<a href="#js">JavaScript</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">第 2 阶段</p>
|
||||
<h2>CSS 布局与视觉</h2>
|
||||
<p>目标是把已经写好的 HTML 页面排得更清晰、更稳定、更可读。</p>
|
||||
</div>
|
||||
<a class="hero-link" href="#tracks">开始练习</a>
|
||||
</section>
|
||||
|
||||
<section class="tracks" id="tracks">
|
||||
<article class="track-card" id="html">
|
||||
<h3>盒模型</h3>
|
||||
<p>理解 margin、padding、border 的区别。</p>
|
||||
</article>
|
||||
<article class="track-card" id="css">
|
||||
<h3>Flex</h3>
|
||||
<p>学会横向排列、间距和居中。</p>
|
||||
</article>
|
||||
<article class="track-card" id="js">
|
||||
<h3>定位</h3>
|
||||
<p>掌握相对定位和绝对定位的配合。</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="contact">
|
||||
<h3>练习登记</h3>
|
||||
<form class="form">
|
||||
<label for="name">姓名</label>
|
||||
<input id="name" type="text" />
|
||||
|
||||
<label for="goal">今日目标</label>
|
||||
<textarea id="goal" rows="4"></textarea>
|
||||
|
||||
<button type="submit">提交</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user