今天在开发过程中遇到一个问题，如下：
我的输入框的背景比较暗导致鼠标的指针（系统默认为黑色）停留在那也看不清楚。
上网查了一下，全是关于修改鼠标指针样式的，而没有颜色的教程。
那么，我在这里先简单地记一下修改样式的方法吧：
如果要自定义指针的图形的话，你可以导入自己的图片，方法就是：
cursor: url(“小图片地址”)
好了，即使我该了样式，但是我发现光标停在输入框中闪烁的那个颜色还是黑色，本来想着放弃的，但是当我修改输入框文字的颜色的时候发现光标的颜色也跟着边了，真是峰回路转啊！原来这个停留在输入框的光标颜色是和输入框文本颜色一致的，也就是可以通过设置color属性同时给文字、停留的光标设置颜色。
color:white;
搞定！
WebStorm是一个捷克公司开发的，功能虽然很强大，但UI貌似一直不是东欧人的强项。WebStorm默认的编辑器颜色搭配不算讲究，我看习惯了VS2012的Dark Theme，再看这个顿觉由奢入俭难，非得改改颜色才行。
新建Scheme + 修改字体 ctrl+alt+s打开Settings界面，Editor > Colors&Fonts > Font。
Default scheme是亮色调，但我想定制一套暗背景的环境，所以在右侧Scheme name下拉框中选择Monokai，以此作为修改的基础，然后点击Save as，给自己新建的Scheme起个名字吧，如下图：
这里面可以设置字体（我一般选择Consolas），字体大小，行间距。
自定义语法高亮 用ctrl+alt+s打开Settings界面，Editor > Colors&Fonts。
不同语言有各自的语法高亮规则，但有一部分是通用的（General），我们首先来设置General，然后再根据需要设置不同语言的语法高亮。
General的设置
普通文本：default text
折叠文本: Folded text
光标: Caret
光标所在行: Caret row
行号: Line number
TODO: TODO default
光标下变量高亮：Search result
搜索结果：Text search result
匹配的括号：Matched brace
不匹配的括号：Unmatched brace
未使用的符号：Unused symbol
左边空隙（行号，断点）：Gutter background
选中的文本背景色：Selection background
选中的文本前景色：Selection foreground
区分语言的设置
举例来说，如果要更改Javascript的语法高亮，就在上图中选择Javascript，然后再进行详细设置。具体设置项就不赘述了。
显示行号 + 自动换行 如果用Vim编程，行号是非常必要的辅助。WebStorm默认是不显示行号的，没关系，显示行号非常的容易。
只要在代码左侧的gutter区域点右键，就会出现下图的菜单：勾选上Show Line Numbers即可。
另外，勾选上图中的Use Soft Wraps就启用了WebStorm的自动换行的功能，即过长的代码行不会超出屏幕，不会出现横向的滚动条。
值得一提的是，标准的Vim，jk是移到上一行下一行，如果代码自动换行了，被分割成的两行虽然看起来是两行，但其实是一个逻辑行，这时候用jk是上移下移一个逻辑行。这种情况下，如果要从同一逻辑行的“第一行”移动到“第二行”，需要按gj，即先按g再按方向。虽然Vim提供了这个方法，但还是经常按错。
好消息是，启用了Use Soft Wraps的WebStorm不需要这样，直接按j就可以从同一逻辑行的“第一行”移动到“第二行”。
Material Design 实现之主题使用Theme Material Design 是Google在Android L推出来的一套新的设计规范， 有着鲜明的色彩，极致的用户体验，酷炫的动画。
本系例将带给大家一套完整的Material实现方案。 预计本系例将覆盖以下几个主题：
1.MaterialDesign主题的使用 2.Toolbar的应用，及其菜单动画 3.属性动画的基本介绍（基础) 4.Transition场景动画 5.Activity的切换动画 6.reveal动画 7.触动反馈之Ripple的使用 8.触动反馈之响应动画 9.阴影介绍与CardView 10.RecycleView的使用 11.RecycleView的特效 12.AndroidL风格的下拉刷新 这是本系例的第一篇，主题的使用。
原生主题的使用 在Android 5.0中，新引入了以Material为关键字的主题。
@android:style/Theme.Material @android:style/Theme.Material.Light @android:style/Theme.Material.Light.DarkActionBar 使用方式都是在styles.xml的定义中，
但注意，这个定义不能放在values中，只能放在values-v21中。因为低版本的机型不识别这个主题。
因此，为了兼容低于androidL的机型，通常的做法，需要在values中，添加一个中间主题CustomCompactTheme。
对于values-21(高于5.0的版本), CustomCompactTheme可继承android.Theme.Material,
对于values(低于5.0的版本)，CustomCompactTheme可继承Holo。
完整代码如下： values-v21/styles.xml
values/styles.xml
兼容低版本主题的使用 幸运的是在android-support-v7包（21版以上）已经为我们实现了兼容方案，只要引入相关的主题即可。
加入v7包，在gradle.build文件的dependencies节点中加入
compile 'com.android.support:appcompat-v7:23.0.0' 则styles.xml可以精简为
主题的配色 在theme中，我们可以为系统界面自定义一些配色，见下图。
这些配色，可以在主题中进行设置如
#675634 #993309 #7767ff #ffff33 #44ef54 效果图：
同样，在代码设置如下方式
getWindow().setStatusBarColor(0xff873434); getWindow().setNavigationBarColor(0xff345644); 效果图
ThemeOverlay 通常情况下，主题只能应用到全局，粒度最低只能到Activity这一层次， 那如果说只想把界面中的某一个布局使用主题，怎么办？这在以前是行不通的，但现在新引入Overlay系列主题就能使用到某一个ViewGroup上面，如：
这样LinearLayout所有的子元素都将继承ThemeOverlay.AppCompat.Dark的风格。
使用预定义的数值 为了与保持整个应用程序的统一，有时我们需要使用系统预定义的值，比如不同的主题下，ActionBar的高度或不一样，则为了兼容各种主题，则我们在代码中不需要把高度写死，应该使用引用的方式的设置高度，如
如上所示，同样的，在必要的时候，我们也需要引用主题的颜色，这样当换一个主题的时候，UI的颜色就随着变改，增强代码的灵活性。
源码下载： https://github.com/mutsinghua/androidLClass
http://stackoverflow.com/a/25609679
HTML5 Web Components offer full encapsulation of CSS styles.
This means that:
styles defined within a component cannot leak out and effect the rest of the page styles defined at the page level do not modify the component’s own styles However sometimes you want to have page-level rules to manipulate the presentation of component elements defined within their shadow DOM. In order to do this, you add /deep/ to the CSS selector.
写了一个form.html:
Insert title here
Beer selection Page
action=”Beerselect.do”>
Select beer characteristics
Color:
light
amber
brown
dark
一个servlet Beerselect.java:
package com.example.web;
import java.io.*;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Beerselect
*/
@WebServlet(“/Beerselect.do”)
public class Beerselect extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public Beerselect() {
super();
// TODO Auto-generated constructor stub
商域无疆 (http://blog.csdn.net/omni360/)
本文遵循“署名-非商业用途-保持一致”创作公用协议
转载请保留此句：商域无疆 – 本博客专注于 敏捷开发及移动和物联设备研究：数据可视化、GOLANG、Html5、WEBGL、THREE.JS，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。
俺也是刚开始学,好多地儿肯定不对还请见谅.
以下代码是THREE.JS 源码文件中materials/MeshDepthMaterial.js文件的注释.
更多更新在 : https://github.com/omni360/three.js.sourcecode
/** * @author mrdoob / http://mrdoob.com/ * @author alteredq / http://alteredqualia.com/ * * parameters = { * opacity: , * * blending: THREE.NormalBlending, * depthTest: , * depthWrite: , * * wireframe: , * wireframeLinewidth: * } */ /* ///MeshDepthMaterial方法根据参数parameters创建基于相机远近裁切面自动变换亮度(明暗度)的mesh(网格)的材质类型,离相机越近,材质越亮(白),离相机越远,材质越暗(黑). ///parameters参数的格式看上面.MeshDepthMaterial对象的功能函数采用,定义构造的函数原型对象来实现.大部分属性方法继承自材质的基类Material. */ ///MeshDepthMaterial ///string类型的JSON格式材质属性参数 ///返回MeshDepthMaterial,网格深度材质. THREE.MeshDepthMaterial = function ( parameters ) { THREE.Material.call( this ); //调用Material对象的call方法,将原本属于Material的方法交给当前对象MeshDepthMaterial来使用. this.
相信大家也会发现这个现象，在浏览网页时，看到你们嵌入的广告正时自己感兴趣的产品。我最近调查了一下，这其中还是有猫腻的。
其中我们需要了解两个概念：cookie和网络臭虫。cookie相信大家都了解，就不多说了。下面看看我在wiki上看到的对网络臭虫的解释
”网络信标（web beacon），又称网页臭虫（web bug），是可以暗藏在任何网页元素或邮件内的1像素大小的透明GIF或PNG图片，常用来收集目标电脑用户的上网习惯等数据，并将这些数据写入Cookie。网络信标在邮件跟踪和垃圾邮件中较为常用。网络臭虫（Web bug）也称为网络信标（Web beacon）是一个放在网页或电子邮件上的文件对象，用于监测用户的行为。 不像Cookie可以被浏览器用户接受或拒绝，网络臭虫只是以图形交换格式（GIF）或其他文件对象的形式出现。 它通常只能被检测，如果用户查看网页的源版本会发现一个从不同的Web服务器而不是从网页的其他部分负载的标签。“
接着上面的解释往下说，在访问那个图片时，http请求会携带cookie发往这个图片所在服务器，也就是臭虫服务器。这个过程可以被利用来统计宿主网页有没有被访问，垃圾邮件中经常这样用来看随机生成的地址发出去有没有被人点开从而确认该邮件地址是否真存在。还有一种就是臭虫服务器是一经常被人用到的网站，比如百度。每次你每次输入并搜索时，你的输入会被存为百度的cookie。然后百度和第三方的网页勾搭，百度说我给你一段js文件链接你放到你的网页中去，当然这个js是在百度服务器上的，等用户访问你的网页时，就会发请求到百度的服务器上，同时会带上百度以前存在客户本地的cookie，这样这段js就拿到了百度的cookie并且在当前页面上插入对应的广告链接。这就是为什么在一些网站上能看到你在百度啊或者电商哪里搜索的关键字对应的广告了。甚至我想，百度和电商之间也可以做类似的交易，电商从百度拿到cookie后可以在用户首页上直接显示用户可能感兴趣的商品。看来这个臭虫很有商业价值的，不过它的合法性存在争议，也在315时被央视曝光过。
一直以来，各大论坛和邮箱都允许使用外链图片。一方面解决了上传和保存带来的资源消耗，更重要的是方便用户转载图片。
然而，简单的背后是否暗藏着什么风险呢？大多或许认为，不就是插入了一张外部图片而已，又不是什么脚本或插件，能有多大的安全隐患。
曾经也有过外链图片泄漏cookie那样的重大隐患，不过那都是很久以前的事了。在如今浏览器日新月异的年代里，这样的bug已经很难遇到了。不过利用正常的游戏规则，我们仍能玩出一些安全上的小花招。
No.1 —— HTTP401 （严重程度：低）
大家都见过，打开路由器的时候会弹出个登录框。
如果了解HTTP协议的话，这是服务器返回401，要求用户名密码认证。
不过，如果是一个图片的请求，返回401又会怎样呢？很简单，我们就用路由器的URL测试下：
居然依旧跳出了一个对话框！
如果将一个HTTP401的图片插入到论坛里，是不是也会如此呢？我们用ASP写个简单的脚本，并且能自定义提示文字：
<% Response.Status = "401" Response.AddHeader "WWW-Authenticate", "Basic realm=IP IC IQ卡，统统告诉我密码！" %> 然后将URL插入到论坛或空间（如果拒绝.asp结尾的url图片，那就在后面加上个?.png）。
先在QQ空间里测试下：
不出所料，弹出了对话框。不过在ie外的浏览器下，汉字成了乱码，即使设置了ASP以及HTTP的编码也不管用。
我们只好换成英文字符，再百度贴吧里用各种浏览器测试下：
ie678:
ie9: firefox:
safari: 除了Opera和Chrome没有弹出来，其他的浏览器都出现。不过部分浏览器截断了空格后的字符。
当然，你也可以扩展这个功能，记录用户输入了什么内容。尤其是带上些官方式的文字提示，很容易用来捕捉到一些账号信息。曾经用这招在论坛抓到不少可用的账号密码，不过如今安全意识普遍提高，加上一些安全软件的拦截，这招实用性大打折扣了。
因为是强制弹出的，往往给人一惊，所以在论坛，贴吧或空间里，倒是可以娱乐娱乐。
No.2 ———— GZip压缩zha弹 （ 严重程序：中）
在之前的一篇文章里，谈到使用两次deflate压缩，将数百兆的图片文件压缩到几百字节。
http://www.cnblogs.com/index-html/archive/2012/06/22/2558469.html
原理很简单，大量重复数据有很高的压缩率。之前不清楚的deflate算法的最大压缩率有多少，一直不敢确定是不是最优的。后来大致了解了下算 法，由于受到lz77算法的最大匹配长度限制，deflate的最大压缩率确实只有1:1000多点。虽然和rar相比相差甚远，不过1000倍也意味 着，1M的数据可以翻到1G了。
所以我们可以利用一个超高的压缩的HTTP报文，做几件事：
1.消耗内存
2.消耗CPU
3.消耗缓存
对于现在的硬件配置，内存已经足够支撑浏览器，多核的CPU也没法完全耗尽，唯独硬盘是个瓶颈。
我们用C程序创建个1G的内存数组，将图片数据放在其首，后面用’\0’填充。然后使用zlib进行压缩，得到1M左右的结果，保存为x.jpg.gz
接着用ASP读取压缩文件，并给返回的头部加上Content-Encoding字段。
简单的测试下：
Dim stream Set stream = Server.CreateObject("ADODB.Stream") With stream .Type = 1 .Open .LoadFromFile _ Server.MapPath(Request.QueryString("File") & ".gz") End With Dim agent agent = Request.
网络臭虫又叫 网络信标（Web beacon）, 是可以暗藏在任何
网页
元素或
邮件
内的1
像素
大小的透明
GIF
或
PNG
图片
可以理解为 网络臭虫的目的是把用户的信息上传到服务端 邮件跟踪和垃圾邮件 垃圾邮件的发送者，随机生成邮件的接受者的地址，并在邮件中埋入一个网络臭虫，网络臭虫可以是一个一像素的图片比如： 这样当有真实用户打开邮件时，会装载图片，但实际是调用这个请求到服务器端（因为像素小，看不到界面）。这样服务器端就可以根据参数部分确定这个收件人是有效的邮件，而记录这个收件人，后续就可以专门针对他发送垃圾邮件了。 这里之所以用是应为网站只要装入网页就会从服务器中获取图片信息，使用这种机制的一个抓住的漏洞是，有些论坛可以发送带html格式的内容作为跟帖，这样恶意者可以发送的跟帖子中植入一个网络臭虫，这样第三方浏览人员打开帖子并查看跟帖时将会激发网络臭虫的调用，而把浏览器的信息等一些数据传送到网络臭虫所指定的网址上去。 网络臭虫可以收集到的信息如下（HTTP请求头中的信息）： 1。第三方浏览者的IP地址， 2。第三方浏览者的浏览器类型 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:21.0) Gecko/20100101 Firefox/21.0 3。
网络臭虫所在网页的网址，也就是当前浏览的页面 Referer: http://www.baidu.com/ 4.
网络臭虫被访问的时间，服务器算出 5.臭虫服务器原来保存在本地的cookie信息，在请求时会根据臭虫网址的url地址获取保存在本地的cookie信息。 6.在臭虫网址响应时还可以写入cookie到本地，这个cookie信息可以根据请求的信息来生成唯一一个标识客户端的数据，这样下次客户端再次通过别的网址访问臭虫网址时（当然另外一个网站也是植入了这个臭虫网址的）就可以上传以前访问过的信息的。 以百度广告联盟为例子， 当你在百度中搜索信息时，百度会记录你的搜索信息，同时会在你本地保存一个标识本地的cookie, 而当你打开第三方网站时，第三方网站嵌入了百度广告的JS代码，里面有请求百度广告的请求，而发这个请求时会把原来保存在本地的cookie上传给百度，而百度在服务器根据你的机器标识和你曾经的搜索来推送不同的广告给你。
一些漂亮的HTML5和CSS3下拉菜单列表。这些例子可以帮助你得到灵感。让我们一起来看看这些下拉菜单。 Dark Menu: Pure CSS3 Two Level Menu Pure CSS3 LavaLamp Menu HTML5/CSS3 Gray Navigation Menu How to Build and Enhance a 3-Level Navigation Menu CSS3 Minimalistic Navigation Menu Slide Down Box Menu with jQuery and CSS3 Create a stunning menu in CSS3 Elegant Dark CSS3 Menu Template Musical drop down menu Creating CSS3 Dropdown Menu CSS3 vertical multicolor 3D menu Creating an Accordian like CSS3 Onclick Vertical Navigation Creative CSS3 Animation Menus Mega menu with HTML5 and CSS3 Making a CSS3 Animated Menu Creating a cool CSS3 Dropdown Menu CSS3 Dropdown Menu Click action Multi-level CSS3 Dropdown Menu Creating a CSS3 Dropdown Menu Office Style CSS3 Multilevel Menu Creating a Marble Style CSS3 Navigation Menu Creating a Toggle CSS3 Bottom Navigation Bar jQuery style menu with CSS3 How to Create a Drop-down Nav Menu With HTML5, CSS3 and JQuery CSS3 navigation menu inspired HTML5 Canvas Navigation menu with Fire Collection of menu effects Another simple yet amazing dropdown menu in pure CSS3 Fanciest Dropdown Menu You Ever Saw jQuery & CSS Example – Dropdown Menu