随笔档案「2012年4月」 - 脉凌网络

CSS3实现多种Action:hovert效果

摘要：<!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=gb23 阅读全文

posted @ 2012-04-30 07:06 脉凌网络阅读(354) 评论(0) 推荐(0)

为设计画龙点睛——如何快速提升游戏/视觉页面的品质感

摘要：很荣幸能代表项目组在整个部门做分享，虽然是第一次，并且存在很多不足的地方，但还是很开心很激动，毕竟又看到了自己的成长！对于分享PPT我做了些提炼，然后又总结了分享的心得供大家参考~如何快速提升产品/推广页面的视觉品质感？创意与特效对整个视觉起到什么样的作用？设计过程是不是会碰到灵感枯竭没有想法的时候？如何为一个普通的页面画龙点睛！一、创意对视觉的重要性1.0 4A概术1.1 设计时缺乏灵感？1.2 产品推广与视觉存在什么样的关系？1.3 创意的标准是什么？二、页面中特效的运用三、页面中质感的运用（Q萌、炫酷）1.1 不同风格色彩运用、常用质感对比1.2如何提取质感1.3 质感的实际运用二、阅读全文

posted @ 2012-04-29 10:41 脉凌网络阅读(344) 评论(0) 推荐(0)

jQuery 全选/全不选/反选

摘要：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jQuery中的DOM操作</title> <script type="t 阅读全文

posted @ 2012-04-28 13:11 脉凌网络阅读(590) 评论(1) 推荐(0)

发现用户言行不一的小技巧之感性篇

摘要：早在19世纪30年代，美国心理学家 Richard LaPiere 就意识到一个人的态度与行为并不总是很牢固地联系在一起。LaPiere 得出这样的结论：如果你想预测一个人在面对某一真实的特定情景或特定人物时将如何表现的话，对假设性情景的口头回答（即用户的态度）是远远不够的。事实的确如此，人类总有一种惯性，即使有最好的意图，也是说一套做一套。用户也不外乎凡人的本性，那么，我们如何快速的发现用户在进行测试时是真心还是假意呢，下面就是我作为一名小实习生的一些小感想，写出来与各路仙儿分享。用户真的会“掏钱”吗？用户测试的目的究竟是神马？通常我们只是停留在了解产品是否易用、好用的层面上，但是，请别忘了阅读全文

posted @ 2012-04-27 20:44 脉凌网络阅读(309) 评论(0) 推荐(0)

javascript：深入理解js闭包

摘要：闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。Js代码 var n=999; function f1(){alert(n);} f1(); // 999另一方面，在函数外部自然无法读取函数内的局部变量。Js代码 function f1(){var n=999;} alert(n); // error这里有一个地方需要注意，函数内部声明... 阅读全文

posted @ 2012-04-25 14:45 脉凌网络阅读(403) 评论(0) 推荐(0)

div宽度100%，内部元素浮动，div居中

摘要：<!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="utf-8" /> <title> new document </title> </head> <body> <div class="page 阅读全文

posted @ 2012-04-24 10:28 脉凌网络阅读(696) 评论(0) 推荐(0)

CSS3绘制的百度Logo

摘要：在前端网学习了很多东西，看了很多kwooshung发的CSS3绘画贴，引起我很大的动力，完成后才发觉，这真是一细活，我是第一次用CSS3绘画，写得不是很好，希望大家喜欢！PS:经Chrome 18.0、Firefox 11.0、Safari 5.12、IE9 测试Chrome 18.0<IGNORE_JS_OP> 昨天11:07 上传下载附件 (49.82 KB) Firefox 11.0<IGNORE_JS_OP> 昨天11:18 上传下载附件 (49.18 KB) Safari 5.12<IGNORE_JS_OP> 昨天11:07 上传下载附件 (47. 阅读全文

posted @ 2012-04-21 09:40 脉凌网络阅读(497) 评论(0) 推荐(0)

js瀑布流布局

摘要：html+js:<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin:0;padding:0;}ul,li{list-style-type:none}#div{width:925px; height:auto;margin:20px auto;}ul{width:220px;float:le 阅读全文

posted @ 2012-04-20 11:00 脉凌网络阅读(672) 评论(0) 推荐(0)

不使用任何框架，教你制作网页滑动切换效果

摘要：导读：原文来自DZone，作者Terrence Ryan发表的一篇《HTML Page Slide Without a Framework》，只要你会使用jQuery、jQuery Mobile、zepto或者其他一些框架，无须使用任何框架就可以实现网页滑动切换效果。我做了一个关于网页滑动切换的小例子。这个确实很简单，只要你会使用jQuery、jQuery Mobile、zepto或者其他一些框架，然后他们会给你处理好这个。我不想这么做，我想挑战一下不使用任何框架就可以实现这个效果。HTML代码是越简单越好。我谷歌搜索了下相关的资料，没有找到什么好的解决办法，所以我打算自己写。我想... 阅读全文

posted @ 2012-04-19 10:32 脉凌网络阅读(864) 评论(1) 推荐(0)

漫谈跨平台应用的统一与差异化设计

摘要：最近在多个平台上试用了一些Apps，从华丽的 Mac 到质朴的 Windows，从灵动的 iOS 到多样的 Android，各有各无法取代的特性。但令我（指本文作者）纠结且抓狂不已的思考是：为多个终端设计产品应用时，应该如何做到统一？ 1、多终端统一性，从视觉说起对于多终端的产品而言，好的UI设计，不仅要给与用户最基本的视觉舒适感，更应让界面在不同的平台，承担品牌形象识别的作用。我们先看看MIT Media Lab的视觉识别，它以flexibility和innovation的识别系统而著名。 <IGNORE_JS_OP>半小时前上传下载附件 (11.59 KB) 麻省理工学院阅读全文

posted @ 2012-04-18 12:03 脉凌网络阅读(356) 评论(0) 推荐(0)

jquery的一些技巧总结

摘要：1、使用方法在需要使用JQuery的页面中引入JQuery的js文件即可。例如：<script type="text/javascript" src="js/jquery.js"></script>引入之后便可在页面的任意地方使用jQuery提供的语法。2、学习教程及参考资料请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》(说明：以上文档都放在了【附件】中)3 阅读全文

posted @ 2012-04-17 11:53 脉凌网络阅读(649) 评论(1) 推荐(1)

PhoneGap开发不可或缺的五件装备

摘要：0 轻量级的JQUERY兼容库 JQuery已经成长的得非常强大了，但在移动设备上有些臃肿。如果你的应用只运行在WebKit内核的机器上，那么我强烈建议你换用移动版本的JQuery兼容库。 Zepto和JQ.mobi都是专门为移动设备优化后的JQ兼容库。昨天14:00 上传下载附件 (4.42 KB)<IGNORE_JS_OP> 昨天14:00 上传下载附件 (47.32 KB) Zepto我不是特别熟悉，JQ.mobi我用得比较多，官方提供的数据称，JQ.mobi比JQueryMobile快3倍以上。相比于JQueryMobile悲催的定导航底导航固定功能，JQ.mobi也提供阅读全文

posted @ 2012-04-16 10:12 脉凌网络阅读(487) 评论(0) 推荐(0)

导航 – 让用户“务入其途”

摘要：导航到底有多重要？它只是简单的指路牌吗？当然不是。导航在网站架构中占据重要的位置，它决定了网站的信息范围、分类及获取路径。好的导航设计将直接提升网站的可用性，进而提升品牌形象和网站的可信度。所以如何让进入网站的用户顺利地甚至是不知不觉地”务入其途“一直是我们不断探寻的目标。导航的种类众多，扮演的角色自然会略有不同，有的可拓展信息，有的则做信息收拢，笔者初步将常见的导航功用划分成如下三类：1.整体架构铺设，展示网站全局：有几类导航的用途是将站内信息进行分类，并分层次展现给用户，让用户对网站全局有迅速地了解，并快速定位到自己想找寻的信息，这是一个平铺式引导的过程，对用户感知网站形状非常重要。这类阅读全文

posted @ 2012-04-15 12:09 脉凌网络阅读(418) 评论(1) 推荐(1)

让IE也支持html5标签

摘要：<!–[if IE]><script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>< ![endif]–>引用以上google的JS（下载下来引用本地的也一样的）放在页面的head区域，注意一定要放在head区域不然将会失效，因为必须在浏览器解析这个元素前执行这个JS，所以不能放在页面的其他地方。最后在css申明下这些H5的标签article,aside,dialog,footer,header,section,footer,nav,figure,menu{d 阅读全文

posted @ 2012-04-14 12:11 脉凌网络阅读(570) 评论(0) 推荐(0)

HTML5与Web APP浅谈

摘要：伴随着移动设备的快速崛起，App市场的发展也日渐迅猛，目前iOS和Android平台的App数量总和也达到100万款之多，据AAWP报道，Windows Phone的应用市场数量已突破8万，晋升成为第三大应用平台。移动数据分析公司Flurry在2011年App趋势报告中显示，人们花费在App上的时间已经超过人们浏览网页的时间。未来App的市场呈现一片光明景象，而对于移动开发商来说，不同平台的应用则需要开发不同的App来支持，无论在更新及维护上都需要一定的成本。于是更多人想到了基于HTML5的Web App，目前主流操作系统iOS、Android以及Windows Phone的浏览器都对于阅读全文

posted @ 2012-04-13 22:20 脉凌网络阅读(854) 评论(0) 推荐(0)

社交型网站首页面设计分析

摘要：本文希望通过对社交型网站主页进行的对比分析得到一些思考，并和大家分享探讨提升社交型网站的注册转化率的优秀设计原则。一般来说用户注册转化流程大致由以下几个部分组成：1.能吸引用户注册的主页内容；2.简便、快速的注册流程；3.有效的寻找、邀请朋友机制；4.吸引新用户注意力的引导。此文将探讨第一部分“吸引用户注册的主页内容”，我们将以以下11个社交网站为例进行分析：1.社交网络:Google+、Facebook、LinkedIn2.博客:Blogger、Tumblr3.新媒体社交网站:Flickr、YouTube、新浪微博、腾讯微博、Twitter、YahooAnswers主页内容的价值是什么？我认阅读全文

posted @ 2012-04-13 11:04 脉凌网络阅读(573) 评论(0) 推荐(1)

如何做一个有趣的设计

摘要：你有没有遇到过这样的情景，我们曾试图改变别人反馈的“乏味”、“过时”的评价，可更新后的方案仍等不到对方说“Yes”？你反问他究竟什么才“不土”，可对方说不清具体标准。你只好悻悻地拿回去再修改…一次又一次，直到你要抓狂了，却仍换不来客户的一个笑脸…..如何让别人看到自己的设计会心一笑?本文仅抛砖引玉，就“有趣的设计“谈开来：“有趣”，好像就是“乏味”、“过时”、“土”、“无新意”、“不出彩”、“没亮点”等等的反义词了，做出一个有趣的设计，说不定会远离一切此类的负面评价。是不是有种找到出路的感觉？但…..什么才是“有趣”呢？每个人的感觉都不同，你觉得有趣的他不定觉得是，这似乎完全就是一件不可掌控的阅读全文

posted @ 2012-04-12 12:53 脉凌网络阅读(315) 评论(0) 推荐(0)

9个对web设计师有用的Chrome扩展

摘要：Chrome的用户群在快速增长，如果你是一位准备尝试更换浏览器的设计师，但又舍不得离开FF上那些有用的工具，这里提供的一些替用方案。包括CSS调试工具，取色，量尺，分辨率调整，快速修改hosts，速度跟踪，截屏等工具。Web Developer BuiltWithEye DropperMeasureIt!Window ResizercsscanMultiSwitchWhenever you have the need to simply switch between development, test and productive hosts you should use MultiSwitc 阅读全文

posted @ 2012-04-11 11:37 脉凌网络阅读(328) 评论(0) 推荐(0)

CSS强制英文、中文换行与不换行

摘要：.p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据*/.p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据*/.p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行*/.p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用*/.p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width: 阅读全文

posted @ 2012-04-10 10:46 脉凌网络阅读(278) 评论(0) 推荐(0)

10款最好用的移动web开发工具

摘要：对于新款手机来说，好的开发工具变得越来越重要。手机（尤其是iPhone和Android）中的小工具（小软件）非常的重要，而要开发这些小软件就要选择合适的开发工具。另外，HTML5提供了很多易于移动web开发的特性。例如，所有的网站都是开发放式的，不需要授权；开发者所创造的利润全部归自己所有。无疑，HTML5正在升温，它所体现出来的优势也在不断增加。最新版本的HTML5，可以存储数据，也就是说，数据不再需要与设备绑定。HTML5给人们所带来的好处远不止这些。当然，也可能会有些小问题，比如：连接问题。有时速度会很慢，这也许和开发技术有关。虽然存在不足，但是HTML5的优势是不可否认的。开发工具的阅读全文

posted @ 2012-04-09 08:56 脉凌网络阅读(438) 评论(0) 推荐(0)

广泛收集的jQuery拖放插件

摘要：jQuery允许您创造时尚而又用户体验友好的网站，不仅看起来悦目，而且他轻量级的大小负荷使网站响应相当迅速。这是jQuery在Web开发领域如此受重视的原因。今天分享给大家一些非常棒的的jQuery插件拖放功能。有了这些插件，你会允许你的访问者个性化的网站和它的工具，根据自己的需要，并以这种方式，你提供定制选项的负载展现方式jQuery mb.containerPlus（演示|下载）在建立功能齐全，完全可换肤的容器，这是一个有用的插件。容器可以设置拖动，调整大小，可折叠和可最小化。jQuery的卷轴插件（演示|下载）卷轴是一个jQuery插件，它需要一个图片标签，使现场的“投影”的预建动画帧序阅读全文

posted @ 2012-04-08 14:01 脉凌网络阅读(807) 评论(0) 推荐(0)

巧用CSS3 border制作图片遮罩效果

摘要：<!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=u 阅读全文

posted @ 2012-04-07 09:44 脉凌网络阅读(945) 评论(0) 推荐(0)

“多形态”标志的认识

摘要：近年来，品牌化中标志表现形势上值得瞩目的就是“多形态”标志的不断涌现。在品牌化中“多形态” 标志起到的趋势——个性新鲜而且显的有趣、更好的传递更多的信息；一个更积极的趋势——显得品牌更具活力。而且当下品牌化的日益增长，包括国家品牌化，个人品牌化。另外、自有品牌也在增加——一些出色的品牌在其名下提供额外的产品和服务。所以品牌设计中的标志设计也趋向于往“多形态”标志去发展。在这样的环境下，标志随着多媒体艺术的发展，“多形态”标志逐渐成为当下设计标志的新趋势,设计师在进行标志设计时开始大胆尝试突破标志的固定外形、色彩及其在视觉构架中与其他元素之间的静态关系,由之产生的多形态特征是现代标志设计的阅读全文

posted @ 2012-04-06 10:40 脉凌网络阅读(701) 评论(0) 推荐(0)

webstorm同时打开多个project方法

摘要：曾经多次碰到过想要打开多个project的时候，可每次打开其他项目时，必须选择新窗口还是替换次窗口，如果新窗口的话就无法跟现在的项目在同一个webstorm中同时进行编辑，需要来回切换窗口，很是不方便，今天无意中发现同时打开多个project的方法。具体步骤如下：file>new project>选择相应的总文件夹（包含所有项目的文件夹），点击打开就OK了。等待的时间相对长一点，不过能实现打开多个项目，这样就避免了来回切换窗口的问题。附上截图：阅读全文

posted @ 2012-04-05 20:40 脉凌网络阅读(1711) 评论(0) 推荐(0)

万能浮动清除方法

摘要：很多CSS初学者往往很容易被浮动搞得晕头转向，经常碰到有朋友问“为什么我把ul里面的li都向左浮动了，然后我的ul就没有背景了？”等等之类的问题。此时，如果我们呢给ul加上1px的border的话，就会发现我们的ul从原来的一块变成了一条线，这就是长说的浮动带来的问题。其实解决这个问题，只需要短短的几个属性而已。我个人的理解是浏览器在解析到浮动的时候，会将浮动的元素脱离开原来的父元素像上层浮起，就像小河里的木板是浮在水面上和河底是不接触的。那么这个时候父元素相当于已经被拿空了，那么当然只会是我们看到的一条线的情况了。所以，对于初学者而言，必须时刻记住需要把浮起的木板再压下去，也就是清除浮动。这阅读全文

posted @ 2012-04-05 12:09 脉凌网络阅读(487) 评论(0) 推荐(0)

移动 Web 设计中的一些错误理念

摘要：目前，移动互联网飞速发展，越来越多的网站和应用开始向移动设备上迁移。但是，由于设备和操作方式的不同，移动Web设计和传统的Web设计之间有很多不同点，这就导致了一些错误的设计理念出现。在设计过程中我们应该注意哪些问题呢？下面，让我们来看看本文作者——Headscape的联合创始人之一Paul Boag是怎样看待这些问题的。以下为文章原文：我的Web开发开始于1994年，那时我们犯了很多错误。但不幸的是，在2011年的移动开发领域，我又开始看到了这些错误的再次出现。我不确信我是否喜欢一些人讨论移动Web的方式。就像传统Web设计经历过青涩的青春期一样，移动Web设计现在正处于这一时期... 阅读全文

posted @ 2012-04-04 10:16 脉凌网络阅读(339) 评论(0) 推荐(0)

sup在IE，火狐及其他浏览器下字体大小问题

摘要：今天写了一个页面，使用了sup标签！当时我把sup标签包在了h标签中使用。由于我设置了h标签的字体大为14px，在IE浏览器下，是按照我的想法，居然自动变成了12px的效果。在谷歌浏览器下也是正常的，可是在火狐下虽然看起来也是12px的效果，但是有一些加粗发虚的感觉，但事实上，我事先已经对其进行了不加粗处理。最后我将sup字体设置为12px，在火狐，谷歌浏览器下一切正常，可是在IE下却不能正常了，我又将sup的字体设置为14px，IE下正常，火狐与谷歌浏览器字体变成了14px。哎，不知道什么原因，故而使用了hack，直接在font-size前加了*，只能IE6与IE7受用，IE8还是无动于忠阅读全文

posted @ 2012-04-03 09:45 脉凌网络阅读(541) 评论(0) 推荐(0)

如何提高网页的效率

摘要：网站最基本的东西是什么？——内容？SEO（搜索引擎优化）？UE（用户体验）？都不对！是速度！内容再丰富的网站，如果慢到无法访问也是毫无意义的； UE设计的再人性化的网站，如果用户连看都看不到也是空谈。Make Fewer HTTP Requests 很少的HTTP请求Use a Content Delivery Network 使用CDN(内容分发网络)Add an Expires Header 增加到期标头Gzip Components 压缩组件Put CSS at the Top 把CSS放在头部Move Scripts to the Bottom 把脚本放在面脚Avoid CSS Exp 阅读全文

posted @ 2012-04-02 10:20 脉凌网络阅读(541) 评论(0) 推荐(0)

最全的Discuz! x2去除forum.php尾巴的方法

摘要：首先声明：这是一篇去除discuz论坛中forum.php尾巴最全的方法，之前也看到过类似的文章，但按照步骤操作后，大家会发现还有很多地方没有去掉forum.php尾巴。这样不利于网站seo。今天，为大家整理了最完美的去除forum.php尾巴的方法。在操作之前，我们先来看一下discuz论坛含有forum.php尾巴的地方：（1）主导航中的论坛按钮（2）论坛首页的面包屑导航位置（3）分区版块的面包屑导航位置（4）主题列表页的面包屑导航位置（5）主题内容页的面包屑导航位置（6）发新主题页面包屑导航位置（7）主题列表页的2个返回按钮（8）archiver/的首页（9）输入域名默认跳转到带有www 阅读全文

posted @ 2012-04-01 16:27 脉凌网络阅读(850) 评论(1) 推荐(0)

脉凌网络

04 2012 档案