繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS实例:CSS制作的像素图
- CSS样式表
- 网页布局教程:掌握CSS网页布局属性
- WEB标准的CSS网页布局技巧5则
- 你怎么书写CSS代码？
- CSS教程：表单元素不继承body的字体属性
- 调整CSS的方式给滚动条换色
- CSS网页布局中表格制作实例
- 网页设计学习教程:CSS盒模型
- 网页制作学习教程:CSS Position
- 网页九宫格布局:应用透明的外圆角
- CSS网页布局学习的参考诀窍
- 把网页按钮伪装成超链接
- CSS教程:检验CSS书写是否标准合理
- 你的网页最好通过HTML校验和CSS校验
- 网页制作教程:CSS的好处
- 网页制作心得:分离之后怎么做？
- CSS教程:数字和字母将容器撑大问题解决
- CSS Sprites优化网页代码的方法
- CSS实例:精简代码的兼容各浏览器的滑动门
- CSS网页制作技巧:提高CSS可阅读性
- 英文教程:CSS的Float
CSS样式表 中的 CSS实例:CSS制作的像素图
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 66 ::
收藏到网摘: n/a
嗯，你可以说我很无聊。
最近疯狂加班，今天才得以有时间搞一个CSS的像素图来消遣休息下。
先看效果：
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
以图片中的色青蛙为例子。
16X16的像素图，所以使用了如下的命名方法：
r N c N - NN = r[0-15]c[0-15]
(r = rol, c-col, N为自然数:0-15 )
1.命名的规则抄袭了XXX栅格化的那篇文章。
r0c1 即表示：0 横列 1 纵列，也是top跟left的值
NN表示：W H （宽和高）
(觉得最好是使用连字符这样对于10以上的数字，可以直接看出来宽和高的数值，我的这个就不优化了 ：P)
2.使用相对定位给个基点，然后使用绝对定位的top和left来控制数值，直接对应rNcN，方便快捷的对应起来。比如：
.r0c8-21{
top:0; /* 对应row的第0行 */
left:8px; /* 对应col的第8列 */
width:2px; /* 对应width的2px */
height:1px;/* 对应height的1px */
background:#000;
}
.r2c0-14{
top:2px;
left:0px;
width:1px;
height:4px;
background:#000;
}
3.使用PS的信息结合坐标方便查找r和c的值
各位有兴趣，可以做其他的CSS像素青蛙。
评论 (0) All
