首页网页制作网络编程脚本专栏数据库网站运营网络安全平面设计 CMS教程

一个非常精典的纯CSS漫画,登峰造极.

所属分类：网页制作 / CSS 阅读数： 405

收藏 0赞 0分享

纯CSS打造的漫画，让枯燥变的活泼，让局限变的无限

有的人说没有意义，我觉得意义重大。
让枯燥变的活泼，让局限变的无限，请点击以下运行看演示。

<div style="width: 100%; height: 466px;"> <div style="float: left; border: 2px solid #000; line-height: normal; background-color: #fff;"> <div style="width: 6.23em; height: 7.7em; font-family: Verdana; font-size: 60px; overflow: hidden;"> <div style="margin-top: -0.7em"> <div style="position: absolute; padding-left: 1.56em; padding-top: 0.37em;"> <div style="font-size: 2.57em; font-weight: bold; color: #000;">o</div> </div> <div style="position: absolute; padding-left: 1.62em; padding-top: 0.53em;"> <div style="font-size: 2.38em; font-weight: bold; color: #fff;">o</div> </div> <div style="position: absolute; padding-left: 1.2em; padding-top: 0.67em;"> <div style="font-size: 2.48em; color: #000;">o</div> </div> <div style="position: absolute; padding-left: 1.29em; padding-top: 0.85em;"> <div style="font-size: 2.23em; color: #fff;">o</div> </div> <div style="position: absolute; padding-left: 1.57em; padding-top: 2.03em;"> <div style="width: 0.32em; height: 0.52em; background-color: #fff;"></div> </div> <div style="position: absolute; padding-left: 1.52em; padding-top: 1.56em;"> <div style="font-size: 0.8em; font-style: italic; color: #000;">(</div> </div> <div style="color: #000;"> <div style="position: absolute; padding-left: 1.07em; padding-top: 0.62em;"> <div style="font-size: 4.57em;">O</div> </div> <div style="position: absolute; padding-left: 1.05em; padding-top: 1.15em;"> <div style="font-size: 3.53em;">O</div> </div> <div style="position: absolute; padding-left: 1.12em; padding-top: 0.74em;"> <div style="font-size: 4.63em;">O</div> </div> <div style="position: absolute; padding-left: 1.08em; padding-top: 3.64em;"> <div style="font-size: 1.77em; font-weight: bold; font-style: italic;">\</div> </div> <div style="position: absolute; padding-left: 1.17em; padding-top: 4.8em;"> <div style="font-size: 3.29em; font-weight: bold; font-style: italic;">L</div> </div> <div style="position: absolute; padding-left: 3.14em; padding-top: 5.21em;"> <div style="font-size: 3.01em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div> </div> <div style="position: absolute; padding-left: 4.13em; padding-top: 3.23em;"> <div style="font-size: 0.7em; font-weight: bold;">O</div> </div> <div style="position: absolute; padding-left: 1.37em; padding-top: 5.08em;"> <div style="font-size: 0.97em; font-weight: bold;">O</div> </div> </div> <div style="color: #FED90E"> <div style="position: absolute; padding-left: 1.15em; padding-top: 0.76em;"> <div style="font-size: 4.37em;">O</div> </div> <div style="position: absolute; padding-left: 1.14em; padding-top: 1.26em;"> <div style="font-size: 3.37em;">O</div> </div> <div style="position: absolute; padding-left: 1.2em; padding-top: 0.87em;"> <div style="font-size: 4.42em;">O</div> </div> <div style="position: absolute; padding-left: 1.15em; padding-top: 3.61em;"> <div style="font-size: 1.7em; font-weight: bold; font-style: italic;">\</div> </div> <div style="position: absolute; padding-left: 1.24em; padding-top: 4.93em;"> <div style="font-size: 3.18em; font-weight: bold; font-style: italic;">L</div> </div> <div style="position: absolute; padding-left: 3.03em; padding-top: 5.05em;"> <div style="font-size: 3.2em; font-weight: bold; font-style: italic; height: 0.96em; overflow: hidden;">(</div> </div> <div style="position: absolute; padding-left: 4.18em; padding-top: 3.34em;"> <div style="font-size: 0.55em; font-weight: bold;">O</div> </div> </div> <div style="position: absolute; padding-left: 1.84em; padding-top: 2.37em;"> <div style="width: 1.92em; height: 5.76em; background-color: #FED90E;"></div> </div> <div style="position: absolute; padding-left: 3.70em; padding-top: 2.73em;"> <div style="width: .30em; height: 1.56em; background-color: #FED90E;"></div> </div> <div style="position: absolute; padding-left: 4.36em; padding-top: 3.51em;"> <div style="width: .16em; height: .34em; background-color: #FED90E;"></div> </div> <div style="position: absolute; padding-left: 1.62em; padding-top: 5.47em;"> <div style="font-size: 10px"> <div style="width: 2.6em; height: 3.0em; background-color: #FED90E;"></div> </div> </div> <div style="color: #000;"> <div style="position: absolute; padding-left: 1.23em; padding-top: 4.57em;"> <div style="font-size: 0.67em;"></div> </div> <div style="position: absolute; padding-left: 1.23em; padding-top: 4.37em;"> <div style="font-size: 0.67em;"></div> </div> <div style="position: absolute; padding-left: 1.34em; padding-top: 4.37em;"> <div style="font-size: 0.67em;">\</div> </div> <div style="position: absolute; padding-left: 1.4em; padding-top: 4.53em;"> <div style="font-size: 0.67em;">\</div> </div> <div style="position: absolute; padding-left: 1.55em; padding-top: 4.49em;"> <div style="font-size: 0.67em;"></div> </div> <div style="position: absolute; padding-left: 1.55em; padding-top: 4.19em;"> <div style="font-size: 0.67em;"></div> </div> <div style="position: absolute; padding-left: 1.66em; padding-top: 4.19em;"> <div style="font-size: 0.67em;">\</div> </div> <div style="position: absolute; padding-left: 1.76em; padding-top: 4.45em;"> <div style="font-size: 0.67em;">\</div> </div> <div style="position: absolute; padding-left: 1.27em; padding-top: 2.54em;"> <div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div> </div> <div style="position: absolute; padding-left: 1.51em; padding-top: 2.18em;"> <div style="font-size: 0.42em; font-weight: bold; font-style: italic;">\</div> </div> <div style="position: absolute; padding-left: 2.31em; padding-top: 5.32em;"> <div style="font-size: 1.47em; font-weight: bold; font-style: italic;">(</div> </div> <div style="position: absolute; padding-left: 2.29em; padding-top: 5.69em;"> <div style="font-size: 1.11em; font-weight: bold;">(</div> </div> <div style="position: absolute; padding-left: 2.92em; padding-top: 4.72em;"> <div style="font-size: 2.4em; font-weight: bold;">8</div> </div> <div style="position: absolute; padding-left: 2.43em; padding-top: 3.96em;"> <div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div> </div> <div style="position: absolute; padding-left: 2.31em; padding-top: 4.05em;"> <div style="font-size: 3.13em; font-weight: bold; font-style: italic;">o</div> </div> <div style="position: absolute; padding-left: 2.33em; padding-top: 4.37em;"> <div style="font-size: 3.06em; font-weight: bold;">o</div> </div> </div> <div style="color: #CDB26F"> <div style="position: absolute; padding-left: 2.39em; padding-top: 5.36em;"> <div style="font-size: 1.38em; font-weight: bold; font-style: italic;">(</div> </div> <div style="position: absolute; padding-left: 2.37em; padding-top: 5.75em;"> <div style="font-size: 1.04em; font-weight: bold;">(</div> </div> <div style="position: absolute; padding-left: 2.95em; padding-top: 4.82em;"> <div style="font-size: 2.25em; font-weight: bold;">8</div> </div> <div style="position: absolute; padding-left: 2.49em; padding-top: 4.15em;"> <div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div> </div> <div style="position: absolute; padding-left: 2.39em; padding-top: 4.22em;"> <div style="font-size: 2.93em; font-weight: bold; font-style: italic;">o</div> </div> <div style="position: absolute; padding-left: 2.4em; padding-top: 4.5em;"> <div style="font-size: 2.87em; font-weight: bold;">o</div> </div> </div> <div style="position: absolute; padding-left: 2.98em; padding-top: 6.09em;"> <div style="width: .76em; height: 1em; background-color: #CDB26F;"></div> </div> <div style="color: #000"> <div style="position: absolute; padding-left: 3.69em; padding-top: 4.28em;"> <div style="font-size: 2.2em;">o</div> </div> <div style="position: absolute; padding-left: 4.62em; padding-top: 5.42em;"> <div style="font-size: 1.01em;">)</div> </div> <div style="position: absolute; padding-left: 4.78em; padding-top: 5.72em;"> <div style="font-size: 0.72em;">)</div> </div> <div style="position: absolute; padding-left: 4.53em; padding-top: 5.65em;"> <div style="font-size: 0.94em;">b</div> </div> <div style="position: absolute; padding-left: 4em; padding-top: 5.09em;"> <div style="font-size: 1.59em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.33em; padding-top: 4.79em;"> <div style="font-size: 1.95em; font-weight: bold;">O</div> </div> <div style="position: absolute; padding-left: 3.15em; padding-top: 4.3em;"> <div style="font-size: 2.42em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.01em; padding-top: 4.46em;"> <div style="font-size: 2.23em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.88em; padding-top: 4.43em;"> <div style="font-size: 2.23em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.81em; padding-top: 4.71em;"> <div style="font-size: 1.9em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.69em; padding-top: 4.74em;"> <div style="font-size: 1.97em; font-weight: bold;">o</div> </div> </div> <div style="color: #CDB26F"> <div style="position: absolute; padding-left: 3.7em; padding-top: 4.4em;"> <div style="font-size: 2.06em;">o</div> </div> <div style="position: absolute; padding-left: 4.57em; padding-top: 5.44em;"> <div style="font-size: 0.95em;">)</div> </div> <div style="position: absolute; padding-left: 4.49em; padding-top: 5.66em;"> <div style="font-size: 0.88em;">b</div> </div> <div style="position: absolute; padding-left: 4.01em; padding-top: 5.14em;"> <div style="font-size: 1.48em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.37em; padding-top: 4.84em;"> <div style="font-size: 1.83em; font-weight: bold;">O</div> </div> <div style="position: absolute; padding-left: 3.21em; padding-top: 4.38em;"> <div style="font-size: 2.27em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.07em; padding-top: 4.54em;"> <div style="font-size: 2.09em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.95em; padding-top: 4.53em;"> <div style="font-size: 2.08em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.88em; padding-top: 4.78em;"> <div style="font-size: 1.78em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.71em; padding-top: 4.79em;"> <div style="font-size: 1.85em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.87em; padding-top: 4.59em;"> <div style="font-size: 1.93em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.09em; padding-top: 4.55em;"> <div style="font-size: 1.93em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.73em; padding-top: 5.03em;"> <div style="font-size: 1.44em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 2.59em; padding-top: 5.77em;"> <div style="font-size: 0.82em; font-weight: bold;">o</div> </div> <div style="position: absolute; padding-left: 3.04em; padding-top: 6.4em;"> <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div> </div> <div style="position: absolute; padding-left: 3.03em; padding-top: 6.4em;"> <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div> </div> <div style="position: absolute; padding-left: 3.02em; padding-top: 6.4em;"> <div style="font-size: 0.16em; font-weight: bold; font-style: italic; color: #000;">/</div> </div> </div> <div style="position: absolute; padding-left: 3.24em; padding-top: 2.49em;"> <div style="font-size: 2.76em; font-weight: bold; color: #000;">•</div> </div> <div style="position: absolute; padding-left: 3.34em; padding-top: 2.68em;"> <div style="font-size: 2.49em; font-weight: bold; color: #fff;">•</div> </div> <div style="position: absolute; padding-left: 4.2em; padding-top: 4.26em;"> <div style="font-size: 0.28em; font-weight: bold; color: #000;">•</div> </div> <div style="position: absolute; padding-left: 3.9em; padding-top: 4.05em;"> <div style="font-size: 1.47em; font-weight: bold; color: #000;">•</div> </div> <div style="position: absolute; padding-left: 3.99em; padding-top: 4.23em;"> <div style="font-size: 1.2em; font-weight: bold; color: #FED90E;">•</div> </div> <div style="position: absolute; padding-left: 3.66em; padding-top: 4.7em;"> <div style="font-size: 10px"> <div style="width: 4.6em; height: 3.88em; background-color: #FED90E;"></div> </div> </div> <div style="position: absolute; padding-left: 3.68em; padding-top: 3.36em;"> <div style="font-size: 1.2em; color: #000;">_</div> </div> <div style="position: absolute; padding-left: 3.68em; padding-top: 4.03em;"> <div style="font-size: 1.2em; color: #000;">_</div> </div> <div style="position: absolute; padding-left: 3.64em; padding-top: 4.03em;"> <div style="font-size: 1.2em; color: #000;">_</div> </div> <div style="position: absolute; padding-left: 1.96em; padding-top: 2.33em;"> <div style="font-size: 3.04em; font-weight: bold; color: #000;">•</div> </div> <div style="position: absolute; padding-left: 2.06em; padding-top: 2.5em;"> <div style="font-size: 2.77em; font-weight: bold; color: #fff;">•</div> </div> <div style="position: absolute; padding-left: 2.67em; padding-top: 4.23em;"> <div style="font-size: 0.28em; font-weight: bold; color: #000;">•</div> </div> <div style="position: absolute; padding-left: 1.46em; padding-top: 5.18em;"> <div style="font-size: 0.66em; color: #000;">C</div> </div> <div style="position: absolute; padding-left: 1.47em; padding-top: 5.4em;"> <div style="font-size: 0.66em; color: #000;">C</div> </div> <div style="position: absolute; padding-left: 1.62em; padding-top: 5.53em;"> <div style="font-size: 10px"> <div style="width: 2.2em; height: 2.2em; background-color: #FED90E;"></div> </div> </div> <div style="position: absolute; padding-left: 1.45em; padding-top: 5.19em;"> <div style="font-size: 0.8em; font-weight: bold; color: #FED90E;">O</div> </div> <div style="position: absolute; padding-left: 1.58em; padding-top: 5.47em;"> <div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">(</div> </div> <div style="position: absolute; padding-left: 1.62em; padding-top: 5.46em;"> <div style="font-size: 0.25em; font-weight: bold; font-style: italic; color: #000;">-</div> </div> </div> </div> </div> </div>

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

更多精彩内容其他人还在看

css实现的让图片垂直居中的方法

图片的宽度和高度是未知的，没有一个固定的尺寸，在这个前提下要使图片在一个固定了宽度和高度的容器中垂直居中，想想感觉还是挺麻烦的，由于最近的项目可能会用到这个方案，所以把一些常用的方法都收集整理了一下。

收藏 0赞 0分享

3个比较有用的网页制作技巧

我们在进行DivCSS布局的时候，非常关注CSS技巧的学习，今天向大家推荐3个所谓的 “顶级”CSS技巧！虽然没有什么新意，但对新手而言却非常重要！

收藏 0赞 0分享

让你写出更轻巧、更快并且更不会让你头疼的CSS的方法

为什么我们的CSS变得一团糟——我们真的很容易陷入这样的困惑中。有时这是一开始就马虎编程的结果，有时是由于后期多重的附加代码（hacks)和修改造成的。

收藏 0赞 0分享

利用CSS3的checked伪类实现OL的隐藏显示的方法

随着CSS3的发布，国外研究正如火如荼，但在国内还有很多人抱着IE不支持CSS3的想法，始终无动于衷不肯去学习。

收藏 0赞 0分享

CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

CSS对浏览器的兼容性有时让人很头疼，或许当你了解当中的技巧跟原理，就会觉得也不是难事，从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下。

收藏 0赞 0分享

固定位置显示弹出层(兼容IE6,IE8,FF)

兼容IE6,IE8,FF弹出层固定位置显示,主要是通过css的控制

收藏 0赞 0分享

div完美自适应动态上下左右居中

div完美自适应动态上下左右居中，多用于信息提示框效果。

收藏 0赞 0分享

display:inline的用法

和 display:inline 对应的是 display:block，block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素，例如 SPAN 是行内显示的，但是你加了 display:block 属性就不一样了

收藏 0赞 0分享

css样式实现整个页面背景使用一张图片

最近一直被css背景困扰，因为是仿站，别人网站背景图片无论怎样另存，都是相同文件名，打开一看，整个网站的各个角落背景图片都在一个文件中分布，于是上网搜集资料，发现使用这种方法的网站很多，源自于雅虎最早。

收藏 0赞 0分享

关于CSS样式表文件组织形式的整理

以下引用网络上的一篇文章,不知道作者是谁了,总体上概括的不错,但是在实际应用当中还是要根据项目情况来具体实施比较好。

收藏 0赞 0分享

查看更多

网络赚钱

更多

站长故事

更多

建站极客

合作伙伴

在线工具

网站地图

建站极客移动版

聚合全网技术文章，根据你的阅读喜好进行个性推荐

© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.

沪ICP备13040166号-22