« Wordpress与饭否 | 杭州租房 »

自适应的标题 3月 18th, 2008 5key Post in web开发 , 2,262 views

本文遵循创作共用协议，转载请注明出处 5key.net
本文链接：

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

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

要求如下：

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

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

自适应的标题

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

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

自适应的标题

2、代码部分：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>自适应宽度标题 @5key.net</title>
  6. <style>
  7. body{margin:0; padding:20px; font-size:12px;}
  8. .box{background:url(2.gif) no-repeat; height:28px; padding:0 0 0 20px; margin:0 0 10px 0;}
  9. .innerbox{background:url(2.gif) no-repeat right 0; height:22px; padding:6px 0 0 0;}
  10. .title{background:url(2.gif) no-repeat -128px -29px; height:22px; float:left; padding:0  0 0 5px;}
  11. .title span{background:url(2.gif) no-repeat right -29px; height:16px; padding:6px 10px 0 5px; float:left; color:#F60; font-weight:bold;}
  12.  
  13. .title1{width:150px;}
  14. .title2{width:200px;}
  15. .title3{width:300px;}
  16. </style>
  17. </head>
  18.  
  19. <body>
  20. <div class="box title1">
  21. <div class="innerbox">
  22. <div class="title">
  23. <span>我是第一</span>
  24. </div>
  25. </div>
  26. </div>
  27. </body>
  28. </html>
将此文推荐到鲜果热文。

您可能还会对这些文章感兴趣»

其他文章»

18 Responses to “自适应的标题”

  1. 雕刻寂寞 3月 19th, 2008 Says:
    Gravatar

    这样做就是有个最大宽度的限制。

    [回复此评论]

    5key reply on 2008年03月19日:

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

    [回复此评论]

  2. 锐风 3月 19th, 2008 Says:
    Gravatar

    貌似不错.

    [回复此评论]

  3. bunorte 3月 19th, 2008 Says:
    Gravatar

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

    [回复此评论]

    5key reply on 2008年03月19日:

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

    [回复此评论]

  4. Lunatic Sun 3月 19th, 2008 Says:
    Gravatar

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

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

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

    [回复此评论]

    5key reply on 2008年03月19日:

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

    [回复此评论]

  5. Lunatic Sun 3月 19th, 2008 Says:
    Gravatar

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

    [回复此评论]

  6. Ini艾妮 3月 19th, 2008 Says:
    Gravatar

    嵌套太多 很难理清楚 调试细节也比较繁琐

    [回复此评论]

  7. chin 3月 20th, 2008 Says:
    Gravatar

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

    [回复此评论]

    5key reply on 2008年03月20日:

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

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

    [回复此评论]

    5key reply on 2008年03月27日:

    test

    [回复此评论]

  8. zr 3月 24th, 2008 Says:
    Gravatar

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

    [回复此评论]

  9. Evance 3月 27th, 2008 Says:
    Gravatar

    就是计算麻烦了些..
    吼吼.

    [回复此评论]

    大猫 reply on 2008年04月05日:

    这哥们儿眼熟…

    [回复此评论]

  10. cad 4月 1st, 2008 Says:
    Gravatar

    不错的代码，收藏，以后用得着

    [回复此评论]

  11. 做网站的 5月 4th, 2008 Says:
    Gravatar

    现在做圆角，我觉得还是图片比较好一点。简单

    [回复此评论]

  12. hellocookies 5月 22nd, 2008 Says:
    Gravatar

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

    自适应标题

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

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

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

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

    [回复此评论]

我有话说»