开发者

Quarter circle tag cloud [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarif开发者_开发百科ying this question so that it can be reopened, visit the help center. Closed 11 years ago.

What would be the best way of building a tag cloud in the shape of a quarter circle, any pointers to good resources will be helpful, rest assured I've already searched google for this.


This should get you started ;)

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/

Also a good resource for this idea: http://www.csstextwrap.com

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜