[CSS] Make element not selectable

.noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-se…

CSS pseudo element All In One

CSS pseudo element All In One CSS 伪元素 https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements https://www.w3.org/TR/CSS1/ ::before & ::after ::selection & ::slotted() HTML slot ::first-letter & ::first-line & ::file-selector-butto…

css中element element和element>element选择器的区别

就是这样的选择器: 比如html中有这样一段布局: <div> <p>我是一个段落</p> </div> 这时你用div p{background:yellow;}和div>p{background:yellow;}效果一样. 如果是这样一段布局: <div> <span><p>我是一个段落</p></span> </div> 要用div p{....},而div>p{...…

跟随 Web 标准探究DOM -- Node 与 Element 的遍历

写在前面这篇没有什么 WebKit 代码的分析,因为……没啥好分析的,在实现里无非就是树的(先序DFS)遍历而已,囧哈哈哈……在WebCore/dom/Node.h , WebCore/dom/ContainerNode.h 和 WebCore/dom/Element.h 以及对应的 .cpp 里看两眼就行了.下面这些属性一般都作为了私有变量直接放在了对象里(按照命名规范基本都叫m_xxx),然后通过和标准同名的 public 方法返回.不过要注意一下它们放在了哪里,比如Node里和子节点相关…

css 动画类库Animate.css

地址为:http://daneden.github.io/animate.css/ 源码地址为:https://github.com/daneden/animate.css 简单的使用方法: Animate.css Just-add-water CSS animation animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emph…

css笔记13：display用法

1.代码演示: element.html如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h…

关于CSS和JS中用到的各种Height和Width的问题

自己记不住,列一下关于CSS和JS中用到的各类有关Height和Width属性的介绍对比. 所属类别属性名意义其他浏览器模型 Screen.height 浏览器窗口所在的屏幕的高度(单位像素) 1.除非调整显示器的分辨率,否则这个值可以看作常量,不会发生变化. 2.显示器的分辨率与浏览器设置无关,缩放网页并不会改变分辨率. Screen.width 浏览器窗口所在的屏幕的宽度(单位像素) Screen.availHeight 浏览器窗口可用的屏幕高度(单位像素) 因为部分空间可能不可用,…

Element节点

Element节点对象对应网页的 HTML 元素.每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点).元素节点的nodeType属性都是1.Element对象继承了Node接口,因此Node的属性和方法在Element对象都存在.并且元素节点不是一种对象,而是一组对象,这些对象除了继承Element的属性和方法,还有各自构造函数的属性和方法. 实例属性元素特性的相关属性 Element.id 返回元素的id属性 Element.tagName 返回…

CSS ::marker All In One

CSS ::marker All In One CSS pseudo element / CSS 伪元素 /* user agent stylesheet */ ::marker { unicode-bidi: isolate; font-variant-numeric: tabular-nums; text-transform: none; text-indent: 0px !important; text-align: start !important; text-align-last: s…

CSS 奇思妙想 | 全兼容的毛玻璃效果

通过本文,你能了解到最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的操作,巧妙的同样实现毛玻璃效果,让这个效果真正能运用在业务当中什么是 backdrop-filter backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移). 因为它适用于元素背后的所有元素,为了看到效果,必须使元素或其背景至少部分透明. backd…

CKEDITOR使用与配置

安装: 下载CKEDITOR的文件,解压后复制到工程的WEBROOT目录下就OK! 引用CKEDITOR的JS文件: 新建JSP页面,添加其JS文件<script type="text/javascript" src="ckeditor/ckeditor.js"></script> 注意:1.src的路径. 2.不要写成<script type="text/javascript" src="ckeditor…

Selenium1 Selenium2 WebDriver

1.Selenium 1 原理 (1).测试用例(Testcase)通过Client Lib的接口向Selenium Server发送Http请求,要求和Selenium Server建立连接. 为什么要通过发送Http请求控制Selenium Server而不采用其他方式呢?从上文可以看出,Selenium Server是一个独立的中间服务器(确切地说是代理服务器),它可以架设在其他机器上!所以测试案例通过发送HTTP请求去控制Selenium Server是很正常的. (2).Seleniu…

Web javascript 中常用API合集

来源于:https://www.kancloud.cn/dennis/tgjavascript/241852 一.节点 1.1 节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径 Node.ownerDoc…

免费图片存储和图话【提供demo下载】

我们不管是做博客系统还是其他网站,图片是免不了要使用到的.但是,我们都知道图片的访问是很耗资源的,同时也是很占磁盘空间的,且还特别占带宽. 所以,我们一般都会用到特定的图片服务器.不过,像我等屌丝平时闹着玩肯定是不会花钱整那些东西.今天我就来介绍一个高速免费无限量图片存储支持外链.是的,你没听错.就是无限量免费.它的名字:贴图库,可能有同学知道并且使用过了.那你可以略过了. 介绍完贴图库后,我在向大家介绍下.我的图话实现.图话是什么?就是我们经常看到的弹幕,只不过现在到了图片上面了.演示地址.…

MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

返回目录说在前有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都在它的源码里,只要你踏下心去看,一切就都有了! Knockout.Validation.js是为Knockout插件服务的,它可以为Knockout对象进行验证,就像你使用MVC模型验证一样,而这种绑定的验证方式对于开发人员来说是很容易接受的,也是一种趋势,它在验证过程中,会将出现异常的点记录下来,…

angular源码分析：angular中jqLite的实现——你可以丢掉jQuery了

一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 return element; } var argIsString; if (isString(element)) { //情况2 element = trim(element); //先去掉两头的空格.制表等字符 argIsString = true; } if (!(this instanceof…

JavaScript滚动条插件源码

这是过年的时候自己写的js滚动条插件的源码,做出的效果自己并不满意,正因为做的并不满意所以回头重新巩固和深入学习js,这个插件有如下几个不太满意的地方: 内容的过度效果,可以参阅QQ客户端最近会话列表里的滚动条,它的滚动非常的平滑,简单的说就是缺少动画过渡效果. 并不算完美的兼容性,在IE6.7下的style仍然有点缺憾. 样式的不完美,例如鼠标悬浮才显示滚动条,移除后隐藏这种效果都没有写. 内部结构的混乱,需要调整内容结构. 滚动条那个图片毕竟不是美工,自己切图切的真是恶心到爆了...囧总体…

chrome编辑DOM

来源于:https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom The DOM tree view in the Chrome DevTools Elements panel displays the DOM structure of the current web page. Live-edit the content and structure of your page through D…

jqueryui / accordion的用法记录

jqueryui 的 widget 中包含了基本上我们都需要的ui组件, 除了那个unslider. 参考地址是: www.jqueryui.com. 要能够看懂/并使用/ 完全掌握的话, 就要使用其中的 api 关于选项的格式和思想都是: 用json 的方式{key: value}, jquery/js中都有清晰的数据类型的, 如boolean类型的 false/true, 字符串类型的就要用引号. 而且要能够使用原生的js 和 jquery 联合编程. 配色方案: 经典/常用的: 主色调:…

javaScript基础练习题-下拉框制作(神奇的代码)

http://www.oschina.net/code/snippet_12_46548#66319 http://www.codeproject.com/Tips/890021/Advanced-CSS-styling-of-HTML-SELECT-Element http://uplifted.net/programming/change-default-select-dropdown-style-just-css/ 在研究一下…

js一些问题总结

1.undefined与null与NAN的区别 undefined表示未申明,null表示申明了没定义为空值,NAN表示不是数据类型.…

又一个提示框思密达，腾讯UED

demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style> body{ margin: 0; padding: 0; } </style> <link rel="stylesheet" href="css/jq…

ie使用firebug

在网页插入以下代码即可. <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script> https://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js var firebug={version:[1.231,…

CSS3 动画效果合集

@charset "UTF-8"; /*! * animate.css -http://daneden.me/animate * Version - 3.5.1 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2016 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-du…

《锋利的Jquery第二版》读书笔记第三章

DOM操作的分类 1.DOM Core不专属JavaScript,任何一种支持DOM的程序设计语言都可以使用它,也可以处理XML等标记语言编写出来的文档,getElementById().setAttribute()等都是DOM Core的组成部分 2.HTML-DOM专属web文档,document.forms 3.CSS-DOM针对CSS操作element.style.color="red" jQuery属性操作方法(与w3school网站结合学习) addClass()向匹配的元…

AppiumLibrary

Strategy Example Description identifier Click Element|identifier=my_element Matches by @id or @name attribute id Click Element|id=my_element Matches by @id attribute name Click Element|name=my_element Matches by @name attribute xpath Click Element|xp…

汇总前端最最常用的JS代码片段

html5选择器 //参数均接收一个合法的css选择器 element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素 elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的nodeList集合鼠标滚轮事件 $('#showPic').on("mousewheel DOMMouseScroll", function (e) { ? : -))…

Robot Framework selenium2library 常用关键字

Selenium Library SeleniumLibrary is a Robot Framework test library that uses the popular Selenium web testing tool internally. It provides a powerful combination of simple test data syntax and support for different browsers. In addition to standard w…

W3C词汇和术语表

以A字母开头的词汇英文中文 abstract module 抽象模组 access 访问.存取 access control 存取控制 access control information 存取控制资讯 access mechanism 存取机制 access rights 存取权限 accessibility 无障碍性 accessibility information 无障碍网页资讯 accessibility problem 无障碍网页问题 accessible 无障碍的 access…

Angular源代码学习笔记-原创

时间:2014年12月15日 14:15:10 /** * @license AngularJS v1.3.0-beta.15 * (c) 2010-2014 Google, Inc. http://angularjs.org * License: MIT */ (function(window, document, undefined) {'use strict'; /** * @description * * This object provides a utility for produc…

【[CSS] Make element not selectable】的更多相关文章