DIV教程之CSS实例:CSS制造的像素图

只看该作者 · 发表于 2015-1-15 23:56:35

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
网页制造poluoluo文章简介：比来猖狂加班，明天才得以偶然间弄一个CSS的像素图来消遣歇息下。
嗯，你能够说我很无聊。
比来猖狂加班，明天才得以偶然间弄一个CSS的像素图来消遣歇息下。
先看效果：
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>像素图色田鸡</title><styletype="text/css">/*For:pixeimgAuthor:SanDate:2009-05-13*/body{background:#fff;}.pixe{position:relative;width:16px;height:16px;}.pixeem{position:absolute;font-size:1px;line-height:1px;}/*row0*/.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;}/*row1*/.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;}/*row2*/.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;}/*row3*/.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;}/*row5*/.r5c1-11{top:5px;left:1px;width:1px;height:1px;background:#e4b4b4;}/*row6*/.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;}/*row7*/.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;}/*row8*/.r8c3-94{top:8px;left:3px;width:9px;height:4px;background:#ff0;}.r8c15-16{top:8px;left:15px;width:1px;height:6px;background:#b4b4b4;}/*row9*/.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;}/*row13*/.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;}/*row14*/.r14c2-111{top:14px;left:2px;width:11px;height:1px;background:#000;}.r14c13-21{top:14px;left:13px;width:2px;height:1px;background:#b4b4b4;}/*row15*/.r15c3-111{top:15px;left:3px;width:11px;height:1px;background:#b4b4b4;}</style></head><body><divclass="pixe"><emclass="r0c2-21"><emclass="r0c5-21"><emclass="r0c8-21"><emclass="r0c11-21"><emclass="r1c1-11"><emclass="r1c3-21"><emclass="r1c5-11"><emclass="r1c6-11"><emclass="r1c8-11"><emclass="r1c10-21"><emclass="r1c12-11"><emclass="r1c13-11"><emclass="r2c0-14"><emclass="r2c2-54"><emclass="r2c7-14"><emclass="r2c9-54"><emclass="r2c14-14"><emclass="r3c1-12"><emclass="r3c8-12"><emclass="r3c15-14"><emclass="r5c1-11"><emclass="r6c1-21"><emclass="r6c3-21"><emclass="r6c5-21"><emclass="r6c7-11"><emclass="r6c8-21"><emclass="r6c10-21"><emclass="r6c12-21"><emclass="r6c14-11"><emclass="r7c0-16"><emclass="r7c1-16"><emclass="r7c2-16"><emclass="r7c3-21"><emclass="r7c5-51"><emclass="r7c10-21"><emclass="r7c12-15"><emclass="r7c13-16"><emclass="r7c14-16"><emclass="r8c3-94"><emclass="r8c15-16"><emclass="r9c6-12"><emclass="r9c8-12"><emclass="r10c7-12"><emclass="r12c3-121"><emclass="r13c1-11"><emclass="r13c2-111"><emclass="r13c13-11"><emclass="r13c14-21"><emclass="r14c13-21"><emclass="r14c2-111"><emclass="r15c3-111"></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]
以图片中的色田鸡为例子。

登录/注册后可看大图

16X16的像素图，以是利用了以下的定名办法：
rNcN-NN=r[0-15]c[0-15]
(r=rol,c-col,N为天然数:0-15)
1.定名的划定规矩剽窃了XXX栅格化的那篇文章。
r0c1即暗示：0横列1纵列，也是top跟left的值
NN暗示：WH（宽和高）
(以为最好是利用连字符如许关于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像素田鸡。

这工具比表格好的唯一就是你可以定义一个ID，想怎么玩它就怎么玩他，表格用来处理显示数据，DIV+css+TABLE就行了，都什么年代了，以前没有DIV，而且386的年代不也一样，现在都奔腾4了

只看该作者 · 发表于 2015-1-17 22:57:33

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-1-21 13:10:17

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

只看该作者 · 发表于 2015-1-30 19:11:16

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

只看该作者 · 发表于 2015-2-6 15:20:46

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

只看该作者 · 发表于 2015-2-16 21:30:10

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

只看该作者 · 发表于 2015-3-5 10:19:50

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-3-12 05:06:54

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。

只看该作者 · 发表于 2015-3-19 18:31:24

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] DIV教程之CSS实例:CSS制造的像素图

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子