CSS教程之CSS实例：用CSS制造网页像素画

只看该作者 · 发表于 2015-1-16 00:01:33

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

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

x

你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
破洛洛文章简介：在CSSplay网站看到有一组CSS像素画，因而也想摩仿一下，因而在收集上找到一组头像图标，看其布局对照复杂，就拿它开刀吧！
在cssplay网站看到有一组CSS像素画，因而也想摩仿一下，因而在收集上找到一组头像图标，看其布局对照复杂，就拿它开刀吧！先看看预览图

登录/注册后可看大图

图一

基础道理：
没有甚么手艺含量，次要是使用背景致和边框色来衬着每个像素点，加上相对定位，就能够变更出分歧的作风。在制造一幅图片之前最好是将图片口角作风化，然后用PS缩小图片，将各个点的地位盘算准确。剩下的事变就是无量的耐烦和仔细了。
演示：
运转代码框
<!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>纯CSS像素画(冰山顶颠峰:http://www.ckuyun.com/binyong)</title><styletype="text/css">*{margin:0;padding:0;font-size:12px;}body{background:#555;}#wrapper{width:500px;margin:0auto;border-left:4px#888solid;border-right:4px#888solid;background:#fff;padding-bottom:50px;}#corner{position:relative;}#cornerem,#cornerb,#cornerstrong,#corneri,#cornerspan{display:block;border-top:67pxgreensolid;border-right:67pxtransparentdotted;width:0;height:0;overflow:hidden;}#cornerb{border-width:65px;border-top-color:red;position:absolute;top:0;left:0;}#cornerem{border-width:63px;border-top-color:orange;position:absolute;top:0;left:0;}#corneri{border-width:37px;border-top-color:orange;position:absolute;top:0;left:0;}#cornerstrong{border-width:35px;border-top-color:red;position:absolute;top:0;left:0;}#cornerspan{border-width:33px;border-top-color:#fff;position:absolute;top:0;left:0;}#cornera{position:absolute;display:block;width:10px;height:10px;font-size:12px;color:#fff;font-weight:bold;text-decoration:none;}#cornera#b1{left:34px;top:3px;}#cornera#b2{left:18px;top:18px;}#cornera#b3{left:3px;top:33px;}h1{width:150px;height:100px;line-height:100px;color:#2f231a;font-size:16px;margin:0pxauto;position:relative;}h1b{color:#b2c63a;font-size:16px;font-style:normal;left:-1px;position:absolute;top:-1px;}h1strong{position:absolute;top:25px;left:30px;height:22px;}h2{border-bottom:1pxorangesolid;line-height:30px;padding-left:10px;background:#FFC966;color:#7C66FF;text-align:center;}.blog{background:#2f231a;}.bloga:link,.bloga:visited{color:#fff;}.context{height:380px;}/*-----------------------------------像素画款式---------------------------------------------*/.context{width:240px;margin:0pxauto;}.text{margin:0auto;width:400px;height:100px;line-height:100px;}.box{width:50px;height:50px;float:left;border-left:4pxredsolid;border-top:4pxbluesolid;border-bottom:4pxorangesolid;border-right:4pxgreensolid;margin-right:20px;margin-bottom:20px;}.contextspan,.contextb,.contextem,.contextstrong{display:block;font=weight:normal;font-style:normal;position:absolute;overflow:hidden;}.panda1{width:41px;height:37px;position:relative;margin:5pxauto;}/*色彩计划，改动以下色彩能够改动全部熊猫的首色----------------------*//*熊猫脸的色彩*/.t1,.t2,.t3,.t4,.tm1,.t5,.m6,.m9,.b12{background:#000;}.tm,.m7,.m8,.b10,.b11{border-color:#000;}/*熊猫眼睛色彩*/.e_l1,.e_r1,.e_l2,.e_r2,.e_l3,.e_r3{background:#000;}.e_m1{border-color:#000;}/*背景色彩*/.box,.panda1,.tm,.m7,.m8,.b10,.b11,.e_m1{background:#fff;}/*---------------------------------------------------------*//*脸表面----------------*//*上额*/.t1{width:10px;height:8px;top:0px;left:2px;z-index:1;}.t2{width:8px;height:8px;top:2px;left:0px;z-index:2;}.tm{width:13px;height:2px;top:2px;left:12px;border-left:2pxsolid;border-right:2pxsolid;}.tm1{width:17px;height:2px;top:4px;left:12px;}.t4{width:10px;height:8px;top:0px;left:29px;z-index:3;}.t5{width:8px;height:8px;top:2px;left:33px;z-index:4;}/*脸两侧*/.m6{width:2px;height:14px;top:14px;left:0px;}.m7{width:2px;height:14px;border-top:4pxsolid;border-bottom:4pxsolid;top:10px;left:2px;}.m8{width:2px;height:14px;border-top:4pxsolid;border-bottom:4pxsolid;top:10px;right:2px;}.m9{width:2px;height:14px;top:14px;right:0px;}/*下巴*/.b10{width:28px;height:2px;border-left:2pxsolid;border-right:2pxsolid;top:32px;left:4px;}.b11{width:20px;height:2px;border-left:4pxsolid;border-right:4pxsolid;top:34px;left:6px;}.b12{width:20px;height:3px;top:36px;left:10px;}/*眼睛*/.e_l1,.e_r1{width:8px;height:8px;top:14px;}.e_l2,.e_r2{width:6px;height:8px;top:16px;}.e_l3,.e_r3{width:2px;height:4px;top:18px;}.e_l1{left:9px;}.e_l2{left:7px;}.e_l3{left:5px;}.e_m1{width:2px;height:4px;top:16px;left:17px;border-left:1pxsolid;border-right:2pxsolid;}.e_r1{left:22px;}.e_r2{left:27px;}.e_r3{left:33px;}/*鼻涕*/.n1{width:1px;height:8px;top:24px;left:16px;background:#FCDAEC;}.n2{width:1px;height:8px;top:24px;left:17px;background:#BC163C;}.n3{width:2px;height:7px;top:24px;left:20px;background:#BC163C;}/*第二幅画*/.a1,.a6{width:4px;height:10px;top:24px;left:7px;background:#3399CC;}.a2,.a5{width:2px;height:12px;top:24px;left:10px;background:#3399CC;}.a3,.a4{width:4px;height:14px;top:22px;left:12px;background:#3399CC;}.a4{width:4px;left:23px;}.a5{width:3px;height:12px;left:27px;}.a6{height:10px;width:4px;left:29px;}.a7{width:8px;height:1px;top:30px;left:15px;background:#000;}.a8{width:1px;height:2px;top:28px;left:19px;background:#000;border-bottom:1px#fffsolid;}/*第三幅画*/.b1{width:10px;height:2px;top:30px;left:15px;background:#000;}.b2{width:10px;height:2px;top:28px;left:13px;background:#fff;border-left:2px#000solid;border-right:2px#000solid;}.b3{width:14px;height:2px;top:26px;left:4px;background:#fff;border-left:9px#DFC2D3solid;border-right:9px#DFC2D3solid;}/*第四幅画*/.c1{width:18px;height:2px;top:26px;left:4px;background:#fff;border-left:7px#DFC2D3solid;border-right:7px#DFC2D3solid;}.c2{width:18px;height:2px;top:28px;left:6px;background:#fff;border-left:5px#DFC2D3solid;border-right:5px#DFC2D3solid;}.c3{width:2px;height:10px;top:28px;left:19px;background:#000;}/*第五幅画*/.d1{width:22px;height:2px;top:26px;left:9px;background:#000;}.d2{width:10px;height:6px;top:28px;left:13px;background:#D32147;border-left:2px#000solid;border-right:2px#000solid;}.d3{width:6px;height:2px;top:34px;left:15px;background:#D32147;border-left:2px#000solid;border-right:2px#000solid;}.d4{width:2px;height:4px;top:28px;left:19px;background:#000;}/*第六幅画*/.e1{width:18px;height:4px;top:26px;left:9px;background:#fff;border-top:2px#000solid;border-left:2px#000solid;border-right:2px#000solid;}.e2{width:14px;height:1px;top:32px;left:11px;background:#fff;border-left:2px#000solid;border-right:2px#000solid;}.e3{width:14px;height:2px;top:33px;left:13px;background:#000;}.e4{width:3px;height:4px;top:28px;left:15px;background:#000;}/*第七幅画*/.f1{width:18px;height:2px;top:26px;left:4px;background:#fff;border-left:7px#DFC2D3solid;border-right:7px#DFC2D3solid;}.f2{width:18px;height:2px;top:28px;left:6px;background:#fff;border-left:5px#DFC2D3solid;border-right:5px#DFC2D3solid;}.f3{width:12px;height:2px;top:32px;left:14px;background:#000;}/*汗滴*/.f-r1,.f-r2,.f-r3,.f-r4{background:#58B3D7;}.f-r1{width:2px;height:25px;top:0px;right:6px;z-index:100;}.f-r2{width:6px;height:18px;top:6px;right:4px;z-index:101;}.f-r3{width:10px;height:12px;top:10px;right:2px;z-index:102;}.f-r4{width:12px;height:6px;top:14px;right:1px;z-index:103;}/*第八幅画*/.g1{top:22px;}.g2{top:20px;}.g3{top:22px;}.j1{top:24px;}.h1{top:22px;}.h2{top:20px;}.h3{top:22px;}.i1{width:2px;height:4px;top:18px;left:16px;border-left:2px#000solid;border-right:2px#000solid;background:#fff;}.i2{width:2px;height:2px;top:8px;right:11px;border-left:2px#000solid;border-right:2px#000solid;background:#fff;}.i3{width:2px;height:2px;top:10px;right:9px;border-left:4px#000solid;border-right:4px#000solid;background:#fff;}.i4{width:2px;height:2px;top:14px;right:9px;border-left:4px#000solid;border-right:4px#000solid;background:#fff;}.i5{width:2px;height:2px;top:16px;right:11px;border-left:2px#000solid;border-right:2px#000solid;background:#fff;}/*第九幅画*/.k0{width:2px;height:4px;top:16px;left:17px;border-left:2px#000solid;border-right:2px#000solid;background:#fff;z-index:15;}.k1{width:6px;height:8px;top:14px;left:8px;border-left:9px#000solid;border-right:9px#000solid;background:#fff;z-index:12;}.k2{width:12px;height:8px;top:16px;left:0px;border-left:14px#000solid;border-right:14px#000solid;background:#fff;z-index:11;}.k3{width:16px;height:2px;top:24px;left:4px;border-left:8px#000solid;border-right:8px#000solid;background:#fff;z-index:16;}.k4{width:2px;height:2px;top:18px;left:6px;background:#fff;z-index:17}.k5{width:2px;height:2px;top:18px;right:6px;background:#fff;z-index:18}.k6{width:10px;height:2px;top:30px;left:15px;background:#000;z-index:18}.k7{width:10px;height:2px;top:32px;left:13px;border-left:2px#000solid;border-right:2px#000solid;background:#fff;z-index:18}</style></head><body><divid="wrapper"><divid="corner"><ahref="http://www.ckuyun.com/binyong"id="b1">冰</a><ahref="http://www.ckuyun.com/binyong"id="b2">极</a><ahref="http://www.ckuyun.com/binyong"id="b3">峰</a></div><h1>纯CSS像素画浏览纯CSS像素画浏览原创：冰山顶颠峰</h1><h2class="blog">Blog地点:<ahref="http://www.ckuyun.com/binyong">http://www.ckuyun.com/binyong</a></h2><divclass="text">道理：使用背景致，边框，再加上定位，别的必要的是非常的耐烦和仔细。</div><divclass="context"><divclass="box"><divclass="panda1"><bclass="t1"><bclass="t2"><bclass="tm"><bclass="tm1"><bclass="t4"><bclass="t5"><bclass="m6"><bclass="m7"><bclass="m8"><bclass="m9"><bclass="b10"><bclass="b11"><bclass="b12"><bclass="e_l1"><bclass="e_l2"><bclass="e_l3"><bclass="e_m1"><bclass="e_r1"><bclass="e_r2"><bclass="e_r3"><bclass="n1"><bclass="n2"><bclass="n3"></div></div><divclass="box"><divclass="panda1"><bclass="t1"><bclass="t2"><bclass="tm"><bclass="tm1"><bclass="t4"><bclass="t5"><bclass="m6"><bclass="m7"><bclass="m8"><bclass="m9"><bclass="b10"><bclass="b11"><bclass="b12"><bclass="e_l1"><bclass="e_l2"><bclass="e_l3"><bclass="e_m1"><bclass="e_r1"><bclass="e_r2"><bclass="e_r3"><bclass="a1"><bclass="a2"><bclass="a3"><bclass="a4"><bclass="a5"><bclass="a6"><bclass="a7"><bclass="a8"></div></div><divclass="box"><divclass="panda1"><bclass="t1"><bclass="t2"><bclass="tm"><bclass="tm1"><bclass="t4"><bclass="t5"><bclass="m6"><bclass="m7"><bclass="m8"><bclass="m9"><bclass="b10"><bclass="b11"><bclass="b12"><bclass="e_l1"><bclass="e_l2"><bclass="e_l3"><bclass="e_m1"><bclass="e_r1"><bclass="e_r2"><bclass="e_r3"><bclass="b1"><bclass="b2"><bclass="b3"></div></div><divclass="box"><divclass="panda1"><bclass="t1"><bclass="t2"><bclass="tm"><bclass="tm1"><bclass="t4"><bclass="t5"><bclass="m6"><bclass="m7"><bclass="m8"><bclass="m9"><bclass="b10"><bclass="b11"><bclass="b12"><bclass="e_l1"><bclass="e_l2"><bclass="e_l3"><bclass="e_m1"><bclass="e_r1"><bclass="e_r2"><bclass="e_r3"><bclass="c1"><bclass="c2"><bclass="c3"></div></div><divclass="box"><divclass="panda1"><bclass="t1"><bclass="t2"><bclass="tm"><bclass="tm1"><bclass="t4"><bclass="t5"><bclass="m6"><bclass="m7"><bclass="m8"><bclass="m9"><bclass="b10"><bclass="b11"><bclass="b12"><bclass="e_l1"><bclass="e_l2"><bclass="e_l3"><bclass="e_m1"><bclass="e_r1"><bclass="e_r2"><bclass="e_r3"><bclass="d1"><bclass="d2"><bclass="d3"><bclass="d4"></div></div><divclass="box"><divclass="panda1"><bclass="t1"><bclass="t2"><bclass="tm"><bclass="tm1"><bclass="t4"><bclass="t5"><bclass="m6"><bclass="m7"><bclass="m8"><bclass="m9"><bclass="b10"><bclass="b11"><bclass="b12"><bclass="e_l1"><bclass="e_l2"><bclass="e_l3"><bclass="e_m1"><bclass="e_r1"><bclass="e_r2"><bclass="e_r3"><bclass="e1"><bclass="e2"><bclass="e3"><bclass="e4"></div></div><divclass="box"><divclass="panda1"><bclass="t1"><bclass="t2"><bclass="tm"><bclass="tm1"><bclass="t4"><bclass="t5"><bclass="m6"><bclass="m7"><bclass="m8"><bclass="m9"><bclass="b10"><bclass="b11"><bclass="b12"><bclass="e_l1"><bclass="e_l2"><bclass="e_l3"><bclass="e_m1"><bclass="e_r1"><bclass="e_r2"><bclass="e_r3"><bclass="f1"><bclass="f2"><bclass="f3"><bclass="f-r1"><bclass="f-r2"><bclass="f-r3"><bclass="f-r4"></div></div><divclass="box"><divclass="panda1"><bclass="t1"><bclass="t2"><bclass="tm"><bclass="tm1"><bclass="t4"><bclass="t5"><bclass="m6"><bclass="m7"><bclass="m8"><bclass="m9"><bclass="b10"><bclass="b11"><bclass="b12"><bclass="e_l1g1"><bclass="e_l2g2"><bclass="e_l3g3"><bclass="e_m1j1"><bclass="e_r1h1"><bclass="e_r2h2"><bclass="e_r3h3"><bclass="i1"><bclass="i2"><bclass="i3"><bclass="i4"><bclass="i5"></div></div><divclass="box"><divclass="panda1"><bclass="t1"><bclass="t2"><bclass="tm"><bclass="tm1"><bclass="t4"><bclass="t5"><bclass="m6"><bclass="m7"><bclass="m8"><bclass="m9"><bclass="b10"><bclass="b11"><bclass="b12"><bclass="k0"><bclass="k1"><bclass="k2"><bclass="k3"><bclass="k4"><bclass="k5"><bclass="k6"><bclass="k7"></div></div></div></div></div></body></html>
[Ctrl+A全体选择提醒：你可先修正部分代码，再按运转]

表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。

只看该作者 · 发表于 2015-1-17 23:52:46

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。

只看该作者 · 发表于 2015-1-26 23:50:41

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

只看该作者 · 发表于 2015-2-5 04:59:03

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

只看该作者 · 发表于 2015-2-11 06:19:44

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只看该作者 · 发表于 2015-3-1 23:52:28

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

只看该作者 · 发表于 2015-3-11 02:36:44

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

只看该作者 · 发表于 2015-3-17 20:07:11

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

只看该作者 · 发表于 2015-3-24 23:38:50

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

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

[DIV+CSS] CSS教程之CSS实例：用CSS制造网页像素画

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

相关帖子

浏览过的版块