随笔分类 - Web前端技术
关于Web前端技术的一些讨论和思考。
摘要：一、不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的section等价于div具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这…
阅读全文
摘要：自从HTML5能为我们的新网页带来更高效洁净的代码而得到更多的关注，然而唯一能让IE识别那些新元素(如<article>)的途径是使用HTML5shiv,感谢remy sharp为我们提供了这个迷你脚本来解决IE支持HTML5的问题。必须在页面head元素内调用(因为IE必须在元素解析前知道这个元素，所以这个js文件不能在页面底部调用。)作者已经把js文件放在Google code project上并允许大家直接调用，当然，前提是你不在意调用额外的文件。http://html5shiv.googlecode.com/svn/trunk/html5.js你可以使用IE条件注释来调用这
阅读全文
摘要：这是王子墨写的一篇关于前端开发的思考文章，我觉得写得非常好，将它摘录下来。一直想写点关于前端开发职位本身的文字，但写了好几次都没发。最近和朋友聊起这个话题，对工作有些感想，零散的写多少算多少吧。关于“前端开发工程师”这个职位当一个词开始泛滥，就会被人忘记它的本意。我只讲我认为的解释。首先，它是“开发工程师”，也就是程序员。其工作内容的本质，就是写代码。所以，程序员应该具备的素质，比如逻辑能力，写代码的水平等等，算是它最最基础的要求。在此之上，则是另一个要求：“界面开发”。对“看得见”的东西的感觉要敏锐。这偏偏是大多数重于理性思维的普通开发工程师，所无法具备的一项能力。坦率的 说，这也是前端开发
阅读全文
摘要：网格设计呢，通常显得很整齐规范，有时看上去也比较专业。但网格设计相对来说也是比较复杂的，往往需要精准的测量和栏目划分。960 Grid System/960网格系统，这是一套可以让你快速创建网格设计的工具，之所以叫960，就是说模板的宽度是960像素。而之所以用960像素来做为标 准，是因为960像素宽具有高度的灵活性，它可以按2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320和480来进行划分。960网络系统包含一个PDF网格页面，Fireworks
阅读全文
摘要：前三篇文章中，明确了栅格系统的设计细节和适用范围。这一篇将集中讨论960栅格系统的技术实现。Blueprint的实现Blueprint是一个完整的CSS框架，栅格系统是它的一部分功能。我们来看demo页面：以上三栏布局的代码为：1<styletype="text/css">2.container{margin:0auto;width:950px}3.span-8{float:left;margin-right:10px}4div.last{margin-right:0}5hr{clear:both;height:0;border:none}6</style
阅读全文
摘要：网页栅格系统研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：（图1）纷乱的高度世界我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格（不可避免的要调整内容，比如人气宝贝中将只能放下3张图片）。来仔细看下高度方向：（图2）高度方向的布局是：90 : 117 : 100, 第一个间隔是8, 总高度为325. 很明显，高度方向没有任何栅格化
阅读全文
摘要：首先澄清一个应用场景问题。研究（1）中指出，对于结构复杂的网站，不少设计师们喜欢采用960固定宽度布局。但要注意的是，960并不是万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度的呈现信息。Google更是简简单单，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受青睐。有个很有意思的网站是Yahoo!, 看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能摇身一变自适应宽度了：#page {width: 70em;}为什么Yahoo!最后选择了定宽
阅读全文
摘要：栅格系统在工作中使用很广泛，这儿收藏了几篇这方面的文章，详细介绍了栅格的由来和具体的操作过程。
阅读全文
摘要：链接的虚线框影响整体风格，我们在工作经常会将它去掉，而采用图片高亮的方式来显示焦点状态。然而去掉虚线框在两种浏览器中却分别对待，这种技巧经常用到，作个记录，以备不时之需。
阅读全文
摘要：前言HTML 5如同一场革命，正在Web2.0后时代轰轰烈烈的进行着。HTML 5是什么，无须我在这里赘述了。对于HTML 5的革新，按我的理解，可以总结为语义明确的标签体系、化繁为简的富媒体支持、神奇的本地数据存储技术、不需要插件的富动画(canvas)、强大的API支持。总之，HTML 5让人机交互，人网交互变得更加舒适，贴合用户。以往对富媒体应用与本存储的支持乏力也不再是浏览器的切肤之痛。将Web从内容平台推向标准化的应用平台，并一统各在平台阵营的标准，才是HTML 5革命的初衷。本文，我就抛砖引玉，阐述HTML 5的革新之一：语义更明确简洁的结构。从”头”说起一个标准的XHTML头部代
阅读全文
摘要：自HTML5标准的提出就得到非常多的关注，而作为全球使用用户最多的IE浏览器能够支持HTML5标准也是大家备受关注一个问题，上周微软在技术大会上就表示目前微软正在开发的IE9将更加支持HTML5标准，但对于IE9是否将完全支持HTML5所有的标准，微软却表现的有点含糊其辞。HTML5标准能为网页带来更高效更洁净的代码，只有微软参与HTML5的设计工作，才能让IE浏览器识别更多的新元素。HTML5标准预计是在2022年向全世界发布，虽然目前距他发布的日期还有3年左右的时间，但是我认为它距离我们并不是那么遥远，目前很多网站的设计和开发都是在采用HTML5的标准。在HTML5标准的制定和推广方面，苹
阅读全文
摘要：CSS3与HTML5的推出，也让各种浏览器的兼容性成了许多设计师关心的问题，本文以表格形式排列了目前主流浏览器对于CSS3与HTML5支持情况。
支持 CSS3 和 HTML5 的浏览器越来越多，甚至包括最新版的 IE，当然，所谓支持仅仅是部分支持，因为 CSS3 和 HTML5 的W3C 规范都尚未形成。如果你现在就希望使用 CSS3 和 HTML5 创建你的站点，至少要对各个浏览器对这两种新技术的支持情况有一个全面了解。
阅读全文
摘要：
在后台或OA系统中最常用到的布局往往是一个全屏布局，一般都是上中下三行两列布局，页头、页脚、左侧菜单加一个右侧ifame框架页。所以那种带折叠的二级菜单是会经常使用到的，本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单。
阅读全文
在后台或OA系统中最常用到的布局往往是一个全屏布局，一般都是上中下三行两列布局，页头、页脚、左侧菜单加一个右侧ifame框架页。所以那种带折叠的二级菜单是会经常使用到的，本例便是实现这样一种比较通用的全兼容可高亮二级缓冲折叠菜单。
阅读全文
摘要：
在前面一篇文章中，我们将一张上下渐变的的图片作为标题的背景，并将它应用了圆角效果。是不是这种圆角框只能用于比较单调的图片呢？我们还能将一些颜色比较丰富的图片也进行透明圆角化吗？
阅读全文
在前面一篇文章中，我们将一张上下渐变的的图片作为标题的背景，并将它应用了圆角效果。是不是这种圆角框只能用于比较单调的图片呢？我们还能将一些颜色比较丰富的图片也进行透明圆角化吗？
阅读全文
摘要：
第一章中我介绍了最基本的纯CSS圆角框的实现原理，并给出Demo，在本章中会对上一个模型作一些新的创新，实现将背景图片透明圆角化。并给出一些漂亮的通用演示效果。
阅读全文
第一章中我介绍了最基本的纯CSS圆角框的实现原理，并给出Demo，在本章中会对上一个模型作一些新的创新，实现将背景图片透明圆角化。并给出一些漂亮的通用演示效果。
阅读全文
摘要：
在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。而在这篇文章会对纯CSS圆角框做出一些创新。
阅读全文
在我的文章《超圆滑圆角框的半完美解决方案》中已经总结了七种不同的圆角框解决方案，基本上总结完了目前网络上比较流行的圆角框实现方案。而在我的另一篇文章《无图片山顶角》中又是一个另类的实现方法。而在这篇文章会对纯CSS圆角框做出一些创新。
阅读全文
摘要：
在我的另一篇文章《弹性+固宽布局》中，我介绍了弹性加最小固定宽度的一种布局方案，现在介绍另一种布局方案---弹性流体布局。
那种方案其实就是这种布局的变通应用。弹性布局最大的优点就是能充分利用屏幕空间。无论客户端分辩率多大，都能自动适应宽度的变化。
阅读全文
在我的另一篇文章《弹性+固宽布局》中，我介绍了弹性加最小固定宽度的一种布局方案，现在介绍另一种布局方案---弹性流体布局。
那种方案其实就是这种布局的变通应用。弹性布局最大的优点就是能充分利用屏幕空间。无论客户端分辩率多大，都能自动适应宽度的变化。
阅读全文
摘要：对于运行代码这个功能，我之前也写过一篇文章，这儿主要介绍一下如何在博客园中加入这个功能。博客园后台程序中是没有这个功能的，而我们又太需要这种功能来演示HTML静态页面了。而且也有朋友问过我如何加入，所以这里再啰嗦一下。
首先，在博客园中添加文章时，如果要用到代码运行功能，你需要将下面这段结构加入到文章中，你可能打开文章的HTML模式来添加这段代码...
阅读全文
摘要：WEB前端，指的是：交互-设计-制作三个角色的组合。
项目管理，指的是如何把需求分解成任务，分派给合适的人并正确的完成任务。
需要把握的是：
1.需求分析
需求分析的目的是评审需求的可行性和优先级，这里就需要足够的项目经验了。
可行性：
关于需求本身是否合理，是否是一个值得去做的需求。
需求的完整性，是否是一个完整的，可以进入研发规划的需求。
其实还有一个需求的充足性，将零零散散的小运营需求合并为一个大的需求，便于开发，让任务列表清晰简洁，维护风险降低。
再次是需要后台开发的，进行沟通，是否下一个研发线能评审通过和按时跟进。
阅读全文