设为首页收藏本站

开启辅助访问切换到宽版

热搜: 手游棋牌素材小程序 92game 视频图片下载商业两性电影游戏娱乐自适应网址帝国CMS 织梦模板插件

源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛»首页 › 教程专区 › 网页制作 › 一个非常精典的纯CSS漫画,登峰造极.

发新帖

查看: 332|回复: 11

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

7万主题	861 回帖	32万积分

Rank: 8 Rank: 8

积分: 329525

发消息

发表于 2009-5-12 19:18:21 | 显示全部楼层 |阅读模式

纯CSS打造的漫画，让枯燥变的活泼，让局限变的无限有的人说没有意义，我觉得意义重大。让枯燥变的活泼，让局限变的无限，请点击以下运行看演示。 [html] <div style="width: 100%; height: 466px;"> <div style="float: left; border: 2px so 纯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>

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

相关帖子

回复

使用道具举报

16 主题	2万回帖	376 积分

Rank: 3 Rank: 3

积分: 376

发消息

发表于 2022-8-8 23:56:02 | 显示全部楼层

来看看！！！

回复支持反对

使用道具举报

16 主题	2万回帖	174 积分

Rank: 2

积分: 174

发消息

发表于 2022-8-13 23:41:47 | 显示全部楼层

问问问企鹅哇哇哇哇哇

回复支持反对

使用道具举报

2 主题	2万回帖	67 积分

Rank: 2

积分: 67

发消息

发表于 2022-9-8 08:57:29 | 显示全部楼层

问问问企鹅哇哇哇哇哇

回复支持反对

使用道具举报

0 主题	1万回帖	0 积分

Rank: 3 Rank: 3

积分: 0

发消息

发表于 2023-6-23 13:14:09 | 显示全部楼层

我要金豆金豆金豆

回复支持反对

使用道具举报

3 主题	2万回帖	156 积分

Rank: 2

积分: 156

发消息

发表于 2024-5-14 02:32:52 | 显示全部楼层

抽根烟，下来看看再说

回复支持反对

使用道具举报

1 主题	1万回帖	93 积分

Rank: 2

积分: 93

发消息

发表于 2024-9-1 02:00:31 | 显示全部楼层

我找了挺久终于找到了

回复支持反对

使用道具举报

16 主题	2万回帖	174 积分

Rank: 2

积分: 174

发消息

发表于 2024-9-2 00:40:15 | 显示全部楼层

你们谁看了弄洒了可能

回复支持反对

使用道具举报

5 主题	2万回帖	183 积分

Rank: 2

积分: 183

发消息

发表于 2024-9-17 20:17:53 | 显示全部楼层

感谢楼主分享

回复支持反对

使用道具举报

15 主题	2万回帖	122 积分

Rank: 2

积分: 122

发消息

发表于 2024-9-20 20:50:50 | 显示全部楼层

抽根烟，下来看看再说

回复支持反对

使用道具举报

发新帖

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-25 12:44 , Processed in 0.079321 second(s), 26 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表