Reset CSS 研究

发表于 2011/03/10 由 前端开发-武方博  735 views

  回顾与反思 第一份 reset css 是 Tantek 的 undohtml.css, 很简单的代码，Tantek 根据自己的需要，对浏览器的默认样式进行了一些重置。 Eric 的也是如此。 YUI 除了 cssreset, 还配套有 cssfonts 和 cssbase. cssreset 清除默认样式，cssfonts 和 cssbase 则将一些元素的默认样式重设回来。 很长一段时间，* { margin: 0; padding: 0; }和 YUI cssreset 模糊了我对 reset 的理解，让我认为 reset 就应该清除掉所有样式，将一切归零。 后来阅读 Eric 的博客，发现 Eric 并不期望大家下载他的 reset.css 后直接拿去用。而是期待能根据具体需求，适量裁剪和修改后再使用。 世间的事总会有些戏剧化，Eric 的期待没有如意。大家都想得到通用解决方案，期待银弹。在这种渴求下，YUI cssreset 很彻底很干净，广为流传。 更戏剧化的是，由于 YUI 的 cssfonts 和 cssbase 只考虑了西欧文字，对汉字的考虑不多。这导致国内用户大部分只会用 cssreset. 比喻......查看更多>>

发表在 css | 标签为 , , , , , | 留下评论

CSS reset怎么写

发表于 2011/03/10 由 前端开发-武方博  923 views

  最近看到一个词叫css reset。什么叫做css reset呢？我理解为重置css，也就是重置默认样式。我在HTML下的默认样式中讲到，一些标签元素在HTML下有一个默认属性值，我们在写css页 面的时候，为了避免在css中重复定义它们，我们需要重置默认样式（css reset）。每个人的用法和写法都不一样。找到一篇关于css reset的调查文章， 可以看看国外使用css reset的比例调查。 这里有一篇总结css reset比较全面的文章，列举了多种css reset的写法，可以看看。 译文地址查看 原文地址查看 接下来我也查看了国内的两个网站，用Firebug按F12看看他们的css reset怎么写的？ 淘宝（www.taobao.com）： html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400; margin:0; padding:0; } h1, h2, h3, h4, h4, h5 { margin:0; padding:0; } body { ba......查看更多>>

发表在 css | 标签为 , , , , , | 留下评论

CSS3 border-image的使用方法

发表于 2011/03/09 由 前端开发-武方博  2,156 views

  一、border-image的兼容性 border-image可以说是CSS3中的一员大将，将来一定会大放光彩，其应用潜力真的是非常的惊人。可惜目前支持的浏览器有限，仅 Firefox3.5，chrome浏览器，Safari3+支持border-image。所以，就本文而言，IE浏览器可以回家休息 了，Firefox3及其以下以及Opera浏览器也可以休息去看《阿凡达》了。所以，本文提供的一些demo页面，要在 Firefox3.5+，chrome或Safari3+浏览器下才可以看到效果。 二、熟悉border-image的一些特性 我们可能对于CSS2中的background属性比较熟悉，例如：background:url(xx.jpg) 27px no-repeat; 指代的是图片(url(xx.jpg))，位置(27px)，重复性(no-repeat)。 border-image于此类似，border-image包括图片，剪裁位置（与background位置一样，也是数值，也支持百分值），重复性。例如：border-image:url(border.png) 27 repeat;，指的就是图片(url(border.png))，剪裁位置(27)，重复方式(repe......查看更多>>

发表在 css3 html5 | 标签为 , , , , | 3 条评论

前端开发工具集合（2011最新）

发表于 2011/03/08 由 前端开发-武方博  2,085 views

  收集的一些轻量级非常实用的前端开发小工具： CSS3相关 CSS3样式生成器：http://www.css88.com/tool/css3Preview/ CSS3渐变样式生成器，类似Photoshop中的渐变界面：http://www.colorzilla.com/gradient-editor/ CSS3动画制作工具Sencha Animator：http://www.sencha.com/products/animator/ 背景色alpha透明工具：http://www.linxz.de/demo/hex_change.html（IE滤镜须是在一个有宽高设置的容器中，或者激活haslayout的属性。具体介绍：http://blog.linxz.de/ie_filter_css3_rgba/）–2011-01-18更新 Data URI Encode Data URL(舜子开发的)http://www.css88.com/tool/DataURL/ unicode转换工具 unicode转换工具：http://www.css88.com/archives/2093 在线代码编辑器 小可<Little Code />是丸子制作的一个在线代码编辑器，轻松分享代码，用于提问，测试和转发代码等，是一个方便又不错的工具：http://code.wanz.im/ CodeBox：ht......查看更多>>

发表在 前端开发工具 | 标签为 , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | 3 条评论

ie6和ie7下z-index bug的解决办法

发表于 2011/03/08 由 前端开发-武方博  4,838 views

  一、匆匆带过的概念 关于CSS中层级z-index的定义啊什么的不是本文的重点，不会花费过多篇幅详细讲述。这里就简单带过，z-index伴随着层的概念产生的。网页 中，层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道，层级越高（图层越靠上），越在上 面显示，如果层发生重叠，层级高的会覆盖层级低的，如果非透明或半透明，则会遮挡。 在photoshop中，层的高低就是靠手动调的，鼠标拖拽，或是ctrl+]或是ctrl+shift+[快捷键改变层的次序。如下图，鼠标拖移 改变层次序的过程中： 在flash中，类似，可以手动改变图层次序，或是使用as脚本，例如：容器对象.setChildIndex(显示对象,0)就是让对象底层显 示，而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。 在CSS中，显然，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要 是relative，......查看更多>>

发表在 css | 标签为 , , , , , , , , , , , , , , , , , , , , , | 4 条评论

css垂直水平居中的整理

发表于 2011/03/08 由 前端开发-武方博  1,153 views

  记得就一句话是这样说的：table能实现的，css一定能实现；css实现的，table未必能实现。水平和垂直的居中，其实不是什么难事，前提是弄懂了各个浏览器的兼容性以及应对这些兼容问题的css hack。 方法一 html <div class="demo1"><img src="图片路径" alt="" /></div> css .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; text-align:center;} .demo1 img { vertical-align:middle;} PS：利用行高等于盒子高度实现高级浏览器，IE6/7的hack font-size等于盒子height乘以差不多0.873的数值，参看：怿飞：图片垂直居中的使用技巧。 方法二 html <div class="demo2"><img src="图片路径" alt=""&nbs......查看更多>>

发表在 前端开发bug修复 | 标签为 , , , | 一条评论

Mobile WEB（3G网）手机网站研发流程

发表于 2011/03/08 由 前端开发-武方博  1,548 views

  接触Mobile WEB前端开发将近一年时间了，在这不算短的时间里，总结出一套自己的Mobile WEB“研发流程”。为什么叫“研发”流程而不是“开发”流程，在下文中会进行解释。首先我们来看一下“研发”的流程图：                点击图片可查看大图   1. 为什么要叫“研发”流程？ 我们知道，对于传统的WEB前端开发，一般情况下我们需要关注的操作系统/浏览器情况如下： 操作系统：Windows/MacOS 浏览器：IE(6、7、8)/Firefox/Safari/Opera/Chrome 这些操作系统和浏览器的基本状况如下： 市场占有率和使用分布情况相对稳定 比较开放，厂商对开发人员的支持较好 不同操作系统下，浏览器渲染情况差别不大 经过前端开发者们的长期研究和总结，它们的渲染特性、标准支持情况基本家喻户晓 而在Mobile WEB前端开发领域，状况则相当的混乱，我们需要关注的......查看更多>>

发表在 移动网站开发 | 标签为 , , , , , , , | 一条评论

IE6,IE7,IE8css bug大集合

发表于 2011/03/08 由 前端开发-武方博  2,174 views

  概述 IE浏览器以不支持大量的css 属性出名，同时也因其支持的css属性中存在大量bug。 本页列举了IE下的一些问题，实例样本和一些我们已知的解决方法。 尽管我已经尽力按照它们本来的性质对它们进行分类，仍有许多bug可以分在好几个部分之下，这种情况下，我将会将此bug分在普通bug这一部分。 统计 目前为止。本站点包含46个”普通bug”教程，5个”haslayout bug”教程，6个”不支持的方法”教程，一个“冲突bug”教程。总共58个教程，70个解决方法。 最近的教程发布于2009年8月19日 15:38:47 星期三 站点包含44个IE6 bug，28个IE7 bug以及19个IE8 bug。 注意版本 在教程中你会看到诸如“影响：IE8和所有以下”或“修复：所有版本”。这里的“所有”意思是IE6，IE7和IE8。 IE5和IE5.5已经是历史了，本网站没有考虑这些版本的教程和解决方案的。 普通bug 此部分包含的是那些不能快速定位为其他部分或是可以同时归类到两部分或更多部分的bug。 普通IE ......查看更多>>

发表在 前端开发bug修复 | 标签为 , , , , , , , , , , , , , , | 3 条评论

Google 用户体验

发表于 2011/03/07 由 前端开发-武方博  698 views

  我们的愿景 Google 用户体验团队致力于创建这样的设计：有用，快速，简单，有吸引力，创新，普适，盈利，漂亮，值得信赖和有人情味。使这十大准则达到和谐的平衡是一项持久的挑战。一个达到了这种平衡的产品就可以叫“Googley”，它会令全世界的用户感到满足和喜悦。 Googley 用户体验的十大准则 1. 以用户为中心——他们的生活，工作和梦想。 Google 用户体验小组努力发现用户的真正需求，包括那些他们自己都无法阐明的需求。有了这些信息，Google 就可以创建解决现实问题并激发所有人创造力的产品。我们的目标不单单是简化按部就班的任务，而是改善人们的生活。 总之，一个精心设计的 Google 产品在日常生活中是有用的。它并不努力依靠花哨的技术和视觉效果来打动用户，尽管它可能全都具备。它不会强制用户去使用他们不需要的特性，但是它会引导有兴趣的用户自发地去使用它们。它不会入侵人们的生活，但是它会向那些想要探索世......查看更多>>

发表在 用户体验UED | 标签为 , , , , , , , , , , , , , , , , | 留下评论

手机网站开发必修课

发表于 2011/03/07 由 前端开发-武方博  1,134 views

淘宝手机网站前端开发的工作至今，转眼已是一年。一步步看着手机淘宝从最初的beta版本到今天的样子，感慨良多。 手机网站开发，有着许多不为人知的困难： 一是可参考的资料太少，大部分手机网站都处于起步阶段，很多的时候都是摸着石头过河，而鉴于淘宝自身的特殊性，也使得我们在参考成功案例之余，要做更多的思考； 二是兼容性工作异常艰辛，难度一点也不比web网站的兼容性工作来的低。 再者作为一个手机网站的前端开发，也往往容易被人忽视（包括我们自己），大家也许会觉得做好一个手机网站能有多难，了解一点XHTML、一点CSS，甚至不需要对JavaScript有什么研究，事实却不是如此，正因为手机网站的开发受到设备的太多限制，前端们常常为了节约几个字节而纠结万分，写出语义化良好的代码也显得更加重要，而多版本的开发需求也对于JavaScript的优雅降级要求甚高，这样才能使得网站有分版本需求的时候可以公用同一套XHTML代码，最大程度的降低开发......查看更多>>

发表在 移动网站开发 | 标签为 , , , , , , , , | 一条评论

微软上线了IE6倒计时网站

发表于 2011/03/07 由 前端开发-武方博  647 views

  　今天，微软上线了一个IE6 Countdown的网站，鼓励全球用户与IE6说再见。并制作了一幅IE6全球分布图，其中橙色代表使用率超过25%的地区，颜色越淡代表该地区的IE6占有率越小。   　　很遗憾，中国仍是使用IE6的主力军，IE6在中国的用户高达34.5%，占全球IE6使用率12.0%中的5.9%，这也就是说IE6的使用者有一半来自中国。 　　从身边开始，影响每一个人，我们不应成为“文明”进步的绊脚石。升级你的IE6，是时候与IE6 Say Goodbye了。 查看更多>>

发表在 前端资讯 | 标签为 , , | 一条评论

[招聘]珍爱网招聘熟手前端开发

发表于 2011/03/07 由 前端开发-武方博  659 views

  珍爱网：1000人以上规模 工作职责：负责日常的网站前端维护及新项目的开发。 任职要求： 1：专科及以上学历； 2：对css html javascript在各种主流浏览器的兼容性以及代码语义有经验。 以下条件者优先： 1：对html5，css3手机wap1.0 wap2.0有深入了解并做过相关项目。熟练使用javascript 完成页面效果展示。熟悉各种javascript库。 2：对代码性能优化拥用丰富经验。 待遇： 面谈，珍爱网计划上半年上市，有机会拿股权 注：简历请附带作品网址。 联系方式：发简历到dabai@dabaii.com QQ:23458441(可能响应比较慢，最近很忙） 查看更多>>

发表在 前端开发招聘 | 标签为 , , , | 留下评论

[招聘]交互设计师、前端开发工程师、高级网页设计师、用户研究工程师、数据分析师

发表于 2011/03/07 由 前端开发-武方博  656 views

  中国移动旗下新成立的”12580红酒俱乐部”，将打造中国最大葡萄酒行业电子商务交易平台，新的团队真诚邀请您的加入，共创美好的明天。(工作地点：深圳-福田） 一、交互设计师 岗位职责： 1.负责电子商务互联网产品和手机终端的交互设计工作,编写界面交互设计说明书； 2.进行产品分析和用户研究,并根据结果完成界面交互行为和功能的改良，提高产品的易用性； 3.负责产品功能设计和功能运营策划； 4.需求跟踪 ,产品生命周期管理。 岗位要求： 1.有3年以上的互联网产品交互设计工作经验，并有成功案例； 2.熟练使用各类产品设计类工具（axure、visio、photoshop、word等）； 3.熟悉多类基于互联网电子商务产品和网站，并能有独特的见解； 4.熟练运用交互设计各种方法，对用户体验有深入理解，对交互设计在产品设计前、中、后期的职责有实际应用经验； 5.思维活跃，敢于创新，敢于挑战； 6.良好的交流沟通与跨团队协作能力，与各部......查看更多>>

发表在 前端开发招聘 | 标签为 , , , | 留下评论

photoshop制作3D物体立体倒影效果

发表于 2011/03/07 由 前端开发-武方博  1,022 views

  Photoshop立体物体倒影的制作方法。   最终效果   素材 将素材导入文档，如以上步骤复制好倒影图层，由于素材有一点的透视效果，因此不能直接利用渐变拖出 我们可以分步进行操作。首先以顶点为分界处，先框出右边的矩形选区 将中心点移至左上角，这一步的目的是让圆心定位于此。按住ctrl+adlt+shift键，鼠标各上拖动右侧中间的定位点直至重合 如法炮制出左边的倒影效果 最后同样添加图层蒙版，用渐变拖出，倒影制作完成。 查看更多>>

发表在 网页设计 | 标签为 , , , , , | 留下评论

2011年最佳jQuery插件

发表于 2011/03/07 由 前端开发-武方博  1,736 views

  1、3D浮动效果的图片墙 　　               　　这个插件(http://ajoin.it/mipage/3dGalleyView/1.x/1.1/)实际上是利用jQuery做的一个图片墙的效果，如上图所示，用户可以设置要展示的图片，然后可以自由拖动图片选择，在拖动时会发现有很COOL的图片移动的效果，当移动到想看的图片后，可以点查看，即可放大图片。 　　2、jQuery手风琴图片展示控件 　　               　　该控件实现的是一个象手风琴拉箱似的图片展示效果(http://flcomponents.net/Components/Item/JQuery_Accordion_Gallery)，如上图所示，当鼠标点某张图片时，图片将自右向左滑动展示，并显示该图片的说明文字，而当点选已经看过的图片时，就会象手风琴拉箱一样，图片自左向右滑动显示。 　　3、超级简单的幻灯播放器 　　               　　这个幻灯播放器可以说......查看更多>>

发表在 jquery | 标签为 , , , , , , , , , , , , , | 留下评论
第 16 页，共 19 页12345678910111213141516171819