Day 29

今天完成的事情

      1.大致完成首页

      2.浪费时间在跟任务无关的知识点

遇到的问题

      1.设置了背景色为#f0f0f0，发现颜色没有变

搞了很久没有弄懂，后来百度得知

1. 1.CSS权重问题.
2. 2.权重一样的情况下,也有可能是后面样式把前面的样式给覆盖了.
3. 解决办法是在失效的样式后面加上!important

      2.手动画横线，但横线不能显示

百度了<hr>具体的样式说明

收获

      1.bootstrap定义的四个页面断点

.col-xs-* 针对超小屏幕 手机（<768px）

.col-sm-* 小屏幕 平板 (≥768px)

.col-md-* 中等屏幕 桌面显示器 (≥992px)(栅格参数)

.col-lg-* 针对特大的（≥1200px）

      2.navbar组件

.navbar——设置nav元素为导航条组件；

.navbar-default——指定导航条组件为默认主题；

.navbar-inverse——指定导航条组件为黑色主题；

.navbar-fixed-top——设置导航条组件固定在顶部；

.navbar-fixed-bottom——设置导航条组件固定在底部；

.container-fluid——设置宽度充满父元素，即为100%；

.navbar-header——主要指定div元素为导航条组件包裹品牌图标及切换按钮；

.navbar-toggle——设置button元素为导航条组件的切换钮；

.collapsed——设置button元素为在视口小于768px时才显示；

.navbar-brand——设置导航条组件内的品牌图标；

navbar-brand默认是放文字的,也可以放图片，但必须是小图片,如果图片太大，位置就会靠下.

.collapse——设置div元素为视口大于768px时显示；

.navbar-collapse——设置div元素为导航条组件各列表项的父元素；

.navbar-nav——设置ul为导航条组件内的列表元素;

.navbar-left——设置导航条内元素向左对齐；

.navbar-right——设置导航条内元素向右对齐；

.navbar-form——为导航条组件内部的表单组件；

navbar-form：主要调整所有form都为行内元素；

.navbar-btn——为导航条组件内部的按钮样式；

.navbar-text——为导航条组件内部的文本样式；

.navbar-link——在标准的导航组件之外添加标准链接，让链接有正确的颜色和反色设置；

.breadcrumb——设置列表元素显示为路径导航组件；

collapse的作用是为了当浏览器的窗口宽度小于768px的时候，将设置为collapse样式的div元素内的所有其它元素都折叠起来，以一个列表的形式显示。

      3.可以覆盖bootstrap原有样式的几种方法：

1. 引用样式文件的时候先bootstrap后加载自己定义的css文件 。

2.给自己的写的样式加上 !important 标记，让自己的css有优先权（但是一般不推荐使用这个，虽然简单粗暴。而且也一般不会影响性能，但滥用important会引起一系列的权重问题，使CSS代码变得很难维护。）  

明天计划学习

      1.争取完成task7-2