0

四分の一円の形でタグクラウドを構築する最良の方法は何でしょうか.良いリソースへのポインタは役に立ちます.私はすでにこれをグーグルで検索しているので安心してください.

4

1 に答える 1

2

これで始められるはずです;）

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

于 2011-07-24T00:07:58.050 に答える