Blog > 用户体验设计 > 自适应的标题

自适应的标题

2008/03/18 Posted in 用户体验设计 , 4,778 views

阿里前端（方凳）出了道题，有点意思，想了一方案，给大家分享一下：）

预览地址：http://5key.net/demo/liquid-css-title/

要求如下：

  1. 宽度自适应
  2. 标题文字自适应
  3. 尽量用一张背景图
  4. 尽量少的嵌套

效果嘛，先给出我的截图如下：

自适应的标题

以前曾做过一个自适应宽度的圆角按钮。不过这里有两个自适应在里面，所以也得稍微的修改一下。

1、先来看用到的背景图：

自适应的标题

2、代码部分：




我是第一


  3. 其实难度不是很高。水平自适应只用一张背景图肯定就是2个容器分别左右嵌套。BTW,圆角里面套圆角，好看吗？

  4. 其实这也只是一个相对问题。所谓自适应，真正运用到页面中也无非是几种尺寸。只要保证你背景图片的足够宽，相对的自适应是没有问题的。

  5. 我觉得他们提出的要求比较苛刻，要尽量用一张背景图，又要少用嵌套。

    你的解决方法虽然只用了一张背景图，但是HTML用了三层代码嵌套，太多了。

    和糟糕的markup结构比起来，我情愿多用背景图。

  6. 这里只是讨论实现方案，对于视觉效果不做考虑。BTW，图片是取之阿里巴巴

  7. 其实大部分情况，我只会做一层的自适应。外层由于也是圆角，所以带来了麻烦。
    在代码优化与视觉设计上需要找寻一个平衡点，并不是说将所有的问题都推向前端工程师。设计的优化，同样也是代码优化的基础。

  8. @5key 自适应的圆角确实是很麻烦，总要造成代码结构的冗余，希望各浏览器能够尽快实现CSS3的圆角属性。

  10. 晕，四个嵌套还实现不了无限宽度，你还需要加把劲

  11. 无限只是一个相对概念。你会需要一个2000px宽度的标题吗？当然，修改一下图片，2000px也没有问题。

    对于两层自适应宽度，如果你有更好的办法，我很乐意听听。

  12. 文字多了会折行，
    用white-space:nowrap可以，单firefox，背景不能自动延伸

  18. 你的这个自适应不是完全自适应把，还要改title1的width
    我把你的图片改成width:874px,其它没变
    这是我做的自适应（当然我们讨论的前提都是不超过图片宽度）

    自适应标题

    我是老三，前面两位是我兄弟，为了长度超过它们，我只好说些废话了-_|||

    半夜睡不着觉，把心情哼成歌，只好到屋顶找另一个梦境

    这是一个从C移植到D的代码，原文请见“Embed an HTML control in your own window using plain C”，

    谢谢 你的blog，会继续关注你的内容，支持一下~