龚鑫军

阅读全文»

阅读全文»

先上图

HTML

<div class="honor_list">
   <div class="h_l_box"><span class="h_l_img"><a href="#"><img src="http://static.lewatek.com/discuzuc/data/avatar/000/04/68/86_avatar_middle.jpg" /></a></span><em class="h_l_name"><a href="#">叮咚叮咚</a></em><i class="num_bg hot">888</i></div>
   <div class="h_l_box"><span class="h_l_img"><a href="#"><img src="http://static.lewatek.com/discuzuc/data/avatar/000/00/00/03_avatar_middle.jpg" /></a></span><em class="h_l_name"><a href="#">叮咚</a></em><i class="num_bg hot">88</i></div>
   <div class="h_l_box"><span class="h_l_img"><a href="#"><img src="http://static.lewatek.com/discuzuc/data/avatar/000/04/55/98_avatar_middle.jpg" /></a></span><em class="h_l_name"><a href="#">叮咚</a></em><i class="num_bg hot">8</i></div>
   <div class="h_l_box"><span class="h_l_img"><a href="#"><img src="http://static.lewatek.com/discuzuc/data/avatar/000/00/95/71_avatar_middle.jpg" /></a></span><em class="h_l_name"><a href="#">叮咚叮咚叮咚</a></em><i class="num_bg">50</i></div>
   <div class="h_l_box"><span class="h_l_img"><a href="#"><img src="http://static.lewatek.com/discuzuc/data/avatar/000/05/29/75_avatar_middle.jpg" /></a></span><em class="h_l_name">叮咚</em><i class="num_bg">30</i></div>
   <div class="h_l_box"><span class="h_l_img"><a href="#"><img src="http://static.lewatek.com/discuzuc/data/avatar/000/06/06/13_avatar_middle.jpg" /></a></span><em class="h_l_name">叮咚</em><i class="num_bg">19</i></div>
   <div class="h_l_box"><span class="h_l_img"><a href="#"><img src="http://static.lewatek.com/discuzuc/data/avatar/000/03/87/80_avatar_middle.jpg" /></a></span><em class="h_l_name">叮咚</em><i class="num_bg">10</i></div>
</div>

CSS

.honor_list{margin:0 auto; width:960px; _width:1060px;}
.h_l_box{width:130px;height:130px;display:table;text-align:center;border:1px solid #ddd; margin:30px; float:left; position:relative\9;}
.h_l_box:hover{border-color:#0082cb}
.h_l_img{display:table-cell;vertical-align:middle;position:absolute\9;left:50%\9;top:50%\9;}
.h_l_img img{padding-top:4px;position:relative\9;left:-50%\9;top:-50%\9;}
@media screen and (-webkit-min-device-pixel-ratio:0){.h_l_img{overflow:hidden; height:130px;}}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.h_l_img{overflow:hidden; height:130px;}}
.h_l_name{position:absolute;  display:block; width:130px; margin:135px 0 0 -130px; margin-left:-65px\9}
.h_l_box .num_bg{position:absolute; background:url(http://assets.lewatek.com/img/lewaos/num.png) no-repeat; width:36px; height:36px; text-align:center; line-height:36px; font-size:12px; color:#FFF; font-style:normal;margin:103px 0 0 -25px; margin-left:37px\9}
.h_l_box .hot{background:url(http://assets.lewatek.com/img/lewaos/num_hot.png) no-repeat;}

网页导航是设计网站时需要考虑的一个最重要的方面。网页导航的首要的目的是让访客在你的网站简单迅速地找到他们想要搜寻的内容。高效的导航可以引导浏览者在你的网站尝试搜寻其他内容。在本文中，我们将探讨一些设计网页导航的基本准则。

有效的网页导航
在设计网页导航时，你需要将以下几点铭记于心：

1. Organized Links 组织良好的链接
确保你的链接按照重要性有序排列。浏览者能在不同分类中轻松找到他们想搜索的内容。
例如：我们的主链接都可以在页面的上方即，我们的服务、产品、简介及资源等等。其他有趣的链接置页面的右侧。整个网页操作大众化而又贯穿着连续性。

最后一点，如果网页附属一一个索引。例如，你会发现网页索引通常把相关链接置于右侧菜单的下方，也就是页面的底部。
注意：相关链接很重要，因为浏览者可能对你提供的相同标题下的更多新信息资源感兴趣。

阅读全文»

为避免无用功，翻译之前先要百一下，看看是否有人已经翻译了，结果发现10年的时候有篇名字类似的译文，叫做：“每位网页设计师新手都应知道的10件事”，还是不错的译文，有兴趣的可以看下。不过本文内容只是单纯针对表单设计，名字虽然匹配率高，但是内容却迥然不同。好了，节约口水，直接进入译文主体~~

—————- 以下为翻译全文 —————–

有很多设计糟糕的表单，不管你是否喜欢他们，表单都是必不可少的。Joe Leech（cxpartners负责用户体验的）将介绍其在表单设计上的一些经验。

估计没有什么比表单更让设计师出气了。表单不一定可以让（设计师）表现创意，还是可以？我们可能需要从做基本的层面，重新审视表单，理解表单——表单是用户和软件之间的对话。

忘掉切换啊，点击什么的，表单是我们数字设计师（我想应该是依赖计算机进行设计的设计人员）将面临的最富有的交互。下一次，你要对付一个表单的时候，不要认为就是要应用好看的CSS效果或是添加漂亮的jQuery特效。表单设计的水是很深的。

我已经做过上百个表单用户测试，为保险公司、假期预订交互设计过一些非常复杂的表单，以及其他很多。可能你最近使用的某个表单就是我设计的。//zxx: 可有可无的牛皮糖

下面这些经验教训，我希望在我开始设计表单事前先学会之。

阅读全文»

原生Javascript写法:

<script>
document.onkeydown=function(event)
{
e = event ? event : (window.event ? window.event : null);
if(e.keyCode==13){
//执行的方法
alert('回车检测到了');
}
}
</script>

Jquery写法:

$(document).ready(function(){
$("按下回车的控件").keydown(function(e){
var curKey = e.which;
if(curKey == 13){
$("#回车事件按钮控件").click();
return false;
}
});
});

现在各大网站都在搜索框中加入了语音输入功能，不过目前只有Chrome 11及以上版本才支持。
可以用chrome浏览器在这里试试效果，点击话筒即可：

实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。
阅读全文»

CSS3非常强大，发挥想象力便可以用它制作出非常绚丽的效果，这里就使用CSS3的两个属性来制作具有立体感的效果。效果如下：

使用的两个CSS3属性：box-shadow、transform，基本语法：
阅读全文»

几个要点:
阅读全文»

HTML5和CSS3热潮正横扫网络，从事互联网行业，特别是前端工作者，大家或多或少都有了解、学习和使用，HTML5和CSS3包含丰富的技术内容，在每周的技术分享交流会中，页面构建工程师@Sunshine珍兒 同学，从三个特别的角度出发，配合丰富的实例，概括了HTML5与CSS3对页面工作带来的息息相关的变化和精彩。

阅读全文»

一    推荐字

关于推荐关键词放置位置的问题：

• 推荐字在框下：：普遍认为放在下面好一些，从版面美观度考虑，从给用户的冲击力和干扰程度考虑；

• 推荐字在框上：有时搜索框上面会放分类等tab，推荐关键字易被认为作分类；但具体放在上面给用户带来的干扰程度，是 否会让很多用户很讨厌，笔者认为来搜索的用户普遍目的性较强，会下意识自动过滤掉自己不需要的内容，此时的用户是很难被干扰到的，可放心放到搜索框之上； 但可能喜欢清爽一些或有洁癖的用户比较希望什么都不要放。

阅读全文»

IE的年岁基本上可以赶上互联网了，IE已发行版本曾用于以下版本Windows：Windows 95、Windows NT 4.0、Windows 98、Windows 98 Second Edition、Windows Millennium Edition (Me)、Windows 2000、Windows XP、Windows Server 2003、Windows Vista、Windows 7。IE 1.0首次提供给Windows 95用户，并由此开始了IE与Windows的捆绑，随后的2.0、3.0……直到IE8，都是如此。

如今，IE10也即将来到大众身边。相比第一代IE的青涩，如今的IE成熟了太多。在此，让我们追忆一下历代IE版本，简单地回顾一下它们给浏览器市场带来的影响：

Internet Explorer 1

第一代IE浏览器于1995年8月16日发布，当时它还是一个非常不起眼的新兵，IE开发团队一共才6个人。

阅读全文»

开头先问一句：你也受过设计的伤吧？作为微博UDC的视觉成员，经历了微博大大小小的产品视觉设计，苦逼过，加班到深夜，咬紧牙关达到时间进度，在 安静的时候思考不时的思考设计过程中的点滴，因此把一些项目中的心得呈文如下。接到写这篇博文的需求时时间比较紧了，权当给自己的心得沉淀一下，也希望可 以与各位朋友产生共鸣。

阅读全文»