前端开发必备工具（2008年3月27日更新）
作者:feiwen8772 日期:2007-12-19
用li实现分页源码示例
作者:feiwen8772 日期:2008-04-23
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>有序列表分页源码/样式示例</title>
<style type="text/css">
.pagination{
overflow:hidden;
margin:0;
padding:10px 10px 6px 10px;
border-top:1px solid #f60;
显示当前状态的导航
作者:feiwen8772 日期:2008-04-23
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Dynamic Navigation with CSS and Javascript: Example 7</title>
<style type="text/css">
body { font-family:verdana; }
#content { float:left; width:400px; border:1px solid #ccc; margin-left:20px; padding:2px 10px 10px 10px; }
ul { margin:0; padding:0; list-style: none; width:200px; float:left; }
ul li { margin:0 0 1px 0; padding:0; }
ul li a {
display:block;
padding:8px;
用JS+css美化下拉框(select)
作者:feiwen8772 日期:2008-04-23
一直以来用CSS控制select都没有实现过。
==================================================
==================================================
<!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">
<HTML>
<HEAD>
<TITLE>搜索条</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
在FF解决自动保存input框内容，通过回车选中
作者:feiwen8772 日期:2008-04-20
在FF中如果在input框中抓了回车键后，ie的自动保存，无法通过回车键完成。
可以通过下列的方法实现，原理，延长页面回车后的动作。
function key_submit(evt)
{
if(evt==null) evt=window.event;
if(evt.keyCode==13) {//捕捉回车键
tempUserName=document.getElementById(”loginForm”).fldEmail.value;
window.setTimeout(’preloginSubmit()’,100);//延迟100毫秒触发
}
}
function preloginSubmit()
{
if (tempUserName==document.getElementById(”loginForm”).fldEmail.value)
loginSubmit();
else
return;
}
制作不规则导航
作者:feiwen8772 日期:2008-04-16
前段时间做一个小项目碰到了一个导航制作的方式然后突然想到曾经很久以前看到的梯形状的不规则导航，就尝试做了一下。结果碰到了几个问题，后来在同事的提醒下总算完成了，记录一下也跟大家分享分享。
先看图（图片只是大致做了一下）
xhtml结构部分内容：
程序代码<li><a href="#" title="菜单">菜单</a></li>
<li><a href="#" title="菜单">菜单</a></li>
<li><a href="#" title="菜单">菜单</a></li>
</ul>
css部分内容：
程序代码body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(attachments/month_0804/d200843194011.gif) center center no-repeat;}
a:hover {color:#000;background:url(attachments/month_0804/s200843194022.gif) 0 0 no-repeat;width:86px;position:relative;}
===================================================
<!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=utf-8" />
<meta name="author" content="Linxz" />
<title>无标题文档</title>
<style type="text/css">
* {margin:0;padding:0;font:normal 12px/25px "宋体";}
body {background:#f8f8f8;}
ul {list-style:none;width:300px;height:25px;margin:20px auto;}
li {float:left;width:86px;height:25px;text-align:center;margin:0 -5px;display:inline;}
a {color:#fff; float:left;width:86px;height:25px;top:0;left:0;background:url(attachments/month_0804/s200843194022.gif) center center no-repeat;}
a:hover {color:#000;background:url(attachments/month_0804/d200843194011.gif) 0 0 no-repeat;width:86px;position:relative;}
</style>
</head>
图片和文字布局问题
作者:feiwen8772 日期:2008-04-16
下拉框(select)遮住弹出层问题
作者:feiwen8772 日期:2008-04-14
在IE6下下拉框(select)会遮住弹出层，用样式办法暂时无法解决，包括z-index这个属性。
想了一个最变态的方法：
就是在层弹出的时候把下拉框给隐藏掉，用display:none属性或visable:hiddle属性;当层隐藏的时候再把下拉框给显示出来：
function hiddenselect()
{
var f = document.forms["form1"];
if (f)
{
for (i=0;i<f.elements.length;i++)
{
if (f.elements[i].type=="select-one")
{
f.elements[i].style.display="none";
}
}
}
}
按回车执行js函数
作者:feiwen8772 日期:2008-04-11
用CSS美化按钮（button）
作者:feiwen8772 日期:2008-04-10
演示地址：http://www.9demo.com/demo/css_button/css_button.htm
我们用 A 包含一个 SPAN 标签来实现此效果：
HTML:
<a class="button" href="#"><span>按钮文字</span></a>
设置按钮样式：
CSS:
<style type="text/css"> a.button { background: transparent url('bg_button_a.gif') no-repeat scroll top right; color: #444; display: block; float: left; font: normal 12px arial, sans-serif; height: 24px; margin-right: 6px; padding-right: 18px; /* sliding doors padding */ text-decoration: none; } a.button span { background: transparent url('bg_button_div.gif') no-repeat; display: block; line-height: 14px; padding: 5px 0 5px 18px; } </style>
为按钮添加点击样式：
