阿里前端（方凳）出了道题，有点意思，想了一方案，给大家分享一下：）
预览地址：http://5key.net/demo/liquid-css-title/
要求如下：
- 宽度自适应
- 标题文字自适应
- 尽量用一张背景图
- 尽量少的嵌套
效果嘛，先给出我的截图如下：
以前曾做过一个自适应宽度的圆角按钮。不过这里有两个自适应在里面，所以也得稍微的修改一下。
1、先来看用到的背景图：
2、代码部分：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>自适应宽度标题 @5key.net</title>
- <style>
- body{margin:0; padding:20px; font-size:12px;}
- .box{background:url(2.gif) no-repeat; height:28px; padding:0 0 0 20px; margin:0 0 10px 0;}
- .innerbox{background:url(2.gif) no-repeat right 0; height:22px; padding:6px 0 0 0;}
- .title{background:url(2.gif) no-repeat -128px -29px; height:22px; float:left; padding:0 0 0 5px;}
- .title span{background:url(2.gif) no-repeat right -29px; height:16px; padding:6px 10px 0 5px; float:left; color:#F60; font-weight:bold;}
-
- .title1{width:150px;}
- .title2{width:200px;}
- .title3{width:300px;}
- </style>
- </head>
-
- <body>
- <div class="box title1">
- <div class="innerbox">
- <div class="title">
- <span>我是第一</span>
- </div>
- </div>
- </div>
- </body>
- </html>
前两天在宜山路新华书店翻书，在一个角落里发现《CSS权威指南》，惊叹！居然还有？仔细一看，已是第三版。
记得曾有不少人问我哪里买，更甚者愿出三倍价格买去……
发此一文，只为告知仍有需要得朋友。卓越似乎已断货，要下手尽快。
豆瓣地址: http://www.douban.com/subject/2308234/
p.s: 豆瓣上的卓越亚马逊 (RMB 21.2)链接错误。
昨天群里大家讨论到一个豆瓣上的按钮，下面这个。在这里用到了不同宽度的按钮，但是只是用到了一个图片。
演示地址：http://5key.net/demo/liquid-css-menu/
先来看张图片：
原理就是通过背景的左对齐和右对齐用A标签和span标签组合出一个完整的圆角矩形。再通过hover标签去滑动图片。ok，看看代码吧。
- <style>
- *{margin:0; padding:0;}
- body{padding:10px; font-size:12px;}
- h1{margin:0; padding:10px 0; font-size:14px; font-weight:bold;}
- a{background:url(1.gif) left 0; color:#fff; text-decoration:none; height:30px; float:left; cursor:hand; margin:0 5px 0 0;} a:hover{background:url(1.gif) left -30px;height:30px;}
- a span{background:url(1.gif) right 0; padding:9px 8px 5px 0; margin:0 0 0 8px; float:left; height:16px;}
- a:hover span{background:url(1.gif) right -30px; color:#000; padding:9px 8px 5px 0; margin:0 0 0 8px; height:16px; }
- </style>
-
- <h1>CSS自适应宽度圆角按钮 @5key.net</h1>
- <a href="#"><span>首页</span></a>
- <a href="#"><span>不是首页</span></a>
- <a href="#"><span>他也许是首页</span></a>
- <a href="#"><span>但他一定不是首页</span></a>
- <a href="#"><span>好了，就这样把。别扯了~</span></a>
大家都知道搜索引擎比较喜欢H1。在SEO中H1也是很基础也很重要的一步。但有些时候为了界面风格的原因，很多标题性的文字做成了图片。大多数情况下，切割页面的时候就直接用上了图片。在代码上，H1也就对搜索引擎失去了作用。
<h1><img src=”http://5key.net/xxxx.jpg” mce_src=”http://5key.net/xxxx.jpg”></h1>
其实通过一点小的调整则可以将两者兼顾。先来看看效果：http://5key.net/demo/h1
再来看看这段。H1的代码对搜索引擎依然可读，我们只是利用text-indent:-9999px;将“邀请好友加入”的文字远远的扔到左边去了。
- <style>
- .test{}
- .test h1{margin:0; padding:0; text-indent:-9999px; width:522px; height:45px; background:url(header.gif) no-repeat;}
- .testbox{background:url(bg.gif); width:522px; height:323px; }
- </style>
- <h1>邀请好友加入</h1>
