定位的应用-仿制了一个太极.

作者:admin 日期:2008-12-21

字体大小: 小中大

今日逛经典论坛时，见到的，很不错，用CSS的定位做出来的八卦。

请进入日志再运行

HTML代码

<!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>
    <div class="tj_box">
	   <span class="cir1">•</span>
	    <span class="cir2">•</span>
		<span class="cir3">•</span>
		<span class="cir4">•</span>
		<span class="cir5">•</span>
		<span class="cir6">•</span>
		<span class="cir7">•</span>
		
	   
	</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[本日志由 admin 于 2010-09-01 10:07 AM 编辑]

文章来自: 转载

引用通告: 查看所有引用 | 我要引用此文章

Tags: css

相关日志:

评论: 0 | 引用: 0 | 查看次数: 607

发表评论

昵　称:
密　码:	游客发言不需要密码.
内　容:	正在加载编辑器...
验证码:
选　项:	禁止表情转换禁止自动转换链接禁止自动转换关键字记住我的信息,以便下次评论时不用输入用户名.

虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号. 字数限制 200 字 \| UBB代码关闭 \| [img]标签关闭

定位的应用-仿制了一个太极.

作者:admin 日期:2008-12-21

Category

Calendar

Archive

Recent Comments

User Panel