Day 34

今天完成的事情

      1.完成task8-1的一半

遇到的问题

      1.【solved】导航栏和轮播图之间有一条空隙，各自设置margin,padding为0都没有用

给main设置负的margin-top ，px单位即可，调整到适宜的高度

      2.【solved】直接复制的bs的模版  只改了图片的src 但是页面只显示第一张图片和两个按钮 图片不自动轮播 点击按钮也没反应 

网上说：

【fail】 jquery.js要写在bootstrap.mini的前面 

【fail】换别的不同版本的链接

【fail】添加js代码 function(){}自行实现轮播

【success】将bootstrap.mini.js的文件换为本地文件

      3.【solved】psd图上两侧留出很大一片空白来，在想要怎么样简洁的让两边空出一列来

后来才发现是我自己钻了牛角尖，两侧的留白应该是container在超出一定屏幕大小之后的margin，并不是什么留白

      4.【solved】轮播图屏幕分辨率超过2560*1920的时候会右边会有空白

解决办法：给img设class，然后设置百分比为100%

收获

      1.设置轮播图图片切换时间间隔

在轮播图的div里添加data-interval="2500"

其中2500代表2.5s

      2.缩小屏幕后折叠按钮

折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。

滚动监听（点击导航栏的按钮，然后切换到某个页面）

导航栏data-target=".***"与文本或者想要关联的盒子用“#***“与关联内容用id="***"同名，产生一对一对应，在导航栏点击你想了解的内容页面自动滚动到想看的内容。

      3.栅格布局如何让5个一排

bootstrap将一行分成12个等分的栅格，所以宽度就是1/12。col-xs-3就是3个栅格单位，宽度就是3/12=25%，每行能放4个，刚好100%。根据这个原理，想分成5列也很好办，可以直接用col-xs-3，然后在CSS里加一行代码
.col-xs-3 { width:20%;} 

等于重新定义了栅格宽度，这样每行刚好5个。

      4.在手机上查看页面，没有hover效果时应该怎么办？ 

      5.媒体查询如何使用

设置meta标签<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

width = device-width：宽度等于当前设备的宽度

initial-scale:初始的缩放比例(默认设置为1.0)

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)

user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户放大缩小页面)

1.“max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。如：

@media (max-width:480px){}

2.最小宽度min-width

“min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效

@media screen and (max-width: 768px);

max-width后面的冒号两边一定要有空格，一定要有空格，一定要有空格。

没有空格的话，css代码解析不出来，媒体查询不成功。

媒体属性

width:浏览器可视宽度

height:浏览器可视高度

device-width:设备屏幕的宽度

device-height:设备屏幕的高度

orientation:检测设备目前处于横向还是纵向状态

aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)

device-aspect-ratio:检测设备的宽度和高度的比例

color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）

color-index:检查设备颜色索引表中的颜色，他的值不能是负数

monochrome:检测单色楨缓冲区域中的每个像素的位数。

resolution:检测屏幕或打印机的分辨率

grid：检测输出的设备是网格的还是位图设备。

明天计划学习

          继续完成task8

注： 【unsolved】截日报发出前未解决的问题

        【solved】已解决现象但并未从根本上解决问题

        【solved】已解决