今天完成了什么事情

任务八九里主页的制作，明日计划：职位页的制作，在周五或者这周结束前大致完成89。

今日收获：

1.checked的应用，知识点，同级生效。

checked 属性规定在页面加载时,应该被预先选定的 input 元素。

checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

举例：

自定义input[type="checkbox"]的样式

       直接对复选框设置样式，那么这个伪类并不实用，因为没有多少样式能够对复选框起作用。不过，倒是可以基于复选框的 勾选状态 借助 组合选择符 来给其他元素设置样式。

      为了表单元素统一，也为了用户体验良好，我们都会选择 label 元素和 input[type="checkbox"] 一起使用。当<label>元素与复选框关联之后，也可以起到触发开关的作用。

实战应用：

css代码

input[type='checkbox']{
display: none;
   background: #000;
}
input[type="checkbox"]:checked~.column{
display: block;

html代码：

<input type="checkbox" id="check"/>
<label "col-xl-collapse-my-dropdown label-position" for="check" > <img src="/image/down-menu.png"></label>
<ul "column column-sm column-md column-lg column-xl">
   <li><p>首页</p></li>
   <li><p>职业</p></li>
   <li><p>推荐</p></li>
   <li><p>关于<p></li>
</ul>
<div id="demo" "carousel slide  banner-box" data-ride="carousel">
  

为了实现下拉菜单在普通文档流将banner挤下去，所以label必须和banner同级

同时获得的知识点：

“~”(范围大)

　　p~ul选择器 p之后出现的所有ul。

　　两种元素必须拥有相同的父元素，但是 ul不必直接紧随 p。

“>”(范围小）

       是css3特有的选择器，A>B 表示选择A元素的所有子B元素。

　　 与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。

         .a，.b｛逗号指相同的css样式｝；

         .a .b｛空格指后代元素｝；

         .a>.b｛大于号指子代元素｝；

“+”（）

       .a+.b｛这个“+”是选择相邻兄弟，叫做“相邻兄弟选择器”

　　如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器(Adjacent sibling selector)。

　　例如，如果要增加紧接在 h1 元素后出现的段落的上边距，可以这样写：

　　h1 + p {margin-top:50px;}

　　这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。｝

遇到的问题：checked生效的block效果不会因为媒体查询失效

尝试解决办法，将input check放进媒体查询中