经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 定位的应用-仿制了一个太极.

查看: 1246|回复: 7

[其它] 定位的应用-仿制了一个太极. [复制链接]

tianyazjq110　楼主

梦的河流

中级会员

帖子: 209
体力: 875
威望: 1

发表于 2008-12-21 00:02:45 |显示全部楼层

<!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=utf-8" />
<title>太极</title>
<style type="text/css">
 *{ margin:0px; padding:0px;}
 body{ font-family:courier new,courier,monospace; font-size:12px; line-height:18px;}
 .tj_box{ width:200px; height:150px;position:relative; background-color:#fff;  left:0px;top:0px; margin:100px auto;}
 .tj_box span{ display:block;}
 .tj_box span.cir1{ color:#000; font-size:400px; line-height:200px;width:250px; position:absolute;}
 .tj_box span.cir2{ color:#fff; font-size:380px; line-height:200px; width:220px;position:absolute; left:6px; top:-1px; overflow:hidden;}
 .tj_box span.cir3{ 
 color:#000000;
font-size:380px;
left:5px;
line-height:198px;
overflow:hidden;
position:absolute;
top:0;
width:110px;
 }
.tj_box span.cir4{
color:#fff;
font-size:195px;
height:150px;
left:62px;
line-height:240px;
overflow:hidden;
position:absolute;
top:-6px;
width:120px;
}
.tj_box span.cir5{
color:#000;
font-size:195px;
height:150px;
left:60px;
line-height:140px;
overflow:hidden;
position:absolute;
top:-2px;
width:120px;
}

.tj_box span.cir6 {
color:#FFFFFF;
font-size:70px;
height:100px;
left:95px;
line-height:100px;
overflow:hidden;
position:absolute;
top:15px;
width:100px;
}

.tj_box span.cir7 {
color:#000000;
font-size:70px;
height:100px;
left:105px;
line-height:100px;
overflow:hidden;
position:absolute;
top:60px;
width:100px;
}
 
</style>
</head>

<body>

</body>
</html>

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

革命尚未成功

西部数码顶级域名注册商39元抢注！

使用道具举报

57638152　

下一站Web

中级会员

帖子: 46
体力: 208
威望: 0
居住地: 浙江省杭州市

发表于 2008-12-21 00:56:45 |显示全部楼层

很好很强大

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

birdstudio　

CSS魔术师

荣誉管理 

帖子: 2452
体力: 5010
威望: 4

发表于 2008-12-21 01:11:24 |显示全部楼层

玩出花样来了~~

■ 提问请贴图贴代码。　　● 我的微博　　● 我的博客 (已恢复)

使用道具举报

zhuyinhong　

样吧

荣誉管理

帖子: 246
体力: 7561
威望: 0

发表于 2008-12-21 20:51:18 |显示全部楼层

CSS绘图本身没有多大实用价值，但是对于广大初学者来说，利用这种方式来学习和探索CSS技术是一种不错的手段，正如孩子们通过游戏来学习英语或其他科目是一个道理。类似的绘图效果还有三角形、菱形、梯形、圆形，老外甚至用CSS绘制图画。也希望网友们如果发现好的CSS绘图效果，以跟帖形式补加，分享是一种快乐。继续加油！

[ 本帖最后由 zhuyinhong 于 2008-12-21 20:52 编辑 ]

推荐阅读《JavaScript征途》

使用道具举报