16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

在这篇文章中,我们分享实用的 CSS/jQuery 视觉效果和网页布局的编写技巧,以帮助您解决遇到的问题或使用 CSS3 带来的新特性来改善用户体验,提高工作效率。

Facebook Style Footer Admin Panel
学习如何创建一个由CSS和jQuery构成的Facebook页脚管理面板。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)


CSS 100% Height
设计师中一个普遍的问题即如何让一个 DIV 100%拉伸为窗口的高度。有许多不同的方案,这就是其中之一。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

CSS3 Drop-Down Menu
一个干净、简洁、漂亮的导航菜单。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

CSS Trick for a Scrolling Transparent Background Effect
一个根据滚动条的高度渐变显示背景图像的特殊效果。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

Scroll/Follow Sidebar, Multiple Techniques
一个非常简单的概念:当你向下滚动页面时侧边栏跟随下降。有许多方法实现它,这里需要 CSS 和 JavaScript (jQuery),一个额外的CSS 技巧。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

A Beautiful Apple-Style Slideshow Gallery With CSS and jQuery
创建一个类似 Apple 的幻灯片相册,类似于 Apple 网站上展示产品所使用的效果。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

Silhouette Fade-Ins
剪影淡出。实现此效果,首先需要包括背景图(剪影)的DIV,在DIV里放如对应剪影一样大小的4个图像,使用绝对定位并默认隐藏。使用 jQuery 鼠标悬停事件淡入图像。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

Zooming with jQuery and CSS
这篇文章介绍有关如何使用 CSS/jQuery 缩放文本尺寸。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

Perfect Drop-Down Log-In Box Like Twitter Using jQuery
这篇文章教你如何使用 jQuery 创建一个 Twitter 下拉式风格的登录框,很简单哟。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

Twitter-Like Log-In With jQuery and CSS
同上,只需为 hide()和show()准备5行 JavaScript 和一点点CSS。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

Clean and Pure CSS Form Design
这篇教程介绍如何不用 HTML 表格设计一个纯 CSS 表单。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

How to Mask Passwords Like the iPhone
许多智能手机中,当你输入密码时,最后一位总是延时1-2秒隐藏。但是浏览器并不会这样做。这里使用一些 JavaScript 解决这个问题。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip
基于 CSS 的分页导航。有悬浮的"上一页"和"下一页"提示。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

How To Create Depth And Nice 3D Ribbons Only Using CSS3
使用 CSS3 的块阴影和其它一些新特性打造一个漂亮的 3D 彩带。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

CSS3 animations and their jQuery equivalents
这个教程展示了分别使用 CSS3 和 jQuery 实现同一种HTML效果。你可以比较2者的代码,看看你更喜欢哪种?

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

Super Awesome Buttons with CSS3 and RGBA
CSS3 里我们最喜欢的新增功能之一即是 RGBA。这里我们展示一些超级棒的按钮示例。

16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)

更多...

2 条评论

发表评论

*