网页前端设计

  随着Web技术的发展，Web标准已经得到了逐步改善，现在HTML5正逐渐成为Web开发的主导技术。本文为Web前端开发者带来了25个基于CSS3的按钮和菜单设计教程，你还可以观看演示以及下载文件源代码。基于HTML5的Web设计将成为今后的主流，你可以使用CSS按钮/菜单来代替传统上的图片按钮/菜单，在拥有漂亮效果的同时，还可以节省加载图片的时间，增强用户体验。赶紧在你的网站和应用程序中尝试一下这个新技术吧！用CSS3的动画按钮（演示 | 下载源文件）用CSS3真棒动画下载“按钮（演示 | 下载源文件） ...未完，继续阅读→

微软IE团队今天发布了一篇博客，称作为Windows 8发行预览版中重要的一个组件，IE10带来了前所未有的浏览体验，并增强了对于最新的W3C标准的支持。该团队在文章中还列出了IE10对于CSS3属性的支持情况。IE10支持的不带前缀的CSS3属性包括（注：不带前缀表明该属性已经成为W3C标准，并被Firefox、Chrome等浏览器的最新版普遍兼容）： Gradients（渐变）CSS Animations（动画）CSS Transitions（过渡）CSS Transforms（变换）font-feature-settings（字体特征设置）属性Indexed Database API（索引数据库API）针对脚本动画的定时控制IE10支持...未完，继续阅读→

目前接入互联网中的设备的多样性，催生了新的 Web 布局设计方式——响应式设计。响应式设计的理念是，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调 整。这样开发者就无需针对每种设备及分辨率分别创建独立的布局。        本文整理 12 款针对响应式布局设计的 CSS 框架，可以使你的开发工作变得轻松，并节省你的时间和成本。       1.  SkeletonSkeleton是一系列CSS和JS文件的集合，它可以帮你...未完，继续阅读→

浏览器所属公司内核下载链接Intrnet Explorer 62001年10月伴随Windows XP发布的浏览器Microsoft(微软)Trident官方下载Internet Explorer 7微软研发的第一代选项卡式浏览器Microsoft(微软)Trident官方下载Internet Explorer 8IE浏览器中可兼容两种浏览模式(IE7、IE8)的浏览器Microsoft(微软)Trident官方下载Internet Explorer 9微软研发的新一代的浏览器Microsoft(微软)Trident官方下载FireFoxWeb开发人员最喜爱的浏览器Mozilla(谋智网络)Gecko官方下载ChromeGoogle研发的更快速、稳定、安全的浏览器Google(谷歌)WebKit官...未完，继续阅读→

Douglas Crockford是Javascript权威，Json格式就是他的发明。去年11月他有一个演讲（Youtube），谈到了好的Javascript编程风格是什么。我非常推荐这个演讲，它不仅有助于学习Javascript，而且能让你心情舒畅，因为Crockford讲得很幽默，时不时让听众会心一笑。下面，我根据这个演讲和Crockford编写的代码规范，总结一下"Javascript编程风格"。所谓"编程风格"（programming style），指的是编写代码的样式规则。不同的程序员，往往有不同的编程风格。有人说，编译器的规范叫做"语法规则"（grammar），这是程序员...未完，继续阅读→

老实说，之前我对CommonJS也是一无所知，直到不久前Node.js火起来，我去研究它，才了解到Node.js其实是CommonJS的一个部分实现，我才关注起CommonJS来。  以前我们说起HTML，我们说起JavaScript，大家的印象似乎都停留在了“网页”上面，从2005年开始，因为Ajax的缘故，有一种叫做“前端程序员”的新型物种诞生了。可是现在，前端程序员不甘心自己的一亩三分地了，他们要越权，看看HTML 5的API吧，它是要吃了Flash啊，连Adobe都倒向HTML 5了，它的API可以做各种各样的事情，要绘图、操作文件、客户端数据库、...未完，继续阅读→

 在IE6/7里JavaScript会从两个方面阻碍页面呈现：script标签下面的网页资源在script加载完之前会停止请求、下载。 script标签下面的html元素在script加载完之前会停止渲染。 在ie6/7 firefox2/3 Safari3 Chrome1 和 opera下 script标签会阻碍下载：  虽然在ie8，safari4，chrome2下script可以并发，但依然阻碍了其他资源的下载：  有6种方法可以使script与其他资源并行下载：XHR eval -- 通过XHR(XMLHttpRequest 对象)下载script，然后用eval方法执行XHR的responseTextXHR Injection -- 通过...未完，继续阅读→

如何让IE6支持HTML5的效果找了一下有不少写了关于这方面的例子，自己调试了一下，在FF和Opera中都显示正常了，到了IE6上却变得面目全非了。GOOGLE了一下，发现了html5shiv这个项目，可以把HTML5的新元素转换成IE6认识的内容。作者已经把这段代码放到了Google code project上，只需要在你的head中调用这段代码就行：<!--if lt IE 9]>  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>  <!--endif]-->当然你也可以直接...未完，继续阅读→

每年的网页设计趋势都会有所改变，跟时装界一样，或者说世间万物亦是如此。作为网页设计师，你必须时刻关注业界的发展和变化，随时作出应对的准备。2012年网页设计的趋势将会是怎样的呢？一起来看看flashuser博客的观点。各位网页设计师看到了这一篇文章，应该不太意外的发现，许多内容提及的趋势其实已经正在制作，甚至已经成为了各位的设计一部分呢！我们无法预测未来，但是我们却可以改变。由于网络的产业的变化，我们多少都会稍微的改变了原本网页设计的做法，让设计出的东西更符合客户的需求，当越来越多人这么做的时候，自然就成为...未完，继续阅读→

那些喜欢冒险体验前沿技术的开发者现在应该会非常开心。浏览器正变得越来越强大，上面有各种丰富的功能可以供开发者选择，一些在几年前几乎难以想象的功能都已经一一实现。有了这些新功能，开发者现在能够开发出更精细、更复杂、更有想象力的用户界面了。这为网站开发扫清了障碍，网站能够拥有让人惊喜的用户界面了。有时候，这种技术的运用是非常精妙的，它无声无息地改变了应用的用户体验。有时结果就像是加入樱桃可乐中的跳跳糖，悄悄地给人们带来惊喜。这里有20个特别突出的网站，他们在定位、技巧或者是JavaScript的使用上有各自的...未完，继续阅读→

昨天在 twitter 上说，怎么忍心把页面写得这么难用？是的，这个世界还有一群人等着我们创建出来的东西，可以让他们的生活能过得更容易呢。比如那些需要读屏软件的用户。作为一个前端，我们又怎么会忍心呢。之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把 2HTML T2ag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML，让某些人的生活可以更容易。今天想分享的是如何去使用我们的 HTML Tag, 把 WCAG 的标准和语义网的目标进行代码上的体现：1. 文档声明：<!Doctype>其实这跟 W...未完，继续阅读→

js按次序加载对你很重要,因为可以把js放到页面的最低部。当页面加载后再执行js对页的SEO有相对的优势。传统上，加载Javascript文件都是使用<script>标签。就像下面这样：<script type="text/javascript" src="example.js"></script><script>标签很方便，只要加入网页，浏览器就会读取并运行。但是，它存在一些严重的缺陷。　　（1）严格的读取顺序。由于浏览器按照<script>在网页中出现的顺序，读取Javascript文件，然后立即运行，导致在多个文件互相依赖的情况下，依赖性最小的文件必...未完，继续阅读→

在IE6中是不能直接使用 position:fixed; 。需要一些 CSS Hack 来解决它。当然，IE6 的问题也不仅仅 position:fixed; 下例让 <div id=”top”>…</div> 元素固定在浏览器的底部和距离右边的20个像素： #top{  position:fixed;_position:  absolute;bottom:0;  right:5%;  _bottom:auto;   _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle...未完，继续阅读→

这段代码适合给CSS新手朋友看，有助于理解CSS中margin属性的应用，这种实现效果实际上是给内层的a标签设置border属性，然后在外层包围的A标签同样设置一个border边框属性，指向a时将其width:设置成本来宽度-去边框宽度,margin设置负值并将为(-)边框宽度，比较简单的效果(呵对于高手来说)。你可以自己写个先。我摸索了好久才做出来的！菜鸟,见笑了。关键是margin的负值跟A:hover运用效果图如：好了贴代码了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/...未完，继续阅读→

你看到这篇文章是绝对幸运啊！！！搜遍全网没结果，方法全都不对头？你是不是很郁闷？你是不是已经把ie8卸了重装了？你是不是一遍又一遍的清理历史记录？你是不是一次次点击工具—》internet选项找办法解决？你是不是还一遍一遍杀毒来着？最后你还是没解决对不对！灭哈哈！！！（这人废话真多= =！）好吧其实方法很简单，（注：以下方法被证实无效，仅供参考，真正解决方案在文章末尾的黄色字部分）先从别人的电脑中拷贝C:\Documents and Settings\Administrator\Local Settings目录下的History文件夹，就是那个钟表上还有个绿色回转箭头的...未完，继续阅读→

鼠标右击[我的电脑]选择[属性]在[属性]窗口中选择[高级]标签在[高级]标签页面下选择[性能] [设置]在打开的窗口中把：[在桌面上为图表标签使用阴影]前面选中，确定退出，就OK了。电脑|属性|高级|性能项的 设置|自定义|在桌面上为图标标签使用阴影|打上勾|如果不行，再在桌面空白处右击|排列图标|在桌面上锁定web项目|把勾去掉后重复以上步骤！！！！！！！再不行：：：：可以尝试以下4种方法：1.右击“我的电脑”，依次单击“属性/高级/性能设置”在“视觉效果”页中将“在桌面上为图标标签使用阴影&...未完，继续阅读→

良好的HTML代码是一个漂亮网站的基础。当我教别人CSS的时候, 我总是首先告诉他们: 良好的CSS只存在于良好的html标记基础上。这就好像一间房子需要一个坚固的地基一样，对不？ 整洁、语义化的HTML标记具有很多的优势，但却还是有很多网站使用着并不友好的标记写法。让我们来看一些写得并不友好的HTML标记, 并针对这些问题进行讨论，从而学习如何书写整洁规范的HTML标记。幸凡注: Chris Cyier在这里使用了两个文档来进行本文的代码说明: bad code 和 good code 。大家学习的时候请参考着这两个文件。    ...未完，继续阅读→

html 5最近被讨论的越来越多，越来越烈。尽管HTML5离我们其实还挺远的， 我们绝对犯不着浪费时间现在就去学习HTML5的特性和应用 — 那是Google这等走在技术前沿有实力有干劲的家伙才干的事儿。但任何一个设计开发爱好者都不能忽视它，至少应该有个大概的了解。HTML 5可谓集万千宠爱于一身，各种高帽戴的不亦乐乎。当然，只要是值得讨论的事情，总有不同的声音。也有一些人并不看好他，或者至少对HTML5没那么兴奋。本文就收集整理一些有关HTML5的相关知识、热门评论和新闻动态，帮助你进一步的了解HTML。什么是HTML 5？HTML 5 的历...未完，继续阅读→

在HTML5一览中，我们提到html 5被冠以很多高帽，其中最高的一顶、备受争议的就是”Flash杀手“。IT评论界老喜欢用这个词了，杀手无处不在。不管是不是杀手，HTML 5引进的一些新特性确实让人兴奋不已。最令人期待的之一就是 canvas元素。作为HTML5标准的一部分，Canvas元素允许脚本动态渲染点阵图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 javascript 以使脚本能够把想绘制的东西都绘制到一块画布上。HTML 5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法...未完，继续阅读→

 当鼠标移动到图片上时，图片有上下波动的效果。感觉还不错，大家可以运行下看效果！其实主要是运用了position以及top的CSS改变来让图片产生动画效果。好了贴代码了！<!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=gb2312" /><title>...未完，继续阅读→