weballan-CSDN博客

原创 jquery练习：菜单文字和图标动画效果

这个菜单的灵感来自于一个网站： http://www.pelicanhotel.com/参考教程：http://www.gbin1.com/technology/jquerytutorial/animatedtextandiconmenu/ 今天四处闲逛，看到gbin1网站上面有怎么漂亮的一个华丽菜单，就赶紧打开源文件，查看制作思路，一看，完全看不懂，谁让自己是菜鸟...

2012-05-03 15:29:02 193

原创天猫商城JS效果制作

最近在一直在学习jquery，对DOM对象有一个深刻的理解，对逻辑思维、javascript理解，在蓝色理想上，看到有人要天猫商城的效果，自己这几天工作不太忙，就做了这几个例子。您可以狠狠地点击这里：天猫商城效果...

2012-04-28 11:20:31 355

原创胡思乱想打鱼晒网

其实一直想写一篇东西出来，但最近状态不好，我这个人过份的自由、散漫惯了，对一些形式和官僚主义特别的反感，还特爱坚持自己的信仰和原则，不愿意做出改变，但随着年龄的成长，总觉的自己该做点什么。这篇文章是三天打鱼，二天晒网胡思乱想的一些内容，也不知道想要表达什么内容。技术团队如果每天缺少交流、分享、讨论、思考，慢慢的就缺少了互相督促和激励的氛围。靠什么沟通呢，技术，肯定是技术的内容，但...

2012-02-15 15:54:43 110

原创淘宝良无限页面交互

您可以狠狠地点击这里：淘宝良无限页面交互DEMO前一段时间浏览淘宝，无意中进入良无限的频道，发现淘宝对那个频道的产品展示效果都是在用心的玩，闲来没事，就自己对它重构了一下，中间感谢金强同学热心的帮助，看效果吧！您可以狠狠地点击这里：淘宝良无限页面交互DEMO...

2012-02-15 15:35:35 211

原创纯代码蓝色理想的logo

您可以狠狠地点击这里：蓝色理想的logoDEMO 生病了，可难受，用的最简单的实现方式，没有什么技术含量，用心制作，大家都可以~~~看例子吧~~~ 您可以狠狠地点击这里：蓝色理想的logoDEMO...

2012-01-06 15:44:05 170

原创项目的质和量：西班牙语频道制作思路和规划

您可以狠狠地点击这里：西班牙语频道DEMO在制作项目的时侯，项目的周期和项目的质量如何能协调的很好，不影响周期，质量又能做到细致，是我们团队每个成员都要考虑到的事情。我们在制作项目的时侯，页面的细节如何做到位，如何减少错误，减少后期的维护成本，更好的配合后端人员。增加高端用户的体验效果、照顾低端用户的操作功能。为什么要这样做？头部的图片用png24的格式(导航图片都有阴影效果)...

2012-01-04 17:14:57 191

原创祝贺“房多多”网站低调上线

感谢前团队的照顾和培养，现在这个项目上线了，看到了心里非常高兴，心里还是很想念你们的，特别是老郭、苏老师、鹏飞妹纸，爱你们。下面是自己的一些建议：网站LOGO的制作，应该考虑后期的维护成本，和页面渲染的时侯的顺序，还有就是LOGO图片加载不上，让用户看到什么网站搜索，在制作的时侯应该考虑提示语和input是分开的，这样不影响用户在输入的时侯，字体颜色和大小和提示语是不一样的，让用...

2011-11-29 10:27:06 186

原创淘宝商城- 产品图片效果

帮群里一个网友制作的，您可以狠狠地点击这里

2011-11-04 17:25:30 110

原创世界工厂首页前端制作 - 首页分解图

您可以狠狠地点击这里：世界工厂网首页预览版网站结构：首页总体结构划分为9个独立层来控制表现(共用头部、页眉、导航、热点栏目、3个主体层、合作伙伴、页底)。前期规划，如何让栏目的移植性更好，在制作的时候，把width层和padding border层分开，在以前用到一个div的，现在变成两个div，这样的嵌套，在改变外...

2011-11-04 16:32:00 308 1

原创 CSS3：animation属性实例操作

文章中的实例须在FireFox6+、或者教新版本的Chrome或是Safari浏览器查看。在css3.0发布transtion、transfrom就觉的css在操作行为上作出了很大的改为，觉的这应该就是动画的操作了，今天刚看到animation，看了看官方的说明和实例，觉的比transtion厉害多了。这是实现上下滚动的效果，设置对应的时间段（百分比）和对应的列表的垂直位置即可：...

2011-09-26 17:24:27 217

原创网页重构：公司网站小面积改版

公司网站首页要改版，前端是由我和另外一个同事负责，这次改版从页面头部、中间、底部，分三部分，分成三个阶段来制作，这点很同意，小面积的修改，更加让用户接收，随时有用户操作习惯的修改，也可以马上改过来。因为是在新团队的磨合中，每个模块我都添加有注释，不管JS、后端都能清晰的明白栏目的结构，减少项目的BUG，增加团队的工作效率。一、合理的html结构和标签这次改版，我前期想了很多，如何...

2011-09-17 10:13:25 203

原创 CSS制作:开心网“发表观点”CSS实现

中秋放假，淋漓小雨下了三天，这种天气最适合看电影、玩游戏、睡觉。害的眼睛都发炎了，刚去医院看了看，回到家里看博，觉的用css实现开心网标签观点的博文不错，就自己按照自己的思路，给制作了一下：制作思路：外面的层控制宽度，内容层控制padding和border，这样栏目在后期的维护或修改只要修改外层的宽度，实用寿命更长。 li 浮动；a标签控制字符、设置display:i...

2011-09-13 14:56:58 299

原创 RadioBox：淘宝UED 前端小测试

今天看到taobaoUED前端招聘，很兴奋的就点进去了。虽然不应聘，但还是觉的要做点什么。原理:1:css控制本来要显示的radio为一小矩形.2:当点击此小矩形时,js使此radio选中,同时改变此小矩形的外观样式. 在制作的时侯查看了淘宝的实现方式，在小图片加载上，淘宝用的是在a标签上面background，个人觉的这是数据图片，用户可选有或无，用img标签比较合适，但...

2011-09-06 16:25:22 128

原创 CSS3：wordpress读者墙

最近在制作一个企业站和制作一些广告效果，今天又在网上看到css3的两个属性：transform-style、backface-visibility。用CSS3写一个不错的wordpress读者墙。您可以狠狠地点击这里：wordpress读者墙 chrome下能收到最好效果。...

2011-08-29 10:45:36 137

原创论网易对联广告的效果展示

打开网易，你会发现网易网站的对联广告做的效果是：默认大的flash广告显示，当你鼠标首触碰上，离开，它会自动变成小的flash广告；再次触碰变大flash广告，离开变小flash广告。广告隐藏没有用display而是用到了visibility，虽然都是隐藏，但一个隐藏过后不占物理空间，一个还保留它的物理空间。还有广告没有采用传统的是固定在浏览器的左右，而是用绝对定位在浏览器左右的，不...

2011-08-25 10:02:06 175

项目制作流程：请勿野蛮施工

项目制作流程图：项目是制做出来的，它有它自己的流程方式：前期的规化、沟通、修改、方案、制作、测试、修改、上线、维护等流程。想想我们把时间浪费在那里了。如果一个30天的项目，需要的是15天的前期规化与沟通，最终确认功能和要求，10天的制作流程，找到适合项目的技术，5天的内测与修改，上线。而我们却恰恰相反，把大量的时间花在不断修改的那部分，一栋大厦，地基没有打好，越往上盖，是越不稳的。...

2011-08-16 15:38:28 147

培养团队的责任心和个人修养

团队的责任心高层如果怪中层，中层怪员工，员工怪中层，中层反过来怪高怪，其实就是没有一个真正负起他的责任，按质按量的做好他的工作。遇到这样情况，应该先问问自己，我按质按量完成我的任务没有，在我这个环节，我一丝不苟了吗？团队中的每一个环节、每一个阶段、每一个细部，都要求非常完美。要培养自己做事情力求完美的责任心。________________________________...

2011-08-16 14:45:15 207

css3:鼠标hover图片效果

今天在网上看到的鼠标hover效果，当时就看的心痒痒，css3果然很强大，最主要的是思路真漂亮，随后自己做了html原型，然后按照自己的思路给规划了一下，果然很帅。您可以狠狠地点击这里：css3:鼠标hover图片效果demo亲，是没有JS效果的哦~~~ ...

2011-08-16 10:56:17 1084

css3:QQ衰表情

发现在聊天群里面，用这个表情的很多，最近一直也在了解CSS3的新属性，觉的应该用CSS3把它画出来，于是就有了这个页面。主要应用伪类:before :after CSS3新属性 transform box-shadow border-radius 您可以狠狠地点击这里：css3:QQ衰表情demo <!DOCTYPE html><html>...

2011-08-16 10:39:31 163

原创百度选车

百度选车频道上线，朋友推荐了这个效果，觉的蛮不错的，就想着格式化做了一下，百度是运用mpa标签配合JS来实现的，我运用的是A标签的实现。您可以狠狠地点击这里：百度选车demohtml标签和js事件句柄都没有做出适当的优化~~~~<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://...

2011-08-16 10:15:00 676

原创工作上面的一些积累

总结一下自己前端工作的一些工作经验和自己前期工作的规划：1、用960栅格系统；2、采用html5向后兼容的头部，严格编码规范；3、尽量做到语义化，模块化；4、图片格式和图片大小，应用css sprites减少图片请求并发数；5、文件布局按照静态文件和动态文件（主要是图片），考虑后期使用图片服务器分布式部署；6、代码采用svn同步管理；7、后期js和css的管理和压缩...

2011-07-25 10:29:17 67

原创项目中的一些小技巧tips记录

项目中遇到的一些小技巧，记录下来:对非a标签添加伪类状态，例如span:hover{}。在采用偷天换日的手法a:hover span{}，解决IE6兼容只许添加一个a:hover{#:FFF;}触发IE6下a标签hover状态的haslayout即可。选项卡去掉虚线框，IE解决方案：<a href=”..” hidefocus=”true”>；FF下解决方案：a:focu...

2011-07-25 10:27:17 221

原创认真的学习

一篇教程，至少要看3遍你才能真正懂的里面的内容和它要表达的真正的用意。遇到技术上面的问题也一样，多看几遍问题，才会明白是怎么触发了问题。...

2011-07-25 10:26:08 82

原创磨刀不误砍柴工 – 前端制作前期的规化很重要

很多同行都容易犯一个错误，就是拿到一个任务后就马上开始写代码，其实这并不是一个好习惯。对于简单的独立页面而言，这么做还不会有太大的麻烦。但是，对于一个中大型的网站而言，如果在还没有一个考虑成熟的前端架框前就开始动手写代码是会带来非常多问题的，比如代码冗余、多人合作容易冲突、代码组织没有规律等。犯这种错误主要因为两个方面原因：一方面可能是前端工程师本身经验不足；另一方面可能是客户或BOS...

2011-07-25 10:23:21 95

只要有一定经验，构思良好，有完善的规范，尽管最终代码可能有好有坏，但团队合作在技术上并不太可能出现大的困难。团队合作最大的问题还是来自于团队成员之间的交流。不同程序师的说话方式、工作习惯、性格特点也可能各异，工作中出现观点不同的情形在所难免。不同程序师在处理问题时表现出的态度也不一样，有些比较温柔，有些则可能稍显强硬，有些可能比较容易接受他人观点，有些则可能固执己见。如果处理不好，可能会产生火...

2011-07-25 10:22:15 187

原创追寻理想中的那片天空

2011年2月23日辞职离开中国钢材网，很多同事都劝我到3月份再辞职，因为这样2月份可以拿全勤。如果一家公司的薪酬都是与目标完成程度紧密相连，谁完成目标，我们给谁更好的待遇，谁达成目标，我们给他更好的薪水，给他更多的红利和奖金。那就不会有以上的看法和想法。很多人都说我浮躁，但浮躁是这个阶段必然要经历的，浮躁过的不一定成功，但成功的人肯定被人说”浮躁”过，什么才是真正不好的？那就是浮躁后不懂...

2011-07-25 10:21:41 119

原创 CSS 中的 :first-letter

对CSS熟悉的人一般都会了解 :first-letter 这个不常用的伪元素，它可以用来设定文章段落中首字母的样式。不少人只是用它结合 font-size 和 float 来制作简单的首字下沉效果，其实首字下沉可以变得更漂亮一点，比如像这个页面中的那样。今天在网上发现的这篇文章（俄文的，我没仔细看内容，就看图片和代码了）就是讲解 :first-letter 可实现的效果，利用 background...

2011-07-25 10:15:50 335

原创 div+css 文本两端对齐的方法

2011-07-25 10:01:04 235

原创 display属性 inline-block的深入理解

在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。但对于这个属性不是所有浏览器都识别。支持的浏览器有：Opera、S...

2011-07-25 09:46:36 137

weballan的专栏