新手问题 [已解决] 标签云的字体 CSS 怎么写?

chairy11 · 2014年02月27日 · 最后由 chairy11 回复于 2014年03月07日 · 3741 次阅读

问题

那种每个标签字体大小不一致的标签云,CSS 都怎么写?

貌似应该写在 HTML 里,比如

<a href="XXX" style="font-size: 11px;">Ad</a>

问题是,这个 font-size 大小变化有没有什么公式? 或是把一串经验之作写成一个 Array(比如 [11, 13, 12, 9, 8 ]), 生成不同每个 tag 从这 Array 中按顺序取它的 font-size 值?

解决方案

方案一:放弃纯 CSS 的想法,考虑用jquery.tagcloud.js.

方案二: 我自己想的,是否有点笨拙?

<%  @font_size = [16,22,15,13,12,23,18,12,13,13,15,17,13,14,12,15,12,13,12,13,13,20,12,31,23,12,20,19,14,19,12,17,15,17,14,24,15,12,11,11,19,15,15,21,16]
%>
<% @text = 1..45 %>
<% @text.each_with_index do|item,index| %>
  <%= link_to "测试#{item}", "#", style: "font-size:#{@font_size[index]}px;" %>
<% end %>

<section class="tag_cloud">
  <header><h2>热门标签</h2></header>
  <ul class="list-unstyled">
    <% @text = 1..45 %>
    <% @text.each do %>
        <li>
          <%= link_to "测试", "#",style: "font-size:#{cycle(16,22,15,13,23,18,12,13,15,17,13,12,15,13,20,12,31,23,12,20,19,12,15,17,13)}px;" %>
        </li>
    <% end %>
  </ul>
</section>

tagcloud 不是都用 d3 弄的么

#1 楼 @aptx4869 js?没有纯 CSS 解决方案?

#2 楼 @chairy11 应该没有……毕竟 css 里没法生成逻辑……或者你可以定义各种字体大小的 class 然后生成标签的时候按照一定算法选择 class……

虽然你不能动态的写不同的标签,但是你可以动态的生成 css

页面上的 class 不用变

<a href="xxx" class="advice">
<a href="xxx" class="humor">

生成的 css 根据你自己的规则

.advice {
  font-size: $xxx;
}

.humor {
  font-size: $yyy;
}

纯 CSS 也可以,但是要服务端配合,生成 tag-13, tag-9 这样的 class,然后 CSS 里面把 tag-1 到 tag-64 都定义一遍。

#4 楼 @Yujing_Z 这样还是费事了点……算了,我还是用 JS 算了……

匿名 #8 2014年02月28日

為甚麼妹子問什麼難度的題目都會有大批人來教(好吧,這話說的,我應該先扇自己一個耳光) 真心覺得,不如找個正常生活化點的程序員男朋友教好了

匿名 #10 2014年02月28日

#8 楼 @chairy11 我怎麼樣(好吧,我先跪搓衣板一個小時,再扇自己 99 個耳光,最後打自己一拳)

對了,昨天的事應該不生氣了吧。反正你也說你每天都是開開心心的

#9 楼 @llvm 从你对我说过的话来判断,咱们相处不来。

#3 楼 @cassiuschen 话说我现在想使用方案二,你说是不是太笨拙了?

删除。。貌似用不上

方案一挺好的呀

#11 楼 @chairy11 看自己顺手了……反正我要是没有好的解决方案也会不择手段…

匿名 #15 2014年02月28日

#10 楼 @chairy11 開玩笑的

匿名 #17 2014年02月28日

#15 楼 @chairy11 真應了一句話,“女孩的心思咱別猜”

#17 楼 @loveltyoic 计算逻辑可以……但是按某种规则匹配 style 的逻辑 sass 里一样写不了昂……

20 楼 已删除

LS 特像我认识一人... 共同点是各种看不懂在说什么... 自我世界感浓重...

匿名 #22 2014年02月28日

#20 楼 @leozwa 純扯淡啊,認真你就輸了

.fl{float:left} .fr{float:right;} .cf:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;} .fs10{font-size:10px;} .fs11{font-size:11px;} 链接地址 1 链接地址 2

我一般是这么用的

#12 楼 @qhwa 折腾方案一半天了,发现这个要填个 rel,如果我自己填了不同的 rel,我还不如用方案二?反正也是自己来点固定数字。

#22 楼 @heimirror 没懂,只有两个不同大小?

我姑且认为你的每个 tag 是被 span 包裹着的,那么,为什么不用:first-child 来定义?

span:first-child { color: red; } span:first-child + span { color: blue; } span:first-child + span + span{ color: green; }

some text some text some text some text

如果你是用的 sass 或者 less,你完全可以简写这段样式定义。

#26 楼 @modacker 怎么觉得很诡异的样子?

需要 登录 后方可回复, 如果你还没有账号请 注册新账号