用jquery通过简单的几行代码可以实现文章图片数字顺序列表，可以用于一些文章排行等。
演示地址：http://wlog.com.cn/code/jquery/numlist/num-list.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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery简单实现图数字顺序图片列表</title>
<script src="http://wlog.com.cn/lib/jquery/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$("#numList").find("li").each(function(i){
$(this).addClass("num"+(i+1));
//css 中样式从.num1 开始，所以用i+1
});
})
-->
</script>
<style type="text/css">
ul,li {margin:0px; padding:0px;}
li {line-height:25px;}
.num1,.num2,.num3,.num4,.num5,.num6,.num7,.num8,.num9 {
text-indent:24px;
background:url(http://wlog.com.cn/code/jquery/numlist/images/num.gif) no-repeat;
border-bottom:1px #C3C3C3 solid;
overflow:hidden;
}
.num1 {background-position:0px -3px; }
.num2 {background-position:-2px -40px;}
.num3 {background-position:-4px -75px;}
.num4 {background-position:-6px -110px;}
.num5 {background-position:-6px -145px;}
.num6 {background-position:-6px -180px;}
.num7 {background-position:-6px -215px;}
.num8 {background-position:-6px -250px;}
.num9 {background-position:-6px -285px;}
</style>
</head>
<body>
<ul id="numList">
<li>韩国新秀金新雅资料</li>
<li>我的11款春夏发型真人秀</li>
<li>祛斑收毛孔 7个经济小偏方</li>
<li>林志玲四款盐美容秘</li>
<li>诀 范冰冰章子怡示范上妆9禁</li>
<li>忌 平民美女 4种超省钱养颜</li>
<li>法 中国式妖娆 吕燕经典照 </li>
</ul>
</body>
</html>
我们有时候希望回车键敲在文本框（input element）里来提交表单（form），但有时候又不希望如此。比如搜索行为，希望输入完关键词之后直接按回车键立即提交表单，而有些复杂表单，可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。
要控制这些行为，不需要借助JS，浏览器已经帮我们做了这些处理，这里总结几条规则：
1、如果表单里有一个type=”submit”的按钮，回车键生效。
2、如果表单里只有一个type=”text”的input，不管按钮是什么type，回车键生效。
3、如果按钮不是用input，而是用button，并且没有加type，IE下默认为type=button，FF默认为type=submit。
4、其他表单元素如textarea、select不影响，radio checkbox不影响触发规则，但本身在FF下会响应回车键，在IE下不响应。
5、type=”image”的input，效果等同于type=”submit”，不知道为什么会设计这样一种type，不推荐使用，应该用CSS添加背景图合适些。
实际应用的时候，要让表单响应回车键很容易，保证表单里有个type=”submit”的按钮就行。而当只有一个文本框又不希望响应回车键怎么办呢？我的方法有点别扭，就是再写一个无意义的文本框，隐藏起来。根据第3条规则，我们在用button的时候，尽量显式声明type以使浏览器表现一致。
1、YHB网页尺
此软件无需安装,直接运行！可以选择尺寸单位为cm（厘米）或者px（像素）
下载地址：yhb-chi
2、FastStone Capture
FastStone Screen Capture (FSCapture) 是一款免费的图像浏览、编辑和抓屏工具，支持包括BMP, JPEG, JPEG 2000, GIF, PNG, PCX, TIFF, WMF, ICO 和TGA在内的所有主流图片格式。
功能强大，除了网页尺还有其它强大功能，如截图，屏幕录制，取色等！
下载地址：FastStone Capture V6.3 Final┊图像浏览、编辑和抓屏的工具┊心海伽蓝汉化版
3、picpick
PicPick是一个免费又好用的屏幕撷取软件，它可以抓取全屏幕或是局部的画面，而且操作也很简单，还具备了一般最常用到的基本图像处理功能。
下载地址：PicPick V1.8.0.5┊抓取全屏幕或局部的画面而且操作简单┊多国语言绿色免费版
官方地址：http://picpick.wiziple.net/
4、Firefox中有MeasureIt这个插件也很好用(荐)
安装MeasureIt之后，Firefox左下角会出现一个标尺的图标。点击一下，就可以在页面上选择一个选区，然后会以像素为单位把尺寸显示在边上.
另外还有一些便于调整选区的操作：
* Ctrl+方向键：将选区移动1个像素
* Ctrl+Shift+方向键：将选区移动5个像素
https://addons.mozilla.org/zh-CN/firefox/addon/539
5、飞鱼网页尺
下载地址：飞鱼网页尺 V1.6 绿色版
6、QQ截图 Ctrl＋alt＋A 直接截图(荐)
PHPWind精英站长沙龙3月21日下午13：00南京市水游城横店影视城举行。本次沙龙www.phpwind.net 主办，来自全国各地的100多位站长和互联网企业代表参加了本次沙龙活动。虽然会前大雨滂沱，但是大家热情不减，会场爆满，气氛热烈！直接上图
沙龙聚会宣传logo墙
基本原理：
没有什么技术含量，主要是利用背景色和边框色来渲染每一个像素点，加上绝对定位，就可以变换出不同的风格。在制作一幅图片之前最好是将图片黑白风格化，然后用PS放大图片，将各个点的位置计算精确。剩下的事情就是无穷的耐心和细心了。
CSS图片垂直居中方法整理集合
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
* {margin:0;padding:0}
div {
width:500px;
height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
display:table-cell;
text-align:center;
vertical-align:middle
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif" /></p></div>
</pre class="html">
<strong>标准浏览器下另类方法:</strong>
<pre class="html">
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
<!--
body {
margin:0;padding:0
}
div {
width:500px;
height:500px;
line-height:500px;
border:1px solid #ccc;
overflow:hidden;
position:relative;
text-align:center;
margin:auto
}
div p {
position:static;
+position:absolute;
top:50%
}
img {
position:static;
+position:relative;
top:-50%;left:-50%;
width:276px;
height:110px;
vertical-align:middle
}
p:after {
content:".";font-size:1px;
visibility:hidden
}
-->
</style>
<div><p><img src="http://www.google.com/intl/en/images/logo.gif"/></p></div>