CSS 层最小高度的全兼容写法
星期四, 02. 25. 2010 – Category: 前端技术
min-height:50px;
_height:expression(this.height < 50? "auto" : "50px");
JavaScript Runcode
星期三, 02. 3. 2010 – Category: 前端技术
代码预览器
<HTML>
<HEAD>
<TITLE>代码预览器</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<SCRIPT language=JavaScript>
var currentpos,timer;
function initialize()
{
timer=setInterval("scrollwindow()",50);
}
function sc()
{
clearInterval(timer);
}
function scrollwindow()
{
currentpos=document.body.scrollTop;
window.scroll(0,++currentpos);
if (currentpos != document.body.scrollTop)
sc();
}
[...]
IE8 里中英文字体高度不一样
星期二, 01. 26. 2010 – Category: 前端技术
很多时候会设置字体为“宋体”，就像下图中一开始设置的一样，这样的设置在ie8之前的浏览器都没有问题，在其他浏览器（Firefox，opera…）也都没有问题，但是在IE8里就怪了，出现下面的情况，数字，非中文字符，英文都会比中文高出一点，而且字体越大，差异越明显。我想，这或许是IE8的一个bug。
网上查了有人说可以吧中文的“宋体”写成“simsun”，我试过了，可以的。
font-family:”simsun”,serif;
后来我看了网易得做法：
font-family:\5B8B\4F53,Arial Narrow,arial,serif;
这样挺好，正常了。到底是大网站
head里竟然还用这个“<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />”
学习的同时顺便鄙视一下。
针对IE6,IE7,IE8和firefox浏览器css hack
星期天, 11. 22. 2009 – Category: 前端技术
针对样式名
如果只让ie6看见用*html .head{color:#000;}
如果只让ie7看见用*+html .head{color:#000;}
如果只让ff看见用:root body .head{color:#000;}
如果只让ff、IE8看见用html>/**/body .head{color:#000;}
如果只是不让ie6看见用html>body .head{color:#000;} 即对IE 6无效
如果只是不让ff、IE8看见用*body .head{color:#000;} 即对ff、IE8无效
针对具体属性
如果只让ie6看见用_ .head{_color:#000;}
如果只让ie7看见用+与_结合的方法: .head{+color:#f00;!;_color:#000;}
IE8正式版hack
\9″ 例:”margin:0px auto\9;”.这里的”\9″可以区别所有IE8和FireFox.
“*” IE6、IE7可以识别.IE8、FireFox不能.
“_” IE6可以识别”_”,IE7、IE8、FireFox不能.
如：
.a {color:#f00; color:#f60\9; +color:#00FF00; _color:#0000FF; }
从左到右分别对应 FF,IE8 IE7 IE6
列遍检查网页所有 ，发现SRC属性为空的，将该图片隐藏。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>No display images without src value</title>
</head>
<body>
<script type="text/javascript">
$(function()
{
var pic_len = $("img").length;
var i = 0;
//
for(i=0; i<pic_len; i++){
//alert($("img").eq(i).attr("src"));
if($("img").eq(i).attr("src") == ""){
$("img").eq(i).css({ "display": "none"});
}
}
});
</script>
<img src="" class="imglogo" width="98" height="98" alt="1" />
<img src="http://www.yaoyingying.com/wp-content/gallery/liyugang/thumbs/thumbs_20096171482859913.jpg" class="imglogo" width="100" height="75" alt="2" />
<img src="" class="imglogo" [...]
Javascript 获取 URL 参数
星期天, 09. 20. 2009 – Category: 前端技术
function getArgs( ) {
var args = new Object( );
var query = location.search.substring(1); // Get query string
var pairs = query.split("&"); [...]
http://franca.exofire.net/jq/colorize
Coloriza 是一个Jquery 插件，可以为表格的行添加背景颜色，鼠标动作后为行、列增加高亮效果。你可以为很多行、列填色，只要你愿意。再从点击已经填色的行、列就可以还原表格本色。
怎么使用？
使用默认设置（colorizes a row）
$(‘#yourTableId’).colorize() ;
其他设置和参数:
altColor : alternate row background color. The default is ‘#ECF6FC’, ‘none’ can be used for no alternate background color.交替行的背景颜色。默认值为’＃ECF6FC’，’none’ 可替代的背景颜色使用。
bgColor : background color (The default background color is white).背景颜色（默认背景颜色为白色）。
hoverColor : background color when you hover a mouse over a row. The default is ‘#BCD4EC’.背景颜色当鼠标经过行。默认值为’＃BCD4EC’。
hoverClass: style class for mouseover; takes precedence [...]
在将网站更换成新网址的情况下，可能会在旧网址上使用到一些『转导网址』的方法，以便将原本的使用者及其流量引导到新的网址去。
以下整理、讨论到几种转导(Redirect)网址的技术方法，并且探讨该方法对 SEO 的影响：
1. 使用 HTTP 通讯协议 301 Moved Permanently 来完成转导网址 (永久转址)
(建议使用，不会对 SEO 有不良影响)
o PHP 程序范例:
<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://www.yaoyingying.com/");
?>
<p>The document has moved <a href="http://www.yaoyingying.com/">here</a>.</p>
注1:
使用者的浏览器必须根据 HTTP header 的 Location 字段值(称做URI)来转导网址。
注2:
除非 Request Method 是 HEAD，不然服务器端回复的讯息内必须包含一短的新网址的连结(hyperlink)信息。
o ASP 程序范例:
<%@ Language=VBScript %>
<%
Response.Status="301 Moved Permanently"
Response.AddHeader "Location", " http://www.yaoyingying.com/"
Response.End
%>
<p>The document has moved <a href="http://www.yaoyingying.com/">here</a>.</p>
o ASP.NET 程序范例:
<script runat="server">
private void [...]
搜索框提示效果，输入框获取焦点，则原提示关键字消失，失去焦点，还原原关键字，当然是在没有输入用户关键字的前提下！
JQUERY 层-隐藏-显示 效果
可以应用与文章列表摘要模式-列表模式切换：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN">
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simple JQuery Collapsing menu</title>
</head>
<body>
<script type="text/javascript">
$(function()
{
var i = 1;
$("#mostrar").click(function(event) {
if(i%2 == 1)
$("#mostrar").html("简洁模式");
else
$("#mostrar").html("摘要模式");
event.preventDefault();
$(".box2").slideToggle();
i++;
});
});
</script>
<style type="text/css">
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #D0E8F4;
background-color:#ECF8FD;
}
h2 { font-size:14px;}
.itembox { border:#99CCCC solid 1px; margin-bottom:10px; padding:10px;}
</style>
<a href="#" id="mostrar">摘要模式</a>
<div id="content" style="width:70%">
<div class="news-list">
<div [...]