WebStorm记录(2)

继续效果图

CSS初始化

前面理解错了，背景图应该铺满

<div class="bg">

html,body,*{
    /*盒子模型使用边框模式*/
    box-sizing: border-box;
    /*初始化外边距*/
    margin: 0;
    /*初始化内边距*/
    padding: 0;
}
.bg{
    background: url("../images/bg.png");
    /*规定背景图像的尺寸：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/
    background-size: cover;
    /*规定元素的定位类型：生成绝对定位的元素，相对于浏览器窗口进行定位。*/
    position: fixed;
    /*设置元素的宽度：定义基于包含块（父元素）宽度的百分比宽度*/
    width: 100%;
    /*设置元素的高度：定义基于包含块（父元素）宽度的百分比宽度*/
    height: 100%;
}

切图

从.psd的格式文件的效果图里，导出出.png图片

本人使用的Photoshop版本是：Adobe Photoshop CC 2017 v18.1.1.252 精简安装版

行内显示

CSS display 属性

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）

广告屏蔽就是设为none

block，inline和inline-block概念和区别

display:block

1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
3. block元素可以设置margin和padding属性。

display:inline

1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
2. inline元素设置width,height属性无效。
3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

display:inline-block

1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
2. 比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

总结一下：block独占一行，inline是行内不能设置宽高，inline-block是行内可以设置宽高

颜色拾取

CSS 颜色

颜色值：CSS中定义颜色使用十六进制（hex）表示法为红，绿，蓝的颜色值结合。可以是最低值是0（十六进制00）到最高值是255（十六进制FF）
3个双位数字的十六进制值写法，以＃符号开始。
比如：红色
red

FF0000

rgb(255,0,0)

浏览器的颜色拾取工具

PS的颜色拾取

常用颜色的RGB值

ajax请求

获取验证码，有现成的接口

请求方式：POST
请求URL：/captcha
HTTP响应消息内容

{
    "status": int,
    "msg": string,
    "data": {
        "pic": string, //base64格式图片
        "captchaEncrypt": string //验证码密钥
    }
}

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

读音：“阿贾克斯” （Ajax）和阿贾克斯足球队同音。

使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

Ajax 这个词由《Ajax: A New Approach to Web Applications》一文所创，该文的迅速传播加强了人们使用该项技术的意识。

进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。如果不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到厌烦。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

请求是个JSON对象，返回也是个JSON对象

var o= $.ajax({
    url: u + "/captcha",
    async: false
});

修改img的src属性

更换图片

Jquery获取和修改img的src值的方法

获取：

$("#imgId")[0].src;             // 第一种
$("#imgId").attr('src');   // 第二种

修改：

$("#imgId").attr('src',path);   

语法：attr(name|pro|key,val|fn)

base64格式图片，src的值为base64表示的图片信息

Base64是一种用64个字符来表示任意二进制数据的方法。

用记事本打开exe、jpg、pdf这些文件时，我们都会看到一大堆乱码，因为二进制文件包含很多无法显示和打印的字符，所以，如果要让记事本这样的文本处理软件能处理二进制数据，就需要一个二进制到字符串的转换方法。Base64是一种最常见的二进制编码方法。

Base64的原理很简单，首先，准备一个包含64个字符的数组：

['A', 'B', 'C', ... 'a', 'b', 'c', ... '0', '1', ... '+', '/']