今天完成的事情：媒体查询，任务九深度思考，HTML <label> 标签，CSS :before 选择器，上传小课堂

明天计划的事情：制作头部之后的流程图，制作主体表单，用css+div模拟原生表单并保证元素功能完好

遇到的问题：

1、我的hover选择器效果无法覆盖bootstrap的hover效果

我的代码

.navbar-nav>li>a:hover {
    color: #ffffff;
    background-color: #1d7ad9;
}

bootstrap代码

.navbar-default .navbar-nav>li>a:hover {
    color: #333;
    background-color: transparent;
}

解决办法：权重不够，越具体权重越高

收获：

一、日常收获

1、CSS选择器的权重详解

原则一： 继承不如指定

原则二： #id > .class > 标签选择符

原则三：越具体越强大

原则四：标签#id >#id ; 标签.class > .class

结论是：比较同一级别的个数，数量多的优先级高，如果相同即比较下一级别的个数

important->内联->ID->类->标签|伪类|属性选择->伪对象->继承->通配符->继承

2、改变单选按钮radio的默认样式

很多时候，无论是为了表单元素统一，还是为了用户体验良好，我们都会选择 label 元素和 input[type="radio"] 一起使用。当<label>元素与单选按钮关联之后，也可以起到触发开关的作用。

思路：

step1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式；

step2. 然后把真正的单选按钮隐藏起来；

step3. 最后把生成内容美化一下。

二、任务九深度思考

1.如何使用bootstrap栅格系统？

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。所以需要在head内引入<meta name="viewport" content="width=device-width">和bootstrap.css

使用规则

1、数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。

2、在行(.row)中可以添加列(.column)，但列数之和不能超过平分的总列数，比如12。

3、具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素

4、通过设置内距（padding）从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距（margin）来抵消内距(padding)的影响

2.媒体查询如何使用？

使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。

1 设置meta标签

2 媒体查询有两种引入方法： link元素中的CSS媒体查询 css样式表中媒体查询 

一个基本的媒体查询，即一个媒体属性与默认指定的 all媒体类型

 @media (min-width: 700px) { ... } 

and 关键字用于合并多个媒体属性或合并媒体属性与媒体类型,只有当每个属性都为真时，结果才为真 

@media and (max-width:600px) and (min-width: 800px;){......}】

3.响应式的优点与缺点？

响应式网站是在2010年提出来的，是为了能让网页在不同设备下兼容多个终端，而不是为每个终端特定一种版本。

优点如下：

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

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

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

缺点如下：

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

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

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

对大型门户或电商网站来说，响应式设计目前确实不太适合。因为响应式设计的基本原则是不会因设备不同而给予用户不同的内容（比如在低分辩率设备上删减某些内容），而大型门户或电商网站的单页内容非常多，当缩减到低分辨率设备上，又要保证内容全部可浏览时，必然导致页面拉长，浏览困难度增加。所以很多大型门户或电商网站都会提供一个移动设备版的网站，或者干脆直接让用户缩放网页进行浏览。 

4. 对于同一用户，在不同设备浏览响应式网页时，可能会感到不适应。虽然优秀的响应式设计会尽量在不同设备呈现相同数量及质量的内容，但对于同一用户，毕竟在不同设备看到的网页排版发生了改变，可能带来不适应。

任务进度：css-10

任务开始时间：2018年5月11日

预计结束时间：2018年5月13日