现在位置 >首页 > 所有Web前端分类文章

webdesign category
发表于:2010年07月02日  分类:Web前端    2 条评论  675人喜欢这篇文章 
使用DD_belatedPNG让IE6支持PNG透明图片
众所周知IE6不支持透明的PNG图片,而PNG图片在Web设计方面表现力上,具有其它图形格式所达不到的效果,IE6这一致命缺陷极大地限制了Web设计的创意发挥。虽然解决IE6的透明PNG的方法也很多,从使用IE特有的滤镜或是e­xpression,再到javascript+透明 GIF替代.但是这些方法都有一个缺点,就是不支持CSS中backgrond-position与background-repeat属性。而使用DD_belatedPNG.js可完美的解决IE6下PNG图片透明问题,并且支持backgrond-position与background-repeat. 这是其他方法所不具备的,同时DD_belatedPNG还支持a:hover属性,以及<img>。我制作的热点新闻主题,就加入...
阅读全文
webdesign category
发表于:2010年06月30日  分类:Web前端  来源:转载  2 条评论  714人喜欢这篇文章 
jQuery滑动显示制作教程
I'm writing this tutorial in an Airport, heading back to my home country for a short holiday. It was a long day and had a farewell lunch with my fellow colleague. He got a better job offer, resigned and moved on. Well, that's life, had a great time working with him accross different projects, no doubt about it, I learnt heaps of stuff from him. I'm pretty sure I'll miss his daily quotes, jokes and whinging. Alright, let's get into the tutorial This time, we are going to make a custom content slider. I implemented th...
阅读全文
webdesign category
发表于:2010年06月30日  分类:Web前端  来源:转载  3 条评论  688人喜欢这篇文章 
10个非常棒的HTML5、CSS和Javascript特效展
虽然我并没有真正的去学习和了解HTML5的功能,但是它已经很火了,现在我甚至无法避免。为此需要一段时间来熟习和了解它。这其中我认为苹果公司所起的作用非常大。苹果的iPad刺激接受了HTML5 兴起。虽然我还没有iPad,因为我认为我不需要它。回到HTML5, HTML5改变了游戏,网络的发展,这太令人兴奋了。收集了10个的html5、CSS和javascript效果展示,一起来看看html5的魅力吧! Blob Cute little round shape character. It uses HTML5 canvas plus javascript to create such cool animation and interactivity. Bubble Generate colorful bubbles using HTML5 and of cou...
阅读全文
webdesign category
发表于:2010年06月30日  分类:Web前端  来源:转载  添加评论  592人喜欢这篇文章 
42个不容错过的实用jQuery的教程
jQuery是一个了不起的javascript的框架。这42个实用jQuery的教程,包括不同设计元素,垂直菜单,手风琴,切换内容,滑动,画廊等,绝对不容错!希望对你学习jQuery有所帮助。 jQuery Moving Tab and Sliding Content Tutorial | Demo Learn how to build a lava lamp tab and sliding content all together with just simple jQuery code. This script is good for sidebar that display recent posts, comments and community news. Learn How to Use Cookie with Javascript | Demo Cookie is very useful to remember selected menu item and other data....
阅读全文
webdesign category
发表于:2010年06月30日  分类:Web前端    添加评论  439人喜欢这篇文章 
令人难以置信的HTML5 动画效果
HTML5 的 Canvas 对象将改变 JavaScript 的使命,使之成为 HTML5 下强大的动画脚本编写工具。本文介绍了 8 个你从未见过的,基于 HTML5 Canvas 和 JavaScript 的动画,这些令人难以置信的效果将使你对 HTML5 彻底折服。需要指出的是,这些都是浏览器的原生动画,无需任何插件。 Tunnelers 纯 JavaScript + HTML5 Canvas 生成的交互动画,难以置信。 The Mesmerizer 在格子中移动鼠标,颜色随着改变并扩散到周围的格子,很迷幻。用鼠标点四角的格子,或按键盘,可以看到更奇妙的效果。 Burn 在页面上移动鼠标,或按下鼠标,这样的效果,很难相信是浏览器原生的...
阅读全文
webdesign category
发表于:2010年06月11日  分类:Web前端    添加评论  311人喜欢这篇文章 
纯CSS无图实现DIV边框平滑阴影
纯CSS无图实现DIV边框平滑阴影,利用1像素的原理而制作的阴影效果,让每个嵌套的DIV CLASS元素向外延伸一像素,颜色递减,这样就实现了阴影效果,而且效果不错。 效果演示
阅读全文
webdesign category
发表于:2010年06月01日  分类:Web前端  来源:转载  2 条评论  568人喜欢这篇文章 
CSS阴影详解
设计师常常使用一些独特的字体效果和页面效果,阴影是其中一个,它可以让页面中的文字和元素具有立体的效果,从而被突出出来。比如对于文字阴影,传 统的方法可能需要将文字切出来,直接使用图片,如果考虑SEO和网站性能,还可能会使用CSS Sprites等技术将图片整合: h2{ background:url(sprites.png) no-repeat 0 0; font-size:0; text-indent:-9999em;...} h2#title1{background-position:0 -30px;} h2#title2{background-position:0 -60px;} .... 这是很棘手的事情,拼合图片会花掉你的大量时间,而且为了实现更好视觉效果,你可能还要使用高质量的32位png图片,...
阅读全文
webdesign category
发表于:2010年05月01日  分类:Web前端    1条评论  790人喜欢这篇文章 
30个CSS导航技术
We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS. In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface. 1. The Menu menu This another great CSS menu Stu Nicholls that’s unique – hovering over a menu ite...
阅读全文
webdesign category
发表于:2010年04月22日  分类:Web前端  来源:转载  1条评论  782人喜欢这篇文章 
网页圆角的背景图法
网页的圆角处理,其实最开始的九宫格的表格处理是挺方便的,只是现在都不用表格布局了,自然就被非法取缔了。呵呵。 微软的有VML画圆角,由于只是它自家的特产,大家也都不用了,再有就是Javascript的处理方法,很多都会影响页面性能,大家也都不爱用 了。 剩下来的,就只能是老老实实地用背景图了。常用的方法有: 1、固定高度的情况下,我们通常把背景图的宽度拉到足够大,做一个大图,如下: 2、同样,固定宽度的话,我们就拉长高度,如下: 原理都是一样的,就是2头拼凑到一块形成整体。第二种方法会因为在实际使用中图片可能会拉太长,我们一般会将它分为3块来...
阅读全文
webdesign category
发表于:2010年04月22日  分类:Web前端  来源:转载  添加评论  440人喜欢这篇文章 
4种网页添加CSS样式表的方法
一、使用STYLE属性: 将STYLE属性直接加在个别的元件标签里。 <元件(标签) STYLE="性质(属性)1: 设定值1; 性质(属性)2: 设定值2; ...} 例如: <TD STYLE="COLOR:BLUE; font-size:9pt; font-family:"标楷体"; line-height:150%> 这种用法的优点 是可灵巧应用样式於各标签中,但是缺点则是没有整篇文件的『统一性』。 二、使用STYLE标签: 将样式规则写在<STYLE>...</STYLE>标签之中。 <STYLE TYPE="text/CSS"> <!-- 样式规则表 --> </STYLE> 例如: <STYLE TYPE="text/css"> <!-- BODY { color: BLUE; background...
阅读全文