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结构:

[html]
<div id="warbox" class="clearfix">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
[/html]

然后是CSS代码:

[css]
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;zoom:1; }
.clearfix { display: block; }
/* End hide from IE-mac */
[/css]
Read More

font简写

font的属性简写里面常用的有5个是可以写在一起的:

font-style设定斜体 如:font-style: italic;
font-weight设定文字粗细 如:font-weight: bold;
font-size设定文字大小 如:font-size: 12px;
line-height设定行距 如:line-height: 150%;
color设定文字颜色(注意不是font-color) 如:color: red;
font-family设定字体 如:font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

如何简写,其实顺序是很重要的,如果顺序错了,那就不会正确解析了

正确的顺序是:
font:是否斜体 字体粗细 字体大小/行高 字体样式

例子:
font: italic bold 12px/18px Arial, Helvetica, sans-serif ;
当然最常用的是下面的写法:
font: bold 12px/18px Arial;

FOUC – 文档样式闪烁

如果你是一名前端工作者,总有一天会听到FOUC这个词,它是Flash Of Unstyled Content的缩写,翻译过来就是文档样式闪烁,下面解释一下什么是FOUC。

问题描述

它指的是在某些景象下,IE在加载网页时会呈现短暂的CSS样式失效。
1. 只产生在Windows上的IE(5.0版本以上)
2. 只产生在那些会呈现FOUC现象的网页
3. IE的临时文件夹中没有缓存过该页面的CSS文件

Read More

IE6、7、8,火狐等浏览器常见兼容性问题整理

首先,浏览器兼容性的问题有很多,要在工作中不断总结,这里根本不可能说全,非常欢迎您用评论的方式帮我补充。

IE6能识别下划线”_”和星号” * “,IE7能识别星号” * “,但不能识别下划线”_”,IE8能识别” 9″,但不能识别下划线”_”,而firefox两个都不能认识,却可以识别‘!important’。等等
书写顺序,一般是将识别能力强的浏览器的CSS写在后面。下面列举常用的CSS hack方法:

1:!important
!important作用是提高指定样式规则的应用优先权。
IE7以及所有标准浏览器能识别!important
区别IE6与IE7与其他浏览器

.browserTest {
border:20px solid #60A179 !important;
border:20px solid #00F;
}

在Mozilla中或者IE7浏览时候,能够理解!important的优先级,因此显示#60A179的颜色:
在IE6中浏览时候,不能够理解!important的优先级,因此显示#00F的颜色:

2:*
IE都能识别*;标准浏览器(如火狐)不能识别*
区别IE与火狐

.browserTest {
border:20px solid #60A179;
*border:20px solid #00F;
}

区别IE7,IE6与火狐

.browserTest{
border:20px solid #60A179;
*border:20px solid #00F !important;
*border:20px solid ###;
}

3:_
IE6支持下划线,IE7和firefox均不支持下划线
区别IE7,IE6与火狐

.browserTest {
border:20px solid #60A179;
*border:20px solid #00F;
_border:20px solid ###;
}

Read More