javascript - 四分之一圆标记云

标签 javascript jquery html css tag-cloud

<分区>

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

最佳答案

这应该让你开始 ;)

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

关于javascript - 四分之一圆标记云,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6803993/

上一篇:javascript - 单击时 CSS 跨浏览器大纲抑制

下一篇:出现 CSS 下拉列表,但是当您单击时,它会消失

相关文章:

javascript - 样式表不适用于 bootstrap 4 CDN 链接?

CSS 在带有 div 的 div 之后选择一个 div

javascript - jQuery:根据表格的可见性状态更改按钮的文本

javascript - 启用“选择”中的“禁用”选项

javascript - 用逻辑加载对象

javascript - foreach 在对象 id 上的 Node 问题

javascript - 使用 setTimeout 关闭子菜单

c# - 如何让所有用户从 Office Communicator 转到 asp.net 网页?

jQueryUI 附加到 Accordion

javascript - 在 javascript 函数中显示特定的 div