用CSS实现标题后面加省略号
[ 2010-11-09 12:53 | by 草山湖 ]
在网页中，对于标题字数太多时，页面布局会很难看。下面是用CSS来实现带省略号的效果。
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 300px;height:120px; margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #D4D4D4;background: #F1F1F1;}
li { margin: 12px 0; }
li a {display: block;width: 120px;overflow: hidden;/*注意不要写在最后了*/white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
li:not(p) {clear: both;}
li:not(p) a {max-width: 170px;float: left;}
li:not(p):after {content: "...";float: left;width: 25px;padding-left: 5px;color: #000;}
</style>
预览效果，请点这里：attachment.php?fid=417
<style>
* { margin: 0; padding: 0; }
a { text-decoration: none; color: #000; }
a:hover { text-decoration: none; color: #000; }
ul {width: 300px;height:120px; margin: 40px auto;padding: 12px 4px 12px 24px;border: 1px solid #D4D4D4;background: #F1F1F1;}
li { margin: 12px 0; }
li a {display: block;width: 120px;overflow: hidden;/*注意不要写在最后了*/white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
li:not(p) {clear: both;}
li:not(p) a {max-width: 170px;float: left;}
li:not(p):after {content: "...";float: left;width: 25px;padding-left: 5px;color: #000;}
</style>
预览效果，请点这里：attachment.php?fid=417
Using ALT And TITLE Attributes
[ 2010-04-20 12:05 | by 草山湖 ]
alt属性
1. 在XHTML标准里，图片的alt 属性是必须的
2. 使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换 文字是用来替代图像而不是提供额外说明文字的。
3. 保证那些文字确实为那些看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以使用空的值（alt=""，引号中间没有空格），而不是使用不相关的替换文字比如“blue bullet”或者“spacer.gif”
title属性
1. title属性为设置该属性的元素提供建议性的信息。
2. title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签
3. 使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool tip）, 由制造商来决定如何渲染title文字
4. title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。
5. title属性值可以比alt属性值设置的更长
虽然在IE中alt可以起到类似title的作用，但是建议大家按照规范使用title来显示说明
1. 在XHTML标准里，图片的alt 属性是必须的
2. 使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换 文字是用来替代图像而不是提供额外说明文字的。
3. 保证那些文字确实为那些看不到图像的人提供了说明信息，并且在上下文中有意义。对于那些装饰性的图片可以使用空的值（alt=""，引号中间没有空格），而不是使用不相关的替换文字比如“blue bullet”或者“spacer.gif”
title属性
1. title属性为设置该属性的元素提供建议性的信息。
2. title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签
3. 使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息（tool tip）, 由制造商来决定如何渲染title文字
4. title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。
5. title属性值可以比alt属性值设置的更长
虽然在IE中alt可以起到类似title的作用，但是建议大家按照规范使用title来显示说明
div 在IE中不居中，解决方法
[ 2010-02-08 10:35 | by 草山湖 ]
在FireFox中，只要把DIV属性设为：margin:auto，就可以居中了，但是在IE中这样设置却不生效。在IE中解决方法请看下面的CSS样式设置：
<body>
<div id="wrapper">
</div>
</body>
body{
text-align:center;
}
#wrapper{
width:720px;
margin:0 auto;
text-align:left;
}
<body>
<div id="wrapper">
</div>
</body>
body{
text-align:center;
}
#wrapper{
width:720px;
margin:0 auto;
text-align:left;
}
jQuery 判断控件ID是否存在
[ 2010-01-14 20:55 | by 草山湖 ]//正确方法示例：
if ($("#myid").length > 0) {
alert("控件存在");
}
else{
alert("控件不存在！");
}
//错误方法：
if ($("#myid"))
{...}
JavaScript 能跨域读写 Cookie 吗？
[ 2010-01-13 22:29 | by 草山湖 ]
JavaScript 不能实现跨域读写 Cookie。下面是JS对cookie 的常用操作
//获得Cookie解码后的值
function GetCookieVal(offset)
{
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
//获得Cookie解码后的值
function GetCookieVal(offset)
{
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
