自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Web前端开发经验记录

Web前端开发

  • 博客(14)
  • 收藏
  • 关注

翻译 交互设计技巧——创造好的用户体验(3)(翻译)

*********************正文开始*************************  41. 尝试写明优惠,而不是直接给出价格  人类与生俱来就有认知偏见,正如卡尼曼所观察到的那样,优惠是一种人类很难抵抗的偏见。这表明第一个引起我们注意的数据会影响我们的决策。当我们以一个稍微贵一点的价格开始,然后将价格降低,这个价格突然就显得不再那么贵了。

2015-05-21 11:11:58 949

翻译 交互设计技巧——创造好的用户体验(2)(翻译)

*********************正文开始************************* 21. 尝试平滑过渡而不是突兀呈现  当用户进行操作的时候,界面元素经常会有出现、隐藏、移动、转换以及大小调整的动作。作为对操作的回应,为元素变化适当添加时间延迟有时候让用户更容易理解刚刚发生了什么。以动画或者过渡的形式刻意制造的延时,给了用户理解元素大小或

2015-05-21 11:10:39 1036

翻译 交互设计技巧——创造好的用户体验(1)(翻译)

*********************正文开始*************************   一个好的用户界面具有较高的转化率和易用性。换句话说,它既能满足商业用途也便于使用。以下是我们发现的一些想法清单。  1. 尝试使用一列布局代替多列  一列布局会让你对全局有更好的掌控。它也能让你的用户预先对整体的内容从上到下有一个大致的了解。然而

2015-05-21 11:06:23 884

转载 CSS3之过渡Transition

CSS3也有着非常强大的属性,那就是过渡——Transition。过渡——Transition在W3C的描述:“css的transition允许css的属性值在一定 的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。 ”既然CSS3的过渡这么强大,下面我们就一点一点掌握它吧。  CSS3中的过渡Tran

2014-07-02 22:52:09 738

原创 HTML5 rgba与opacity的属性 兼容ie6/7/8/9各浏览器

RGBa 与 opacity 效果的区别           .main{ background:#000; width:300px; height:300px; }  .main-1{ background:rgb(255,255,255); background:rgba(255,255,255,0.2);width:300px; height:50px; }       

2014-07-01 21:30:06 2170

原创 CSS 浏览器私有前缀

现代浏览器的内核,主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(Opera浏览器)、Trident(讨厌的IE浏览器)。根据不同的内核,一些私有属性的css前缀不一样 Mozilla内核 (Firefox)        css前缀-moz;WebKit内核(S

2014-07-01 11:17:46 2498 1

原创 HTML5 的placeholder属性(兼容各版本)

Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。

2014-07-01 09:24:32 1254

原创 CSS hack 属性(兼容IE6、7、8、9)

整理的CSS hack 属性的使用:针对不同浏览器实现类似的效果,我们可能都会想到CSS hack这个东西,让不同的浏览器下引用不同的CSS属性或是不同的CSS属性值。经过测试                        末尾 属性值:\0                                           支持:IE8 和IE9           

2014-06-30 22:38:47 1114 1

转载 开发者必须知道的HTML5十五大新特性

摘要:HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术。然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性。 HTML5想必大家都很熟悉了,因为太多的媒体在讨论这一技术。然而,你能准确地说出HTML5带来了哪些新特性吗?本文总结了HTML5带来的15项你必须知道的新特性。一起来看下:1.新的文档类型  (New D

2015-06-03 16:13:21 470

转载 HTML5 新的 Input 类型

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。介绍这些新的输入类型:emailurlnumberrangeDate pickers (date, month, week, time, datetime, datetime-local)searchcolortelephonecolorEMAILinput type="email"

2015-06-03 16:05:53 920

原创 PHOTOSHOP 小技巧

1.在画布中调整笔刷的各种参数关于笔刷,用过PS的人基本上都知道几个快捷键,比如Ctrl+”["、"]“调整笔刷大小之类,这次我带来的方法比那个更加便捷,不但是大小上的调整,连同硬度和颜色都可以在画布中完成调整。方法:①在画布中按住Alt+鼠标右键——此时在画布上会出现一个红色的圆点,圆点代表了你笔刷的大小和硬度(越实越硬,越虚越软),拖动鼠标进行左右平移可以调整笔刷的大小

2014-08-08 16:36:02 641

原创 CSS3 Gradient 线性渐变/径向渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。而我们今天主要是针对线性渐变来剖析其具体的用法。为了更好的应用CSS3 Gradient,我们需要先了解一下目前的几种现代浏览器的内核,主流内容主要有Mozilla(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Ope

2014-07-07 17:43:09 1248

原创 html条件注释代码

下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果  您正在使用IE浏览器   版本 5.5   版本 6   版本 7  下面的代码是在非IE浏览器下运行的条件注释  您使用不是 Internet Explorer  最终在非IE和特殊的IE浏览器下起作用 (或者使用 lte lt 或者 gt gte来判断,如:  

2014-07-02 22:42:12 1078

转载 IE6 浏览器常见兼容问题 大汇总(23个)

IE6 浏览器常见兼容问题 大汇总(23个)  IE6以及各个浏览器常见兼容问题 大汇总综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼容各个浏览器,依然是不得不面对的工作。在此总结了常见的浏览器兼容问题,里面也有IE6的常见兼容问题,供大家分享。

2014-07-01 15:17:24 1483

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除