“联合缴费系统”为文字--隐藏
帐号、密码、验证码、登陆、重置等为文字--隐藏
网格及后面的白色背景那一块--单独切片导出成GIF（颜色数可以选32左右），这样就非常小
按钮---单独切片导出成JPG（品质可以选40-60，自己看左侧效果）
“联合缴费系统”上面的圆角约5个像素高度那一行--单独切片导出成JPG
LOGO--单独导出成JPG
蓝色的左边框和右边框--单独切片导出成JPG（高度只需1像素，左右边框连白色背景一起切）
底部圆角轮廓--单独切片导出成JPG（高度切5像素，连白色背景一起切）
联合缴费系统后面的渐变背景--单独切片导出成GIF（宽度为1像素、高度为从亮部到暗部的整个渐变）
上面这些切片导出要在“存储为web和设备所用格式”中导出。
关于制作：
上面图像导出后应该是非常小了，做成网页应该也不难，因为时间问题我就不制作了。
有不懂的再交流吧！
从你的话中我模模糊糊听懂了那么一点，我建议你选择你所说的“针对样式的功能写样式”，其实样式CSS只需要写一个就可以，只要你写的CSS文件不超过30K，那么建议你尽量将CSS代码都存在一个CSS文件中，但是如果你怕自己分不清或者难以找到自己想要修改的CSS文件，你也可以分别建立CSS，如首页使用的CSS就可以命名为index.css，列表页可以命名为list.css等等。这样一看就知道是哪里的样式了关于CSS的特效,大部分都是使用了hover事件,或者你再完成一些特殊要求的时候,你会使用mouseenter和mouseleave来代替hover,我就遇到过一种就是鼠标移开时,悬浮显示的元素依然占了文档流,而且你不能使用display:none来隐藏他,这样的话,过渡效果会受到影响!
最简单的hover写法,淡入淡出,关键在于pointer-events的使用,保证淡入淡出都有过渡效果的同时,子元素不会被父元素hover事件所影响!
