Contents

是在写这个笔记的过程中发现的Bug

今天学了CSS的媒体查询,就顺便拿MOOC学院来看一下,然后就发现…

首页

↑ 首页并没有采用媒体查询的设计

课程

↑ 页面缩小时,课程栏从3栏直接跳成1栏,导致图片太大。(本来应该是2栏课程的)

↑ 页面缩小时,导航栏上的首页、课程、社区等等的错位了。

讨论区

留学

↑ 页面缩小时,导航栏上的首页、课程、社区等等的错位了。

↑ 页面缩小时,课程栏从3栏直接跳成1栏,导致图片太大。(本来应该是2栏课程的)

↑ 这附图展示了
fixed上面的错误,筛选栏悬浮在了图片上方,与导航栏之间本来不应该有间隙。

(⊙o⊙)…

大家可以也试试,打开MOOC学院,然后改变浏览器宽度看MOOC学院网页的响应(变化)。

除了第一附图和最后一幅图说明的不是响应上面的问题,其余的都是【媒体查询】——响应式设计上面的问题。

  • 什么是媒体查询?
  • 哪些网站采用了响应式设计?
  • 它简单的语法什么样?
  • MOOC学院以上的这些Bug该如何修复?

学完 Codecademy 上面 HTML & CSS
这门课
,再看下
这个CSS布局教程,以及这个媒体查询的文档,你也会调试这些
Bug。

相关笔记

【HTML&CSS】边学边写更有动力!

【CSS学习笔记】从教程到项目

本文由果壳MOOC学院网站(mooc.guokr.com)导出,发帖用户为JING-TIME。

Contents