5月,我们的纪念
2006-12
27
昨天晚上一直在改Blog评论框中的表情部分
原本打算用table画出来,但实际出来的效果却让我大跌眼镜:
在IE下可以显示,但在FireFox下却怎么也无法显示Table中的数据,就算是<table><tr><td>test</td></tr></table>
也无法查看到test,而在IE下却是正常的!
于是决定自己弄一下
首先想到用LI来定位,
li是一个列表,在默认情况下,是纵向显示的,如:
  • 1111
  • 2222
  • 3333
显示表情,当然不能这样,所以要把列表从纵向显示转为横向显示,这个的实现还是问 怿飞 才知道的!-___-,只需给li定义float:left;就行了。
列表是可以实现横向显示了,但列表符号怎么办?这个我还是知道的,给li再定义一下list-style:none;就OK了。

让怿飞看了看,他说:这有语法错误啊,li是要和ul一起使用的,单独使用是错误的。
呵呵,有人在一旁指导就是不同多了,加上。
就得到下面的css
.ToolsUL{
 list-style:none;
 margin:0px;
padding: 0px;
}
.ToolsUL Li{
     float:left;
    margin:5px 1px 0 1px;
  list-style:none;
    border:1px solid #fff;
}

$ad$
这就正确了,可以实现表情图片的横向显示了,但我不知足,因为有30个表情,我想每10个表情之后就“换一行”,
也就是说,要在ul和li中实现换行的效果,直接加<br />肯定是不行的了。问了问高手,好说:
给li加一个width,然后给ul也加一个width,ul的width大概等于li的width*10,当li的总宽度达到ul的宽度时,自然就会换行了。
哈哈。
给li加上
width:50px;,因为一个表情的width属性就是50
然后给ul加上width:500px;,预览之后发现不对,应该是ul的width小了点,加到520px就行了。

再次不知足,我想当鼠标移到表情上时出现边框,
给li加一个:hover就行了,这一招是在看波西米亚的Blog时发现的,没想到css中也可以这样写,最终的css就是这样子的了
}
.ToolsUL{
 list-style:none;
 margin:0px;
 width:520px;
padding: 0px;
}
.ToolsUL Li{
 float:left;
 list-style:none;
 width:50px;
 height:50px;
 cursor:pointer;
 border:1px solid #FFF;
}
.ToolsUL Li:hover{
 border:1px solid #000;
}
评论时,点击更多表情会出现30个表情,并且每10个就换行了,达到我需要的效果了。

Categories:   web标准
Tags:  
Actions:   Comments (33) |

Comments

1#

December 27 2006 , 13:19

jasper

[em13]完全不懂

jasper | Top

2#

December 27 2006 , 13:20

zj-blog

呵呵,你这套大表情真是很好看,有带动画效果的吗?我也考虑使用大表情了

zj-blog | Top

3#

December 27 2006 , 13:21

dorishu

[em58]


还是喜欢这个带帽子的
[em16]

dorishu | Top

4#

December 27 2006 , 13:25

幻想曲

Re:zj-blog
ms有动画的,但我没找到[em0]
Relolorishu
我喜欢这个[em15]

幻想曲 | Top

5#

December 27 2006 , 13:27

幻想曲

Re:zj-blog
这里有好多哇
[url]http://bbsface.enorth.com.cn:8080/index.htm[/url]
Google一下也不少
[url]http://www.google.com/search?q=%E8%AE%BA%E5%9D%9B%E8%A1%A8%E6%83%85&sourceid=navclient-ff&ie=UTF-8&rlz=1B3GGGL_zh-CN___CN202[/url]

幻想曲 | Top

6#

December 27 2006 , 13:31

zj-blog

re:幻想曲

严重感谢中[em34][em34][em34]

zj-blog | Top

7#

December 27 2006 , 13:32

幻想曲

不过不知道为什么li:hover在IE下为什么没效果[em10]

幻想曲 | Top

8#

December 27 2006 , 13:34

iceapple

不知道是不是你就是这样做的
IE下的更多表情和FF下的是不同的

iceapple | Top

9#

December 27 2006 , 13:35

Andrew

[em17]这些只是css
web标准还包括结构、行为方面的东西

Andrew | Top

10#

December 27 2006 , 13:35

幻想曲

Re:iceapple
正在找原因[em16]

幻想曲 | Top

11#

December 27 2006 , 13:38

幻想曲

是啊是啊,楼上的说得对![em19]

幻想曲 | Top

12#

December 27 2006 , 13:45

dorishu

http://bbsface.enorth.com.cn:8080/index.htm

这个上面果然好多啊,多加点吧!

很是生动列!

会不会很麻烦?

dorishu | Top

13#

December 27 2006 , 13:46

幻想曲

Relolorishu
加起来很简单
只是要找尺寸都为50x50的不好找

幻想曲 | Top

14#

December 27 2006 , 13:50

dorishu

要大小统一啊!

[em12]

孤陋寡闻 鸟![em11]

dorishu | Top

15#

December 27 2006 , 13:52

幻想曲

宽高不一致摆在一起很难看的
ps.把你那个小熊拿上来我玩玩[em0]

幻想曲 | Top

16#

December 27 2006 , 13:53

dorishu

我的个妈啊!

那是个鹿啊![em14][em13]

dorishu | Top

17#

December 27 2006 , 13:54

幻想曲

啊?你还有一只鹿?都拿上来~~~[em17]

幻想曲 | Top

18#

December 27 2006 , 13:55

[em6][em9]li:hover在非IE下可以使用,IE只识别a:hover

怿飞 | Top

19#

December 27 2006 , 13:57

幻想曲

我现在基本上只用FireFox了
除非一些网站非IE不能浏览我才会用IE[em15]

幻想曲 | Top

20#

December 27 2006 , 14:01

dorishu

今天人气还蛮旺的嘛!

[em16]

dorishu | Top

21#

December 27 2006 , 14:03

iceapple

[em12]熊、鹿不分?
找些可爱漂亮的表情吧!

iceapple | Top

22#

December 27 2006 , 14:03

我现在也一般使用FF,但经常做的东西在FF里正常,跑到IE下就不太理想或者有小毛病,烦躁[em10]

怿飞 | Top

23#

December 27 2006 , 14:05

幻想曲

Re:怿飞
是啊,现在这个Blog在1024x768的分辨率下,在FF中正常,但在IE中却错位了~~
郁闷
[em13]

幻想曲 | Top

24#

December 27 2006 , 14:05

hileo

不错了加表情丰富我了 赫赫[em1]

hileo | Top

25#

December 27 2006 , 14:06

幻想曲

Re:iceapple
找到以后通知我哈[em0]

幻想曲 | Top

26#

December 27 2006 , 14:54

iceapple

Re:幻想曲
现在在IE下也是正常的了没有错位了啊(1024x768的分辨率)
表情也都统一了,改的好快啊

iceapple | Top

27#

December 27 2006 , 14:57

幻想曲

[em16][em16][em16]

幻想曲 | Top

28#

December 27 2006 , 15:21

qq

[em0][em1][em10][em11][em12][em13][em14][em15][em16][em17]

qq | Top

29#

December 27 2006 , 19:59

swwwssssss

[em12][em11]

swwwssssss | Top

30#

December 28 2006 , 00:23

好多表情啊

下一秒 | Top

31#

December 28 2006 , 20:44

music000

给你推荐两个网站吧 css标准方面的 挺不错的
1、http://www.htmldog.com/
2、http://cssplay.co.uk/

国外网站 这两天发访问不了啊(设置代理吧、可恶的地震)

music000 | Top

32#

January 11 2007 , 13:45

ccdjh

我也推荐几网站吧,迟了回信,实在不好意思。

http://www.w3pop.com/
http://www.blueidea.com/
http://cssreboot.com/
http://realazy.org/blog/

ccdjh | Top

33#

January 11 2007 , 14:09

幻想曲

Re:ccdjh
都不错哇[em17]

幻想曲 | Top

Add comment



(Will show your Gravatar icon)  



  Country flag


[b][/b] - [i][/i] - [u][/u]- [quote][/quote]

:-/ ^_^ :d :o :kiss: :) :p :se: [yeah] :( :love: :han: :up: :cry: :zzz: o_o


申请链接请看这里