8条css技巧

8条css技巧
1、兼容所有浏览器显示半透明效果的方法 <div class="transparent"></div> .transparent { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: .5; width: 200px; height: 200px; margin: 0 auto; background: url("../img/pic.jpg"); } 2、_height,_width的作用 使用_height解决float的div不闭合的问题,可以将_...

纯 CSS 实现多行文字截断

纯 CSS 实现多行文字截断
做响应式系统设计的时候遇到需要对标题进行多行文字截取的效果 看似十分简单的标题截断效果,但是竟然没有一个统一 CSS 属性实现标准,需要用到一些奇淫妙计来实现,一般来说,在做这样文字截断效果时我们更多是希望: 兼容性好,对各大主流浏览器有好的支持 响应式截断,根据不同宽度做出调整 文本超出范围才显示省略号,否则不显示省略号 省略号位置显示刚好 基于上述的准则,下面我就讲介绍...

websocket与http的区别与联系

websocket与http的区别与联系
一、websocket与http WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算) 首先HTTP有 1.1 和 1.0 之说,也就是所谓的 keep-alive ,把多个HTTP请求合并为一个,但是 Websocket 其实是一个新协议,跟HTTP协议基本没有关系,只是为了兼容现有浏览器的握手规范而已,也就是说...

常见 HTTP/FTP/WebSocket 错误代码大全

常见 HTTP/FTP/WebSocket 错误代码大全
HTTP 1xx消息 这一类型的状态码,代表请求已被接受,需要继续处理。这类响应是临时响应,只包含状态行和某些可选的响应头信息,并以空行结束。由于HTTP/1.0协议中没有定义任何1xx状态码,所以除非在某些试验条件下,服务器禁止向此类客户端发送1xx响应。 这些状态码代表的响应都是信息性的,标示客户应该采取的其他行动。 100 - 客户端应当继续发送请求 101 - 切换协议 1...

DOM事件流的三个阶段

DOM事件流的三个阶段
流 流的概念,在现今的JavaScript中随处可见。比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流。都是流的一种生动体现。 至于流的具体概念,我们采用下文的解释: 用术语说流是对输入输出设备的抽象。以程序的角度说,流是具有方向的数据。 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题。那就是页面中的哪一部分拥有特定的事件? ...

如何通过js获取隐藏元素的高度

如何通过js获取隐藏元素的高度
当一个元素的样式被设置了display: none时,它的高度相关属性值为 0。 这是因为修改display属性会触发元素的重排和重绘,而元素重排时将会重新计算它的一些属性值。被设置display: none的元素不占用文档空间,自然计算到的高度值为 0。 隐藏元素的方式 “隐藏”元素的方式有多种,除了设置display: none以外,还有visibility: hidden、opacity: 0、height: 0; overflow: hidden、transform...

div垂直居中的N种方法

div垂直居中的N种方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生 效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的...

不定宽高垂直居中分析

不定宽高垂直居中分析
昨天做移动项目是,遇到这样一个案例,如图,图片容器随着视口宽度进行自由拉伸扩张,图片不定宽高,垂直居中: 当时做这个布局的时候,我一直想到用display:table-cell通过vertical-align:middle,来实现居中,可以当我在同一个节点用position:absolute,会导致此居中问题失效。 最后想到的解决方案,案例如下,不定宽高垂直居中: <!DOCTYPE HTML> <html lang="en-US"...

vue.js基础指令列举及总结

vue.js基础指令列举及总结
1.v-bind 绑定dom元素属性 <div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date() } }) 2.v-if 条件 如果后面的值是true则显示。 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / ...

5ucms调用标签使用范例

5ucms调用标签使用范例
固定大类下所有子类内容(不包含子栏目名),如ID=4时 <!--channel:{ $table=channel $Where=id=4 }--> <!--List:{ $Row=10 $cid=[channel:childids] $Type=Images $Order=[ID] Desc }--> <a href="[list:aurl]" target="_blank"><img width="158" height="157" src="[List:indexpic $width=158 $height=157]" alt="[List:titlex]" /></a><br /&...
Copyright © 前端技术分享休闲玩耍去处分享-大一网 保留所有权利.   Theme  Ality

用户登录 ⁄ 注册

分享到: