CSS实例:CSS制作的像素图- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS实例:CSS制作的像素图

CSS样式表: CSS网页布局; 知道吗？H1标签同样也可以美化; CSS:用overflow代替left截取指定长度字符串; 学习CSS了解单位em和px的区别; 巧用CSS滤镜制作绚丽图片播放效果; PDF、ZIP、DOC链接的标注(CSS技巧); DIV CSS制作网页时易犯的错误总结; CSS隐藏网页文字的几种常用方法; 总结新手学CSS容易出现错误的内容; 网站配色,CSS主色调配色方案; 我们需要对CSS进行缩写的原因; 从三方面加速CSS样式作用网页速度; CSS属性选择器的四种格式; CSS教程:text-indent隐藏文字出现虚线框outline; 表单name与id的区别和相似之处; CSS让网页里的提交按钮变得更漂亮; 小技巧:网页制作中段落缩进的方法; 网页导航上用CSS标志当前页效果; CSS框架的利与弊（上）; Web标准:关于DOCTYPE

No. « ‹ 7 8 9 10 › »

技术文章搜索

关键字

CSS样式表中的 CSS实例:CSS制作的像素图

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-28 浏览: 40 ::

收藏到网摘: n/a

CSS教程:div仿框架方法点击网页超级链接虚线怎么去除？

嗯，你可以说我很无聊。
最近疯狂加班，今天才得以有时间搞一个CSS的像素图来消遣休息下。

先看效果：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>像素图色青蛙</title> <style type="text/css"> /* For: pixe img Author: San Date: 2009-05-13 */ body{ background:#fff; } .pixe{ position:relative; width:16px; height:16px; } .pixe em{ position:absolute; font-size:1px; line-height:1px; } /* row 0 */ .r0c2-21{ top:0; left:2px; width:2px; height:1px; background:#000; } .r0c5-21{ top:0; left:5px; width:2px; height:1px; background:#000; } .r0c8-21{ top:0; left:8px; width:2px; height:1px; background:#000; } .r0c11-21{ top:0; left:11px; width:2px; height:1px; background:#000; } /* row 1 */ .r1c1-11{ top:1px; left:1px; height:1px; width:1px; background:#000; } .r1c3-21{ top:1px; left:3px; width:2px; height:1px; background:#000; } .r1c5-11{ top:1px; left:5px; width:1px; height:1px; background:#f00; } .r1c6-11{ top:1px; left:6px; width:1px; height:1px; background:#000; } .r1c8-11{ top:1px; left:8px; width:1px; height:1px; background:#000; } .r1c10-21{ top:1px; left:10px; width:2px; height:1px; background:#000; } .r1c12-11{ top:1px; left:12px; width:1px; height:1px; background:#f00; } .r1c13-11{ top:1px; left:13px; width:1px; height:1px; background:#000; } /* row 2*/ .r2c0-14{ top:2px; left:0px; width:1px; height:4px; background:#000; } .r2c2-54{ top:2px; left:2px; width:5px; height:4px; background:#f00; } .r2c7-14{ top:2px; left:7px; width:1px; height:4px; background:#000; } .r2c9-54{ top:2px; left:9px; width:5px; height:4px; background:#f00; } .r2c14-14{ top:2px; left:14px; width:1px; height:4px; background:#000; } /* row 3 */ .r3c1-12{ top:3px; left:1px; width:1px; height:2px; background:#ff8080; } .r3c8-12{ top:3px; left:8px; width:1px; height:2px; background:#ff8080; } .r3c15-14{ top:3px; left:15px; width:1px; height:4px; background:#b4b4b4; } /* row 5 */ .r5c1-11{ top:5px; left:1px; width:1px; height:1px; background:#e4b4b4; } /* row 6 */ .r6c1-21{ top:6px; left:1px; width:2px; height:1px; background:#000; } .r6c3-21{ top:6px; left:3px; width:2px; height:1px; background:#f00; } .r6c5-21{ top:6px; left:5px; width:2px; height:1px; background:#000; } .r6c7-11{ top:6px; left:7px; width:1px; height:1px; background:#ff0; } .r6c8-21{ top:6px; left:8px; width:2px; height:1px; background:#000; } .r6c10-21{ top:6px; left:10px; width:2px; height:1px; background:#f00; } .r6c12-21{ top:6px; left:12px; width:2px; height:1px; background:#000; } .r6c14-11{ top:6px; left:14px; width:1px; height:1px; background:#b4b4b4; } /* row 7 */ .r7c0-16{ top:7px; left:0px; width:1px; height:6px; background:#000; } .r7c1-16{ top:7px; left:1px; width:1px; height:6px; background:#d0b000; } .r7c2-16{ top:7px; left:2px; width:1px; height:6px; background:#ffd700; } .r7c3-21{ top:7px; left:3px; width:2px; height:1px; background:#000; } .r7c5-51{ top:7px; left:5px; width:5px; height:1px; background:#ff0; } .r7c10-21{ top:7px; left:10px; width:2px; height:1px; background:#000; } .r7c12-15{ top:7px; left:12px; width:1px; height:5px; background:#ffffaf; } .r7c13-16{ top:7px; left:13px; width:1px; height:6px; background:#fff; } .r7c14-16{ top:7px; left:14px; width:1px; height:6px; background:#000; } /*row 8 */ .r8c3-94{ top:8px; left:3px; width:9px; height:4px; background:#ff0; } .r8c15-16{ top:8px; left:15px; width:1px; height:6px; background:#b4b4b4; } /* row 9 */ .r9c6-12{ top:9px; left:6px; width:1px; height:2px; background:#f00; } .r9c8-12{ top:9px; left:8px; width:1px; height:2px; background:#f00; } .r10c7-12{ top:10px; left:7px; width:1px; height:2px; background:#f00; } .r12c3-121{ top:12px; left:3px; width:11px; height:1px; background:#ffd700; } /*row 13 */ .r13c1-11{ top:13px; left:1px; width:1px; height:1px; background:#000; } .r13c2-111{ top:13px; left:2px; width:11px; height:1px; background:#d0b000; } .r13c13-11{ top:13px; left:13px; width:1px; height:1px; background:#000; } .r13c14-21{ top:13px; left:14px; width:2px; height:1px; background:#b4b4b4; } /* row 14 */ .r14c2-111{ top:14px; left:2px; width:11px; height:1px; background:#000; } .r14c13-21{ top:14px; left:13px; width:2px; height:1px; background:#b4b4b4; } /* row 15 */ .r15c3-111{ top:15px; left:3px; width:11px; height:1px; background:#b4b4b4; } </style> </head> <body> <div class="pixe">                                                                                                       </div> </body> </html>
[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像素青蛙。

CSS教程:div仿框架方法点击网页超级链接虚线怎么去除？

CSS样式表 中的 CSS实例:CSS制作的像素图

评论 (0) All

CSS样式表中的 CSS实例:CSS制作的像素图