- CSS 定位 11-25
- 浅谈css预处理器与 CSS 后处理器 11-25
- CSS border-bottom-color 属性 11-25
- CSS list-style-position 属性 11-25
- CSS background-repeat 属性 11-25
- jQuery之DOM、CSS 11-25
- 玩转CSS 纯CSS正方形自适应9宫格图片布局 11-25
- CSS align-content 属性 11-25
- CSS text-align 属性 11-25
- WebSocket JavaScript CSS教程 11-25
CSS 定位
发布者: superzhang | 发布时间:2017-11-25CSS position 属性总结：
所有主流浏览器都支持 position 属性。position属性规定元素的定位类型，影响元素框生成的方式。
可能的值
值描述absolute生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位，如果不存在这样的父元素，则依据最初的包含快。根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定，也可以通过z-index进行层次分级。（元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。）fixed生成固定／绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。（元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。）relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。（相对定位实际上被看作普通流定位模型的一部分，因浅谈css预处理器与 CSS 后处理器
发布者: superzhang | 发布时间:2017-11-25说到 CSS 预处理器，大家都很熟悉了，本文的重点是介绍从中抽出的 CSS 后处理器，这也是近一年多以来，前端社区的一些新趋势。
将 CSS 后处理器 抽象出来之后，会对 CSS 的 开发模式 带来一些变化，下面从概念开始说起。
CSS 预处理器
广义上说，目标格式为 CSS 的 预处理器 是 CSS 预处理器，但本文 特指 以最终生成 CSS 为目的的 领域特定语言。
Sass、LESS、Stylus 是目前最主流的 CSS 预处理器。
示例
下面以 LESS 为例：
LESS
.opacity(@opacity: 100) {
opacity: @opacity / 100;
filter: ~"alpha(opacity=@{opacity})";
}
.sidebar {
.opacity(50);
}
将以上 DSL 源代码 (LESS)，编译成 CSS：
.sidebar {
opacity: 0.5;
filter: alpha(opacity=50);
}
可以看到，编译前 与 编译后 是完全不同的语言。
实现原
CSS border-bottom-color 属性
发布者: superzhang | 发布时间:2017-11-25实例
设置底部边框颜色：
p{border-style:solid; border-bottom-color:#ff0000;}
标签定义及使用说明
border-bottom-color属性设置元素的底部边框颜色。
注意 使用border-bottom颜色属性前，必须先声明border样式属性。元素必须有边框，你才可以改变颜色。
默认值:not specified继承:no版本:CSS1JavaScript 语法:objectobject.style.borderBottomColor="blue"浏览器支持
表格中的数字表示支
CSS list-style-position 属性
发布者: superzhang | 发布时间:2017-11-25实例
规定列表中列表项目标记的位置：
ul
{
list-style-position:inside;
}
属性定义及使用说明
list-style-position属性指示如何相对于对象的内容绘制列表项标记。
Outside:
Coffee
Tea
Coca-cola
Inside:
Coffee
Tea
Coca-cola
默认值：outside继承：yes版本：CSS1JavaScript 语法：object.style.listStylePosition="inside"标签定义及使用说明
设置如何平铺对象的 background-image 属性。
默认情况下，重复background-image的垂直和水平方向。
默认值:repeat继承:no版本:CSS1JavaScript 语法:objectobject.style.backgroundRepeat="repeat-y"jQuery之DOM、CSS
发布者: superzhang | 发布时间:2017-11-25DOM 是一种文档对象模型。在 JavaScript 中，获取DOM对象不是太方便，写很长一段document.getElementsByTagName('***')等，但在jQuery中获取dom及操作DOM非常方便。
要知道几个基本概念：
1.D 表示的是页面文档 Document、O 表示对象，即一组含有独立特性的数据集合、M表示模型，即页面上的元素节点和文本节点。
2.DOM 有三种形式，标准 DOM、HTML DOM、CSS DOM，大部分都进行了一系列的封装，在 jQuery 中并不需要深刻理解它。
3.树形结构用来表示 DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部分是文本节点操作。
二． 设置元素及内容介绍几个非常常用的方法，text()及html()等。
玩转CSS 纯CSS正方形自适应9宫格图片布局
发布者: superzhang | 发布时间:2017-11-25老规矩先放效果图
iPhone5
iPhone6
note3
代码实现
CSS部分
浏览器支持
表格中的数字表示支持该属性的第一个浏览器的版本号。
紧跟在 -webkit-, -ms- 或 -moz- 后的数字为支持该前缀属性的第一个版本。
属性align-content21.011.028.09.07.0 -webkit-12.1定义和用法
align-content 属性在弹性
CSS text-align 属性
发布者: superzhang | 发布时间:2017-11-25实例
h1, h2, 和 h3元素设置文本的对齐方式：
h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}
属性定义及使用说明
text-align属性指定元素文本的水平对齐方式。
默认值：left if direction is ltr, and right if direction is rtl继承：yes版本：CSS1JavaScript 语法：object.style.textAlign="right"浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
WebSocket JavaScript CSS教程
发布者: superzhang | 发布时间:2017-11-25一、为什么需要 WebSocket？
初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？
答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用“轮询”：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。
轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。
教程目标
本教程的目标是利用VueJS以及Webpack从头创建一个基础但完整的渐进式Web应用。我们的应用将会满足
