3.md

JavaScript 和 CSS 进阶

学习目标

CSS

• 响应式布局
• CSS 选择器进阶
• CSS 实用函数

JavaScript

• JavaScript 异步
• fetch API 及其应用

学习资料

正在施工中...

作业

一

请基于 demo3-1.html 进行修改，完成以下任务：

1. 为 content 设置合理的 padding，使其可显示范围恰好为屏幕上除 header 外的所有区域（即使页面的显示区域刚好覆盖整个屏幕但是不出现滚动条），并将背景颜色设置为 #f0f8ff。
2. 利用 CSS Media Query 为下面的 .card1、.card2、.card3、.card4、.card5 设置合适的 display 属性，使其在不同屏幕尺寸下显示。
3. 将本列表的第二个条目设置为红色，但不使用 class 和 id 选择器（即基于现有的 HTML 结构编写选择器）。
4. 将本列表中的所有奇数条目设置为粗体，但不使用 class 和 id 选择器（即基于现有的 HTML 结构编写选择器）。

效果如图：

▲ 屏宽为 768px 时的效果

▲ 屏宽为 1024px 时的效果

如果经过尝试后无法完成，请查看 demo3-1-answer.html，理解后再尝试独立完成。

二

请基于 demo3-2.html 进行修改，完成以下任务：

1. 编写 JavaScript 代码，实现打开页面后自动查询当前用户的 IP 地址。
   1. 调用的 API 地址为 https://myip.ipip.net/json，请求方法为 GET，无需附加参数。
2. 将查询到的 IP 地址显示在页面上。

加分项：

1. 自由发挥，美化页面。
2. 请简要说明为什么在这个任务中需要使用 id 选择器来查找插入查询结果的元素。

如果经过尝试后无法完成，请查看 demo3-2-answer.html，理解后再尝试独立完成。