1/4圆标签云

Question

构建一个四分之一圆形状的标签云的最好方法是什么，任何指向好的资源的指针都会很有帮助，请放心，我已经在谷歌上搜索过了。

Answer 1

这应该会让你开始学习;)

HTML：

    <div id="tag_cloud">
        <div style="float:left;clear:left;height:15px;width:131px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:92px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:71px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:51px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:38px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:26px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:17px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:13px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:10px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:7px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:5px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:4px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:2px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:right;clear:right;height:15px;width:0px"></div><div style="float:left;clear:left;height:15px;width:0px"></div><div style="float:right;clear:right;height:15px;width:0px"></div>

    <!-- TAGS GO HERE -->
    blue, d70, ddlatt, deborahlattimore, dlattimore, dragonfly, drops, eau, eye, f18, f28d, fernandinabeach, flickr, florida, fly, fun, fungyuenbutterflyreserve, fv10, gato, germany, harbor, india, interestingness, keurboomstrand, lattimore, leaf, leaves, macro, may, nightphotography, nikon300mmf28vr, nikon55mmmacro, nikonvr, oscarl\u00F3pez, panorama, ph213, pink, religion, ring, sf, southafrica, spring, storm, street, tahoe, telephoto, thereseflanagancom, topv444, urban, wow
</div>

CSS：

#tag_cloud {
    background-color:pink;
    border-top-left-radius:200px;
    -moz-border-radius-topleft:200px;
    height:140px;
    width:140px;
    overflow:hidden;
    padding-top:60px;
    padding-left:60px;
    font-size:12px;
    font-family:Arial, sans-serif;
    color:#FFF;
}

http://jsfiddle.net/AlienWebguy/RN5zV/3/

这个想法还有一个很好的资源：http://www.csstextwrap.com