在这篇文章中,我们将分享一些实用的CSS/jQuery代码编写小窍门,小技巧和小花招。包括视觉特效,布局和web表单设计等。希望大家会喜欢!
1. 完美的全页面背景图片
这个技巧允许一个图片填满整个页面,没有任何的空域。图片会根据实际需要缩放并且改变自身尺寸,不产生任何的滚动条
2. 非常棒的CSS位置技巧
这里我们将有一个基本的无序list(ul),这个list包含有文字并不排列在其下方的左浮动图片。当然这个技巧也可以在加载其它实例时使用。
3. 如何使用CSS来生成超大背景
这个教程使用各种CSS例子来演示如果使用单张或者多张推片来创建一个巨大的背景图片
4. 四个生成等高列的方法
这个文章讨论了几种能够兼容各种浏览器的创建等高列的实现方法(包括IE6)。所有的方法都教你如何生成一个3列的布局。
5. Rolling a coke can around with pure CSS
Roman Cotes对于使用CSS的小技巧非常有意思。他使用了background-attachment,background-position和一些其它技巧创建了滚动可乐瓶。这里没有使用特别炫的CSS3!
感谢 gbin1.com 的投稿
6. 3 Easy and Fast CSS Techniques for Faux Image Cropping
这个教程总结了3个快速简单的CSS技巧用来显示一个图片的一个部分。这些技巧对于保持图片特定大小非常有帮助。使用CSS来控制一个图片部分显示将非常不错。
7. Bokeh effects with CSS3 and jQuery
这个教程帮助你使用CSS3重新创建bokeh特效。使用jQuery,我们可以给特效添加一些随机颜色,大小和位置。
8. Silhouette Fade-Ins
为 了达到这个效果,首先我们需要一个带有轮廓的DIV作为背景图片。然后我们放入4个图片到这个DIV,所有都一样的大小,每一个乐队成员都高亮。这些图片 缺省被隐藏。然后在DIV的顶端你绝对定位4个区域;这些是滚动的链接区域。使用jQUery,我们将应用悬浮事件到它们,并且淡入正确的图片。
9. UX trick: display form data as tabular data
这是一个帮助你提高用户表单体验的小技巧。它通过一个可读的表格式数据显示可编辑的表单数据。
10.使用HTML5表单
这篇文章教你如何使用高级CSS和CSS3来生成一个漂亮的HTML5表单。读过这篇文章你绝对会有重新设计表单样式的冲动。
来源: 分享10个实用的代码书写技巧,窍门和点子
感谢 gbin1.com 的投稿