作者：孔维聪 发布时间：April 21, 2012 分类：前端开发
Windows8革命性地改变了自己沿用数十年的操作系统习惯，同时IE10网页浏览器也出现了极大的用户体验变动，浏览器将支持触控式屏幕。因此，网站可能会需要作出一些小的调整，以确保他们可以与IE浏览器10的触摸功能兼容。IE官方博客今天刊载了雅各布·罗西撰写的四个小提示，帮助网页设计是尽快熟悉IE10。
1.鼠标悬停状态下不要安排点击动作
由于触控设备无法正确识别动作悬停，因此如果在悬停状态下实现点击，那么用户将无法正常控制网页元素。
2.可安排Windows 8 Metro的触控手势
包括滑动、扭动双击在内的手势将在IE10默认被支持，如果网站有需要可以调用。
3.留足屏幕键盘的空间
如果网站需要输入文字的，则设计者需要在触控屏中留足屏幕键盘的空间。
4.留足手指的空间
一个手指的平均宽度为11毫米，IE10兼容网站必须让手指操控也有良好体验，这个尺寸大约是40像素点，至少也要有10个px。
作者：孔维聪 发布时间：January 9, 2012 分类：前端开发
前段时间在不知道什么名字的国外站点看到的风格,比较清新,自己写了下做成tp的皮了
这一款比较窄,还有一些固定链接或者文字需要手动修改,现在打包出来,不做别的说明,这款是窄版,稍后可能会有一款宽版的
作者：孔维聪 发布时间：December 9, 2011 分类：前端开发
首先加载jquery（如果你的博客已经加载了，就不要重复加载jquery了）
jQuery(document).ready(function($) {
var s = $('#shangxia').offset().top;
$(window).scroll(function() {
$("#shangxia").animate({
top: $(window).scrollTop() + s + "px"
},
{
queue: false,
duration: 500
})
});
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
$('#shang').click(function() {
$body.animate({
scrollTop: '0px'
},
400)
});
$('#xia').click(function() {
$body.animate({
scrollTop: $('#footer').offset().top
},
400)
});
$('#comt').click(function() {
$body.animate({
scrollTop: $('#comments').offset().top
},
400)
});
});
在头部写下如下代码：
CSS代码，添加到主题的style.css里：
#shangxia{position:absolute;top:40%;left:50%;margin-left:-520px;display:block;}
#shang{background:url(images/huadong.gif) no-repeat;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}
#comt{background:url(images/huadong.gif) no-repeat center -45px;position:relative;cursor:pointer;height:32px;width:32px;margin:10px 0;}
#xia{background:url(images/huadong.gif) no-repeat center -78px;position:relative;cursor:pointer;height:42px;width:32px;margin:10px 0;}所有步骤都完成了，效果出来了吧
前端开发作者：孔维聪 发布时间：September 2, 2011 分类：前端开发
1. jQuery 选项卡界面 / 选项卡结构菜单教程
这种类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此演示哟，你一定会喜欢上它的。
演示 | 下载 | 介绍
作者：孔维聪 发布时间：August 9, 2011 分类：前端开发
[code=php]
body, h1, h2, h3, h4, h5, h6, p, pre, blockquote, dl, dt, dd, ul, ol, li, form, fieldset, legend, input, textarea, button, th, td {margin:0; padding:0;}
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:none; }
caption, th { font-weight:normal; }
address, cite, dfn, em, var { font-style: normal; }
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; }/* 使用等宽字体 */
ul, ol { list-style:none outside; }/* outside重置IE6,7缩进 */
caption, th { text-align:left; }
q:before, q:after { content: ''; }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; }
select, input, button, textarea { font-size:100%; }/* 使表单元素能继承父级字体大小 */
/*修复IE6连续英文不折行导致页面布局崩溃*/
body { _word-break:break-all; }
/* 专有属性修复IE7，IE8浏览器强制缩放图片失真 */
img { -ms-interpolation-mode:bicubic; }
/* 默认样式*/
body {font:12px/1.5 "Lucida Grande", arial, helvetica, sans-serif; background: #FEF2F6;}
html, legend {color:#717172;}
a {color:#787878; text-decoration:none;}
a:hover {text-decoration:underline; }
.d{display: block;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
[/code]
作者：孔维聪 发布时间：August 6, 2011 分类：前端开发
[code=php]
作者：孔维聪 发布时间：July 28, 2011 分类：前端开发
当li的子元素中有浮动（float）时，IE6/IE7中li会产生3px空隙的bug的。
经过测试发现：li的子元素浮动只是这个bug产生的必要条件，这个bug产生的充要条件是li的子元素浮动并且li设置了以下CSS属性之一：width、height、zoom、padding-top、padding-bottom、margin-top、margin-bottom。
知道了这个bug的产生条件，所以解决方法也就有了：
方法1
#list div设置clear:left|both，这时#list li不能设置width、height、zoom。
方法2
#list li设置float:left，这时#list li可以设置width、height、zoom。
#list li设置clear:left|both，这时#list li不能设置width、height、zoom。
方法3
特别感谢 meimei 的指教，IE6/IE7的这个Bug可以通过给li中的div设置vertical-align:top|middle|bottom解决。太怪异了，只要加上vertical-align的值是三者之一即可。
前端开发作者：孔维聪 发布时间：July 25, 2011 分类：前端开发
看淘宝搜索技术博客上的一篇文章《定向抓取漫谈》，对通用爬虫进行了简单的定义，如下：
抓取策略：那些网页是我们需要去下载的，那些是无需下载的，那些网页是我们优先下载的，定义清楚之后，能节省很多无谓的爬取。
更新策略：监控列表页来发现新的页面；定期check 页面是否过期等等。
抽取策略：我们应该如何的从网页中抽取我们想要的内容，不仅仅包含最终的目标内容，还有下一步要抓取的url。
抓取频率：我们需要合理的去下载一个网站，却又不失效率。
让我对“如何和爬虫对话 ”这个课题有了一些思考，下面归纳的主要用于迎合上面提到的爬虫“抓取策略”。
前端开发