九宫格布局

据说业界比较有名气的司徒正美被这道题给难住了。来自一淘的 WEB 前端的面试题,题目要求如下:
使用 HTML+CSS 实现如图布局,border-width:5px,格子大小是 50px*50px,hover时边框变成红色,需要考虑 IE6+ 和语义化的结构。
题目不难,主要还是考察面试者对 CSS 灵活运用程度。

4F3B001DFEC59B65B196E4E1FCA151B65088292D5689A_170_170

下面是我写的方法,欢迎参考~

提示:你可以先修改部分代码再运行。

title 换行

html里title属性换行的方法

众所周知,对于链接和图片,我们可以通过添加title属性以显示一些说明文字,一般情况下,这些文字都是显示成一行,那么有没有办法让它以多行的方式显示呢?解决的方法有两种:

1.将title属性分成几行来写,例如:

[html]<a href=#" title="说明一
说明二
说明三">点我</a>[/html]

不过这样会显示出来多余的br 演示效果点我

2.第一行相对来说不够直观,我们还可以在需换行的地方添加 (将&改为半角,下同)或 来实现:

[html]<a href=#" title="说明一&#10;说明二&#10;说明三">点我</a>
<a href=#" title="说明一&#13;说明二&#13;说明三">点我</a>[/html]
像这样就完美了 点我

顺便说一句,在这个特殊符号对照表里面可以找到很多有趣的东西~ http://liuxiaofan.com/?p=804

3列、2列自适应布局,中部内容优先显示3列布局等方法。

最近想整理一下几种div+css布局的方法,比如自适应高度,自适应宽度,3列,2列,中部内容提前、特殊布局等等,我会慢慢在这篇博客中更新。

1. 固定宽度,中部DIV内容优先显示布局

说明:这种布局一般常见与社交网站,例如QQ空间,朋友网等等,特点是把中部信息的内容放在前面显示,左侧菜单内容最后显示。
实现方法:重点在于使用了margin-left:-960px;这样样式,如果能深入了解一下margin的负值和浮动原理就可以很好的理解此方法了。
下面是demo:

提示:你可以先修改部分代码再运行。

Read More

主流的clearfix清楚浮动原理

我目前已知的清除浮动的方法大概有3种

首先是HTML结构:

<div id="warbox" class="clearfix">
    <div id="left"&gt;Left</div>
    <div id="right"&gt;Right</div>
</div>

然后是CSS代码:

<pre class='prettyprint'>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* <a href="http://liuxiaofan.com/" title="html">html</a> .clearfix { height: 1%;zoom:1; }
.clearfix { display: block; }
/* End hide from IE-mac */

Read More