一道有趣的CSS考题。

当我看到这道题目时,第一想法就是“出这道题的人真的太BT了”。

以下是考题要求

  1. 1,结构良好,符合标准。
  2. 2,时间和标题间距为10Px。
  3. 3,标题过长时截取多余字符,但时间必须保持完整。
  4. 4,多浏览器兼容。
  5. 5,必须使用CSS来实现。

点击这里查看最终结果

这道题的关键是display,position属性的理解,和overflow:hidden;的灵活应用,以下是我的解答流程。

编写结构。

<ol>:

<li><a href="">Title</a><span>date</span></li>

<li><a href="">Title</a><span>date</span></li>

</ol>

可以肯定,这个结构是标准且良好的,接下来不管发生什么问题,将尽量避免重写结构。

构思方案。

使用position:absolute;将span标签抽离出文档流,这样的话span将和li脱离父子关系,li的overflow:hidden;属性也将无法作用到span了。

但实际结果却变成了,视觉上li已经被截取了,但却上却还占据着空间。这个原因我找了好久都没有找到解释。没办法只能换个思路。

解决问题。

最终我是用截取高度的思路解决了这个问题

即使思路正确,在最终解决前依然碰到了很多的兼容性问题。这真是一道非常考验人活用CSS的考题。

5 ResponsesTAG: , |Categories:Web 技术

Posted on:九月 26, 2008

  1. rf : 十月 4, 2008 - 12:40

    真个站都是你搭的吗?太厉害了。。
    我也在学css,这个站非常漂亮,简洁又不失创意,收藏了。。
    话说你是专业制作网站的不?

    [回复]
  2. Zindex-1 : 十月 4, 2008 - 21:46

    谢谢^_^

    [回复]
  3. linxz : 十月 23, 2008 - 15:31

    =.= 路过……看看就好……

    [回复]
  4. foodly : 十二月 5, 2008 - 23:05

    前辈,您好!我看了您的源代码。自己也调试了下。不过发现标题换成英文overflow:hidden就无效了。文本超出设定宽度。这是为什么呢?

    Title2008.12.5
    TitleTitledate:2008.12.5
    TitleTitleTitledate:2008.12.5
    TitleTitleTitleTitledate
    TitleTitleTitleTitleTitleTitleTitleTitleTitledate
    TitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitleTitle
    TitleTitleTitleTitleTitleTitle
    date:1987.07.30

    [回复]
  5. Zindex-1 : 十二月 6, 2008 - 21:21

    To:foodly

    因为你的英文没有断词,英文的换行规则是以单词来分的。

    而这个方法overflow:hidden裁切的是内容高度而不是平常的宽度。这个在Dreamweaver设计视图里可以看到。

    另外在朋友那得知,我使用的方法不是那个公司的标准答案,呵呵~如果你有兴趣可以换一个思路来做一下。

    [回复]

SEARCH

A Bit About Me

喜欢胡思乱想。兴趣极为广泛,并为此烦恼。
{CSSWORK}是我的个人网志,记录了一些生活中的琐事、工作的新得MORE +

本站采用: Creative Commons 协议