16个实用的网页代码编写技巧(CSS布局,视觉效果及表单)
作者:佚名 来源:小影志 时间:2010-02-24
在这篇文章中,我们分享实用的 CSS/jQuery 视觉效果和网页布局的编写技巧,以帮助您解决遇到的问题或使用 CSS3 带来的新特性来改善用户体验,提高工作效率。
Facebook Style Footer Admin Panel
学习如何创建一个由CSS和jQuery构成的Facebook页脚管理面板。
CSS 100% Height
设计师中一个普遍的问题即如何让一个 DIV 100%拉伸为窗口的高度。有许多不同的方案,这就是其中之一。
CSS3 Drop-Down Menu
一个干净、简洁、漂亮的导航菜单。
CSS Trick for a Scrolling Transparent Background Effect
一个根据滚动条的高度渐变显示背景图像的特殊效果。
Scroll/Follow Sidebar, Multiple Techniques
一个非常简单的概念:当你向下滚动页面时侧边栏跟随下降。有许多方法实现它,这里需要 CSS 和 JavaScript (jQuery),一个额外的CSS 技巧。
A Beautiful Apple-Style Slideshow Gallery With CSS and jQuery
创建一个类似 Apple 的幻灯片相册,类似于 Apple 网站上展示产品所使用的效果。
Silhouette Fade-Ins
剪影淡出。实现此效果,首先需要包括背景图(剪影)的DIV,在DIV里放如对应剪影一样大小的4个图像,使用绝对定位并默认隐藏。使用 jQuery 鼠标悬停事件淡入图像。
Zooming with jQuery and CSS
这篇文章介绍有关如何使用 CSS/jQuery 缩放文本尺寸。
Perfect Drop-Down Log-In Box Like Twitter Using jQuery
这篇文章教你如何使用 jQuery 创建一个 Twitter 下拉式风格的登录框,很简单哟。
Twitter-Like Log-In With jQuery and CSS
同上,只需为 hide()和show()准备
5行 JavaScript 和一点点CSS。
Clean and Pure CSS Form Design
这篇教程介绍如何不用 HTML 表格设计一个纯 CSS 表单。
How to Mask Passwords Like the iPhone
许多智能手机中,当你输入密码时,最后一位总是延时1-2秒隐藏。但是浏览器并不会这样做。这里使用一些 JavaScript 解决这个问题。
CSS Navigation: No JavaScript, jQuery or Image Required, Free CSS Navigation / Pagination with Tooltip
基于 CSS 的分页导航。有悬浮的"上一页"和"下一页"提示。
How To Create Depth And Nice 3D Ribbons Only Using CSS3
使用 CSS3 的块阴影和其它一些新特性打造一个漂亮的 3D 彩带。
CSS3 animations and their jQuery equivalents
这个教程展示了分别使用 CSS3 和 jQuery 实现同一种HTML效果。你可以比较2者的代码,看看你更喜欢哪种?
Super Awesome Buttons with CSS3 and RGBA
CSS3 里我们最喜欢的新增功能之一即是 RGBA。这里我们展示一些超级棒的按钮示例。
更多...
- 45 Powerful CSS and JavaScript Techniques
- 50 Brilliant CSS3/JavaScript Coding Techniques
- 5 Useful Coding Solutions For Designers And Developers
- 50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
相关阅读
更多资讯
-
Whats the Closest Google Font? 找到最好的 Google Web 字体
-
完美防止垃圾邮件的6种方式 - 让Spam爬虫空手而归
-
常用 JavaScript 库 CDN 加速服务
-
JavaScript and CSS Code Beautifier - 代码格式化高亮扩展
-
【译】使用 Intersection Observer 实现图片延迟加载
-
使用 Web Audio API 播放摩斯密码
-
【译】如何创造带方向感应的纯 CSS 悬停效果
-
Kraken.io - 最好用的在线图片压缩工具
-
Polyfill.io - 自动化的 JavaScript Polyfill 服务
-
CSS3介绍
-
使用 SVG 实现手写签名动画效果
-
Fontmin - 中文 WebFont 子集化生成工具