今天完成的事

1.采用双重选择指定在特定区域内栅格系统五等分

.div6.col-xs-1-5,
    .col-sm-1-5,
    .col-md-1-5,
    .col-lg-1-5 {
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
}
.div6.col-xs-1-1,
    .col-sm-1-1,
    .col-md-1-1,
    .col-lg-1-1 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
    .div6.col-xs-1-1,
        .col-sm-1-1,
        .col-md-1-1,
        .col-lg-1-1 {
        width: 20%;
        float: left;
        }
}
.div6@media (min-width: 992px) {
    .div6.col-xs-1-1,
        .col-sm-1-1,
        .col-md-1-1,
        .col-lg-1-1 {
            width: 20%;
            float: left;
        }
}
.div6@media (min-width: 1200px) {
    .div6.col-xs-1-1,
        .col-sm-1-1,
        .col-md-1-1,
        .col-lg-1-1 {
            width: 20%;
            float: left;
        }
}

<div class="container">
    <div class="row div6 col-xs-1-5 col-sm-1-5 col-md-1-5 col-lg-1-5 ">
        <div class="div6 col-xs-1-1"></div>
        <div class="div6 col-lg-1-1"></div>
        <div class="div6 col-lg-1-1"></div>
        <div class="div6 col-lg-1-1"></div>
        <div class="div6 col-lg-1-1"></div>
    </div>
</div>

明天计划的事

1.完成战略合作 企业部分

2.完成友情链接部分

遇到的问题

收获

知道如何根据自己需求定制化bootstrap的栅格系统

任务2、3深入思考

一。如何配置nginx，实现在手机上查看页面？ 

1.去官网下载Nginx程序 安装后并有一个黑色框一闪而逝

2.在任意浏览器地址栏；输入localhost出现 welcome to nginx 说明安装启动成功了

3.具体测试方法

Nginx的配置文件是文件夹中的conf文件下的nginx.conf，其实配置文件默认不修改也是可有用的；如果你通过浏览器输入localhost出现的页面即为文件夹下HTML文件中的index.html；所以你可以将你想要检测的产品放到HTML文件夹中，并将原本的index.html文件给删了，这个时候打开网页输入localhost，使用ctrl+F5清下浏览器缓存即出现你产品中的index.html(产品的首页都会命名为index.html）页面，然后进行一系列测试看看是否OK

4.修改配置

实际的测试过程中，一般不大可能会将产品放入nginx文件里的html文件夹中，这个时候就需要修改配置，使匹配的路径改为我们想要的文件夹

要注意的是，在本地路径里的文件路径要将斜杠换成“\”，“/”会将之后的地址转义，一定要注意。

并且，每次修改nginx配置文件后要重启nginx。

5.如何在手机端访问

首先，电脑和手机连接上同一个wifi然后查看电脑ip:win+R→cmd→ipconfig→回车, 找到无限局域网适配器wlan中的ip地址，例如我的是192.168.0.119然后手机浏览器中输入192.168.01.119/task1.html 就可以看到自己的代码

1）出现报错，如何解决？

在nginx的文件目录里又一个logs的文件夹，这里有nginx所有运行的记录。

打开logs文件夹可以看到error.log文件，这里就是所有nginx运行的错误报告。

运行nginx出现问题后，可以打开此文件，选择对应时间的错误记录，自行查找。

最长见的错误就是

5832#3120: unknown directive "" in E:\nginx\nginx-1.12.0/conf/nginx.conf:2

这是由于配置文件的编码格式不对，重新将配置文件改为UTF-8编码就可以了。

2）什么是跨域？

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。

所谓同源是指，域名，协议，端口相同。浏览器执行javascript脚本时，会检查这个脚本属于那个页面，如果不是同源页面，就不会被执行

3）在配置路径的时候为什么用E:\wy\task，E:\task等路径都会显示错误

在本地路径里的文件路径要将斜杠换成“\”，“/”会将之后的地址转义，一定要注意。

作者：吥好使

链接：https://www.jianshu.com/p/6c29733c768c

二.如何利用PS切图以及从UI图中获取所需信息？

为什么前端工程师要用PS切图？

作为前端，我们需要负责把UI设计的图片，实现成HTML网页，在实现过程中，要用PS把需要的图标切出来。另外，在制作雪碧图的过程中也要用到PS切图。

在一张UI图片中，我们需要获取哪些有用信息？

一张图片拿到我们手里，首先要做的就是观察整个布局，思考我们应该用什么方式实现网页的制作。

最基本的，图片中的字体，图标的颜色、大小，图标之间的间距，这些都是我们需要从一张UI图片中获取的信息。

我们可以通过选中图片中的文字，通过字符栏看到文字的字体，文字的大小，字间距，行间距等信息，可以通过吸管工具选中图标，从拾色器中看到颜色的六位编码，可以通过标尺工具测量图标的大小，间距等。

以下，列出了四种切图的方式。

1、传统切图

传统切图，即是手动切图，用切片工具框选所需要的图标，保存成web格式的图片。但是这种方式的弊端就是切图比较慢，而且如果图标不是矩形，还会导致切出的图片中带有背景，这并不是我们想要的。另外，如果图标比较多，我们还可以利用参考线来使切图更精准，点击基于参考线切图，还能加快切图的速度。不过这也导致切出很多我们并不需要的图标。所以这种方式并不好。

2、简单切图

简单切图。Photoshop CC版本比CS6版本多了一些功能，比如选中所需图标的图层后，右键可以直接快速导出png格式。如果想把多个图层导出到一张图片上，可以选中多个图层，右键转换为智能对象，再次右键，编辑内容，即可在新打开的窗口中保存为png格式。CS6版本上没有右键快捷导出功能，但是可以用智能对象导出，也很方便。这种方法的优点是不带背景，简单。

3、自动切图

自动切图。选择编辑>首选项>增效工具>启动生成器，然后文件>生成>图像资源，具体可以看我的视频演示。这种方式只需要重命名图层即可生成jpg或png格式的图片，还可以将图片放大。这种切图方式也很方便，切得也很快。

4、脚本切图

脚本切图。选择文件>导出>将图层导出到文件。接下来就等着PS自动运行完成，图片也就切完了。这种方式虽然完全不需要手动去切，但是也会产生很多你不需要的图片。

在实际学习工作中，有些人用的是新建一个页面，将图层复制进去，有些人则是用的传统切图。在切图中，可能会发生某个图片应该用css直接画出来还是用切图来实现的问题。这就需要跟产品进行协商，了解清楚他想实现的效果和要求。有的时候，图片中的效果和制作的网页是有差别的，比如间距，图标的大小等问题。这就需要和UI进行沟通。

三.px、em、rem、%、vw、wh、vm等单位有什么区别？

1.在编写Web网页中，长度单位是非常常用的一个单位。通过设置长度单位对页面的内容进行调整，来达到符合要求或者说看上去舒服的排版效果。传统的单位有：px、%、em，而随着技术的发展，css3增加了一些新的单位rem、vh、vw、vm等，使我们的web页面能适应各种不同的终端显示，现在我们来去看下他们的意义和不同点。

2.1 px

px是Pixel的缩写，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中。

2.2 em

相对长度单位。em是相对于当前对象内文本的字体尺寸而计算的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体(16px)尺寸。也就是1em=16px。

2.3 rem

rem和em很像，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小。而rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，从而统一整个页面的长度。

需要注意的是，我们经常用的谷歌浏览器会强制页面的最小字体为12号，即使设置成 10px 最终都会显示成12px。既然html{font-size：62.5%}办不到，那换个思路，将html{font-size：625%}怎么样。

2.4  百分比%

百分比%就是相对于父元素尺寸来进行计算的，比如定义两个div元素,div1包含div2,设置父div1的width为100px,子div2的width为50%,则实际上计算的结果就是：子div2的宽度是100px*50% = 50px。

1、如果用来设置字体，相对的是父元素的字体大小，大多数浏览器中默认的字体尺寸是100%。

2、如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。

2.5 vw

vw是视窗宽度单位。1vw等于可视区宽度的百分之一。如果浏览器的宽是 500px, 1vw求得的值为 5px 。

2.6 vh

vh是视窗高度单位。1vh等于可视区高度的百分之一。如果浏览器的高是 800px, 1vh 求得的值为 8px 。

2.7 vmax

vmax是相对于视窗的宽度或高度的百分之一，取决于哪个更大。在宽为500px高为800px分辨率的显示器下1vm=8px。

2.8 vmin

vmin是相对于视窗的宽度或高度的百分之一，取决于哪个更小。在宽为500px高为800px分辨率的显示器下1vm=5px。

3.为什么给body的CSS样式设置font-size为62.5%？

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。为了简化font-size的换算，所以需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

作者：wo94nibaba

链接：https://www.jianshu.com/p/d7a00ad813d6

四.如何进行自适应网页设计？

现在人们通过手机浏览网页占了大多数，随着浏览方式的改变，网页实现多终端自适应，无论对于避免工程师无谓的重复劳动或者是项目管理的便捷性上来说重要性都是十分巨大的。 

移动设备越来越多的被人们使用，手机成为访问互联网的最常见终端，而我们设计的网页确是为了呈现在PC端。

手机的屏幕比较小，宽度通常在600像素以下，而PC的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768），有的还达到了2000像素。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果，并不是一件容易的事。

很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页。

1、在HTML头部增加viewport标签。

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。也许允不允许用户缩放不同的网站有不同的要求，但让viewport的宽度等于设备的宽度，这个应该是大家都想要的效果，如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。

meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类，其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。

要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度，所以我们只需要把width设为width-device这个特殊的值就行了。

2、不使用绝对宽度

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

3、流动布局

流动布局（fluid grid） "流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的。

.main {float: right;width: 70%; }

.leftBar {float: left;width: 25%;}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

4、MediaQuery模块

"自适应网页设计"的核心，就是CSS3引入的MediaQuery模块。 它的意思就是，自动探测屏幕宽度，然后加载相应的CSS文件。

link rel="stylesheet" type="text/css"media="screen and (max-device-width:400px)"href="a.css"

上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载a.css文件。

link rel="stylesheet" type="text/css"media="screen and (min-width: 400px)and (max-device-width: 600px)"href="b.css"

如果屏幕宽度在400像素到600像素之间，则加载b.css文件。

自适应与响应式的区别

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整网页内容大小。但是无论怎样，他们主体的内容和布局是没有变的。

自适应还是暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内容过于拥挤，响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计，布局和展示的内容可能会有所变动。

响应式布局被大家熟知的一个重要原因就是 twitter 开源了 bootstrap。

相比自适应网站，响应式网站省去了很多的控件，同时也省去了不少建立和维护的功夫。响应式布局就是一种流体，在按百分比缩放时也能相当的流畅。

使用响应式设计，你要记住所以的布局。这当然可能会使过程混乱，并且使设计更加复杂。这就意味着你应该专注于中等分辨率的视图，然后再用media querie调整为更低或更高的分辨率。 所以通常的做法是，在一个新的项目中使用响应式设计，在后期的改造中使用自适应设计。

自适应可用于改造现有的网站使其更好地适应移动端。这使你的设计可控制和开发多个特定的视图。你开发视图的数量完全取决于你，你的公司和全面的预算。然而，它也提供了一定量的控件（例如在内容和布局上），如此你便无须使用响应式设计。但当你设计多种分辨率时你会发现，在改变窗口大小的时候将会“跳出”布局。

自适应网站可以用于设计和开发一个拥有多个自适应视图的网站。所以这种设计通常用于改造网站。

作者：我是一只北极熊啊

链接：https://www.jianshu.com/p/af33f6fdb35e