今天完成的事情

修复任务九bug

开始任务十

明天计划的事情

继续任务十

遇到的问题

#导航栏响应后消失

解决办法：bootstrap基于主题类class和background-color通用样式class定义，导航栏的配色方案和主题选择,.navbar-light 来定义导航颜色反转（强黑白对比），使用.navbar-dark用于深色背景定义，删除navbar-light后导航栏消失不可见 ，加上即可

#谷歌、火狐、ie下 select 的默认下拉箭头图标差别比较大，

解决办法：清除默认样式，重新设计箭头图标；

深度思考

#响应式的优点与缺点？

优点如下：

1.在不同设备下能有不同的页面排版，这也是响应式最大的优点，在分辨率不同，设备环境进行一些不同的设计，所有开发维护和运营上，相对多个版本成本会降低很多。

2.兼容性好，能在不同的设备下浏览。

3.方便后期维护页面，只需要对必要的页面进行修改，不会影响其他页面。

缺点如下：

1.页面加载过多的代码，当你在pc端加载的时候，css样式也会将手机端的冗余代码一块加载，这样就直接影响了加载速度。

2.在响应式设计中，图片和视频都是统一加载的，当你在设备低的手机上加载不符合当前需要的图片或者视频，就会过多的消耗用户的流量。

3.局限性，对于响应式，局限性较大，不适合一些大型的门户网或者电商网站，一般门户网或电商网站一个界面内容较多，而响应式最忌讳较多内容，代码过多会影响运行速度。

# 媒体查询如何使用？

媒体查询包含一个可选的媒体类型和，满足CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。如果媒体查询中指定的媒体类型匹配展示文档所使用的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true.

当媒体查询为true时，其对应的样式表或样式规则就会遵循正常的级联规则进行应用。即使媒体查询返回false， 标签指向的样式表也将会被下载(但是它们不会被应用)

除非使用not或only操作符，否则媒体类型是可选的，默认值是all(全部).

可以使用逻辑操作符，包括not、and和only等，构建复杂的媒体查询。and操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真。not操作符用来对一条媒体查询的结果进行取反。only操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到。若使用了not或only操作符，必须明确指定一个媒体类型。

也可以将多个媒体查询以逗号分隔放在一起；只要其中任何一个为真，整个媒体语句就返回真。相当于or操作符。

and关键字用于合并多个媒体属性或合并媒体属性与媒体类型。一个基本的媒体查询，即一个媒体属性与默认指定的all媒体类型

媒体查询中使用逗号分隔效果等同于or逻辑操作符。当使用逗号分隔的媒体查询时，如果任何一个媒体查询返回真，样式就是有效的。逗号分隔的列表中每个查询都是独立的，一个查询中的操作符并不影响其它的媒体查询。这意味着逗号媒体查询列表能够作用于不同的媒体属性、类型和状态。

not 关键字应用于整个媒体查询，在媒体查询为假时返回真 (比如 monochrome 应用于彩色显示设备上或一个600像素的屏幕应用于 min-width: 700px 属性查询上 )。在逗号媒体查询列表中not仅会否定它应用到的媒体查询上而不影响其它的媒体查询。 not关键字仅能应用于整个查询，而不能单独应用于一个独立的查询。

only关键字防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式：

大多数媒体属性可以带有“min-”或“max-”前缀，用于表达“最低...”或者“最高...”。例如，max-width:12450px表示应用其所包含样式的条件最高是宽度为12450px，大于12450px则不满足条件，不会应用此样式。这避免了使用与HTML和XML冲突的“<”和“>”字符。

值： <color>

媒体： media/visual

是否接受 min/max 前缀：是

指定输出设备每个像素单元的比特值。如果设备不支持输出颜色，则该值为0。

值：<ratio>

媒体： media/visual, media/tactile

是否接受 min/max 前缀：是

描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例。

值：<length>

媒体： media/visual, media/tactile

是否接受 min/max 前缀：是

描述了输出设备的宽度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）。

值：<length>

媒体：media/visual, media/tactile

是否接受 min/max 前缀：是

height 媒体属性描述了输出设备渲染区域（如可视区域的高度或打印机纸盒的高度）的高度。

值：<integer>

媒体： media/visual

是否接受 min/max 前缀：是

指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0。

值：landscape | portrait

媒体：media/visual

是否接受 min/max 前缀：否

指定了设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式。

值： <resolution>

媒体： bitmap

是否接受 min/max 前缀：是

指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或每厘米（dpcm）的点数来表示。