本文给出了一些CSS/jQuery编程的技术、思路和技巧,希望能够在视觉效果、布局和Web表单设计方面对你有所帮助。
1. 完美的整页背景图片
该技术是以一张图片来填充页面,不会有空白部分。可以根据需要来调节图片的尺寸和约束比例,使用滚动条也不会影响页面显示。
![](http://dl.iteye.com/upload/attachment/607861/defabb61-6a00-3698-b8c8-a2039b2329f7.jpg)
2. 创建CSS大背景
教程中的大量CSS示例教你如何用单图或双图来创建大背景。
![](http://dl.iteye.com/upload/attachment/607863/74391dd6-45c1-3789-a2d5-2c553e87570f.jpg)
3. 创建等高列的四种方法
本文介绍的方法可以在所有主流浏览器上(包括IE6)创建等高列。文中演示的是创建三栏布局的等高列。
![](http://dl.iteye.com/upload/attachment/607865/17e71e74-31b3-3632-90a0-cb1617543099.jpg)
4. 使用纯CSS创建旋转的可乐瓶效果
这是Román Cortés的rolling CSS coke can的例子,只利用background-attachment、background-position和一些简单的技巧便实现了此效果,并不需要华丽的CSS3。
![](http://dl.iteye.com/upload/attachment/607867/8270850f-15d7-3c07-be5b-44757f9f7728.jpg)
5. 三个简单快速的模拟图像裁剪技术
该教程总结了只显示一部分图像的CSS技术,使用该技术能让你得到固定大小的图片(比如新闻栏中的缩略图),并控制到底显示图片的哪一部分。
![](http://dl.iteye.com/upload/attachment/607869/0a8084d8-c30d-3146-9612-01663e02be06.jpg)
6. 用CSS3和jQuery创建背景虚化效果
本教程教你如何用CSS3创建背景虚化效果,再加上一些jQuery的代码便能为该效果随意设置颜色、大小和位置等。
![](http://dl.iteye.com/upload/attachment/607871/3b67bac2-fb38-3c1d-a824-6b99cc44ac66.jpg)
7. 剪影淡出插件
实现此效果,首先需要创建包括背景图(剪影)的DIV,在DIV里放入和剪影大小一样的4个图像,使用绝对定位并默认隐藏。在DIV的顶部设置四个区域作为roll-over链接域,使用 jQuery 鼠标悬停事件淡入图像。
![](http://dl.iteye.com/upload/attachment/607873/6a396d4d-de12-39cb-9160-a8ad740a5a68.jpg)
8. UX技巧:以列表形式显示表单数据
这个小技巧用以增强表单的用户体验,将可编辑的表单数据显示为可读的列表数据。
![](http://dl.iteye.com/upload/attachment/607875/47434e5d-7658-3df4-a140-035eb748248c.jpg)
9. HTML5 表单的设置
如何运用先进的CSS和最新的CSS3技术来设计一个美观的HTML5表单?看过这些教程后你绝对会对你的表单设计有新的想法。
![](http://dl.iteye.com/upload/attachment/607877/b49e9d65-8039-304d-92c1-bae6259a79b6.jpg)