commit eee3d8d7f8e9658b509c6ba8322aa73116efd064 Author: pjc <2121542413@qq.com> Date: Thu Oct 1 09:35:03 2026 +0800 上传文件至「/」 diff --git a/README.md b/README.md new file mode 100644 index 0000000..844ddad --- /dev/null +++ b/README.md @@ -0,0 +1,21 @@ +# 国庆任务 · 前端基础小测 + 仿报纸页面 + +> 国庆假期小练习，检验前两周（Day_0 ~ Day_13）学的 HTML / CSS / JS 基础。 +> **选择、填空题必做**； +> **写页面题是拔高题**，建议都看一看思考一下，最好能动手写一点，不要求完美完成，最后评价会根据完成度完成。 +> 完成后**私发**（见下方"提交方式"），**不要**发到公开工单或群里，避免互相抄答案。 + +## 题目 + +👉 点这里看题目：[题目.md](./题目.md) + +- 一、选择题 12 题（必做） +- 二、填空题 8 题（必做） +- 三、写页面题（选做 · 拔高题） + +## 提交方式 + +- **私发，不要公开**：把答案打包成压缩包发送到`2121542413@qq.com`，**不要**发到公开工单或群里，避免被其他人看到、互相抄答案。 +- **打包命名**：选择题、填空题的答案写在 `答案.txt`，连同页面题的 `index.html`、`style.css`，一起打包成压缩包，命名为 `姓名-学号-国庆任务`（如 `张三-26010001001-国庆任务.zip`）。 +- **截止时间**：以群通知为准。 +- **抄袭处理**：若出现明显雷同的答案，涉及的双方均按未完成处理。 diff --git a/题目.md b/题目.md new file mode 100644 index 0000000..6344fd9 --- /dev/null +++ b/题目.md @@ -0,0 +1,229 @@ +·# 国庆任务 · 题目 + +> 选择、填空题**必做**；写页面题是**拔高题**，建议都看一看。 +> 提交方式见 [README.md](./README.md)。 + +--- + +## 一、选择题（12 题，每题只有一个正确答案） + +1. 一个网页文件里，用来告诉浏览器"这是 HTML5 标准文档"的第一行代码是？ + A. `` + B. `` + C. `` + D. `` + +2. 下面哪个标签用来显示一张图片？ + A. `` + B. `` + C. `` + D. `` + +3. 想让一个链接点击后在新标签页打开，`` 标签要加哪个属性？ + A. `href` + B. `src` + C. `target="_blank"` + D. `alt` + +4. 表单里两个单选框（radio）要能"只能选一个"，必须保证它们的哪个属性相同？ + A. `value` + B. `id` + C. `name` + D. `type` + +5. 用 CSS 选中"所有 class 为 box 的元素"，写法是？ + A. `#box` + B. `.box` + C. `box` + D. `*box` + +6. 盒模型从内到外的顺序是？ + A. margin → border → padding → content + B. content → padding → border → margin + C. content → margin → padding → border + D. padding → content → margin → border + +7. 一个 div 设置 `width: 200px; padding: 20px; border: 5px solid black;`（没有设置 `box-sizing: border-box`），它的实际总宽度是？ + A. 200px + B. 230px + C. 250px + D. 240px + +8. 用 Flex 让子元素在**主轴方向**"两端对齐、均匀分布"，应该用？ + A. `align-items: center` + B. `justify-content: space-between` + C. `justify-content: center` + D. `flex-direction: column` + +9. 为了让页面在手机上正常自适应，通常要在 `` 里加哪一行？ + A. `` + B. `` + C. `我的页面` + D. `` + +10. 下面哪个关键字声明的变量"不能被重新赋值"？ + A. `let` + B. `var` + C. `const` + D. `function` + +11. 表达式 `"1" + 2` 的结果是？ + A. `3` + B. `"12"` + C. `"3"` + D. 会报错 + +12. 想把数组 `[1, 2, 3]` 里每个元素都乘以 2 并得到一个新数组，应该用哪个方法？ + A. `forEach` + B. `filter` + C. `map` + D. `push` + +--- + +## 二、填空题（8 题，必做） + +1. 补全下面的 HTML 文档骨架： + ```html + + <____ lang="zh"> + + + 我的页面 + + + + ``` + +2. 写出 CSS：让页面上**所有** `h1` 的文字颜色是红色、并且水平居中。 + ```css + /* 在这里写 */ + ``` + +3. 盒模型一共有四层，从内到外依次是：content（内容）→ ____（内边距）→ border（边框）→ ____（外边距）。 + +4. 用 Flex 让容器里的子元素"水平垂直都居中"，补全容器样式： + ```css + .box { + display: flex; + justify-content: ____; + align-items: ____; + } + ``` + +5. 补全变量声明（声明一个**可以重新赋值**的变量 age，值为 18）： + ```javascript + ____ age = 18; + ``` + +6. 补全判断条件（当 age **大于或等于** 18 时，输出"成年"）： + ```javascript + if (age ____ 18) { + console.log("成年"); + } + ``` + +7. 补全函数，使它**返回** a 与 b 的和： + ```javascript + function add(a, b) { + ____ a + b; + } + ``` + +8. 补全 JSON 转换（对象 ←→ 字符串）： + ```javascript + // 把对象转成 JSON 字符串 + const str = JSON.____(obj); + // 把 JSON 字符串转回对象 + const back = JSON.____(str); + ``` + +--- + +## 三、写页面题（拔高题） + +**题目**：仿照《法治日报》电子报的一篇文章页，用 **HTML + CSS** 做一个"新闻阅读页"。 + +参考页面：http://epaper.legaldaily.com.cn/fzrb/content/20260920/Articel05002GN.htm +（打不开也没关系，按下面的结构要求做即可。） + +**主题自拟**（校园新闻、科技新闻、你感兴趣的任何题材都行）。 + +### 结构要求（含知识点提示） + +1. **顶部栏**（左右分布） + - 左边：网站名 / logo 文字；右边：日期（或一个"搜索"） + - 💡 提示：用 Flex 做左右分布 `display: flex; justify-content: space-between;` +2. **版面导航条** + - 如"第 05 版 · 校园文化"，右边放"上一篇 / 下一篇 / 返回目录"三个链接 + - 💡 提示：用 `` 写链接；导航条本身用 `padding` 和 `background-color` 撑出条状 +3. **内容导航** + - 竖排列出本页 3~4 篇文章的标题（可点击） + - 💡 提示：用列表标签 `