- 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应用。我们的应用将会满足
