CSS 像素图制作攻略- CSS样式表 - 软晨网（RuanChen.com）

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

CSS样式表: 网页设计关于WEB标准的相关问题汇总; 项目管理:交互-设计-制作三个角色的组合; 学习CSS制作网页总结的一些经验; 多个CSS样式表争夺特定选择符的控制权; 网页设计制作CSS实现隔行换色两种方法; CSS教程:DIV底部放置文字; CSS教程:CSS命名参考; CSS教程:控制网页文件大小通过精简CSS实现; CSS教程:关于文字溢出问题的研究; 符合web标准的嵌入Flash的方法; 学习WEB标准必备的四项技能; CSS对表格单元格强制换行和不换行; CSS制作符合网站标准的细线表格; 区分IE6,IE7和firefox的CSS hack; CSS教程:学习CSS的继承性; CSS教程:CSS兼容的技巧; CSS教程:浮动元素对浏览器的支持; 闭合浮动元素让CSS代码更规范; 深入分析网页CSS隐藏文字和以图换字技术; 看懂《CSS hack浏览器兼容一览表》

No. « ‹ 10 11 12 13 › »

技术文章搜索

关键字

CSS样式表中的 CSS 像素图制作攻略

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 63 ::

收藏到网摘: n/a

css 横排实现代码 CSS 实现绝对底部一个完美解决方案

以图片中的色青蛙为例子。

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像素青蛙。

效果：

<!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=gb2312" />
<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">
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
&nbsp;
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

css 横排实现代码 CSS 实现绝对底部一个完美解决方案

CSS样式表 中的 CSS 像素图制作攻略

评论 (0) All

CSS样式表中的 CSS 像素图制作攻略