css做图例子解析

Aug 18, 2004 Author: | Filed under: Uncategorized

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</p> <p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <style type="text/css"> <p>#leaf {position:absolute;left:20px;top:20px;height:0px;width:0px;border-bottom:solid 70px #080;border-left:solid 70px #040;overflow:hidden;}</p> <p>#curve1 {position:absolute;font-size:150px;top:-50px; left:76px;color:white}</p> <p>#curve2 {position:absolute;font-size:150px;top:-16px;left:63px;color:white}</p> <p>#curve3 {position:absolute;font-size:180px;top:-6px; left:38px;color:white}</p> <p>#curve4 {position:absolute;font-size:120px;top:30px;left:13px;color:white}</p> <p>#curve5 {position:absolute;font-size:150px;top:-78px; left:50px;color:white}</p> <p>#curve6 {position:absolute;font-size:150px;top:-68px;left:18px;color:white}</p> <p>#curve7 {position:absolute;font-size:180px;top:-65px; left:-20px;color:white}</p> <p>#curve8 {position:absolute;font-size:120px;top:5px;left:-7px;color:white}</p> <p>#fruit1 {position:absolute;font-size:60px;top:-10px;left:80px;color:#900}</p> <p>#fruit2 {position:absolute;font-size:55px;top:-3px;left:70px;color:#c00}</p> <p>#fruit3 {position:absolute;font-size:65px;top:0px;left:78px;color:#e00}</p> <p>#hilight1 {position:absolute;font-size:16px;top:18px;left:72px;color:#c99}</p> <p>#hilight2 {position:absolute;font-size:16px;top:14px;left:85px;color:#c99}</p> <p>#hilight3 {position:absolute;font-size:22px;top:23px;left:82Px;color:#fcc}</p> </style> <div id="leaf"></div> <div id="curve1">•</div> <div id="curve2">•</div> <div id="curve3">•</div> <div id="curve4">•</div> <div id="curve5">•</div> <div id="curve6">•</div> <div id="curve7">•</div> <div id="curve8">•</div> <div id="fruit1">•</div> <div id="fruit2">•</div> <div id="fruit3">•</div> <div id="hilight1">•</div> <div id="hilight2">•</div> <div id="hilight3">•</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

其实就是方块和圆（•）组成的，采用绝对定位构成的。

首先是这样的代码：

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</p> <p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <style type="text/css"> <p>#leaf {height:200px;width:200px;border-bottom:solid 70px #080;border-left:solid 70px #040;}</p> </style> <div id="leaf"></div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

通过这种方式可以得到斜线（除了45度，还可以得到任意角度的，只要两个边的宽度不一样）

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</p> <p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <style type="text/css"> <p>#leaf {height:0px;width:0px;border-bottom:solid 70px #080;border-left:solid 70px #040;overflow:hidden;}</p> </style> <div id="leaf"></div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

加入圆点

</p> <p><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"</p> <p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"></p> <style type="text/css"> <p>#leaf {height:0px;width:0px;border-bottom:solid 70px #080;border-left:solid 70px #040;overflow:hidden;}</p> <p>#curve1 {font-size:150px;}</p> <p>#curve2 {font-size:200px;}</p> </style> <div id="leaf"></div> <div id="curve1">•</div> <div id="curve2">•</div> <p> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

加入绝对定位，排好位置。（为了大家看清楚，加了颜色区分）

其他就是耐心了，放上水果和高光。

[Edit on 2004-8-18 16:34:15 By guoshuang]

Flickr PhotoStream

郭爽的网页设计资料

css做图例子解析

Leave a reply

Flickr PhotoStream

Recent Posts

Recent Comments

Pages

Categories

Tags

Archives

Blogroll

Meta

Advertising

Most Popular

Recent Comments

Latest Entries