1.可输入的select模拟。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<html>
<head>
<title>TW之运行代码插件--Ayin增强版</title>
<style type="text/css">
div,span,p,td,font{font-size:9pt;}
hr {margin-top:7px;*margin: 0; border: 0; color: #FFF; background-color: #FFF; height: 1px }
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="100%" border="1"><tr><td align="left">
<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:103px;height:19px;clip:rect(-1px 105px 105px 85px);">
<select name="aabb" id="aabb" style="width:105px;height:20px;margin:-2px;" onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
<option value="" style="color:#c2c2c2;">---请选择---</option>
<option value="闲人书库">闲人书库</option>
<option value="闲人BLOG">闲人BLOG</option>
<option value="闲人设计">闲人设计</option>
<option value="闲人软件">闲人软件</option>
</select>
</span>
<span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:95px;height:19px;">
<input type="text" name="ccdd" id="ccdd" value="可选择也可输入的下拉框" style="width:85px;height:15px;border:0pt;">
</span>
</td></tr></table>
</body>
</html>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<html>
<head>
<title>TW之运行代码插件--Ayin增强版</title>
<style type="text/css">
div,span,p,td,font{font-size:9pt;}
hr {margin-top:7px;*margin: 0; border: 0; color: #FFF; background-color: #FFF; height: 1px }
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" width="100%" border="1"><tr><td align="left">
<span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:103px;height:19px;clip:rect(-1px 105px 105px 85px);">
<select name="aabb" id="aabb" style="width:105px;height:20px;margin:-2px;" onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document.getElementById('aabb').selectedIndex].value;">
<option value="" style="color:#c2c2c2;">---请选择---</option>
<option value="闲人书库">闲人书库</option>
<option value="闲人BLOG">闲人BLOG</option>
<option value="闲人设计">闲人设计</option>
<option value="闲人软件">闲人软件</option>
</select>
</span>
<span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:95px;height:19px;">
<input type="text" name="ccdd" id="ccdd" value="可选择也可输入的下拉框" style="width:85px;height:15px;border:0pt;">
</span>
</td></tr></table>
</body>
</html>
</BODY>
</HTML>
2.css处理下拉列表。
<!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=gb2312" />
<title>css处理下拉列表-这一技客:www.geekso.com</title>
<style>
.IN {
BORDER-RIGHT: #afaeae 1px solid; BORDER-TOP: #afaeae 1px solid; FONT-SIZE: 10pt; BORDER-LEFT: #afaeae 1px solid; COLOR: #7b7b7b; BORDER-BOTTOM: #afaeae 1px solid; FONT-FAMILY: "verdana"
}
.selectBoxSelectedArea {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 17px; PADDING-TOP: 1px; BACKGROUND-COLOR: #ffffff
}
.selectBoxSelectedAreaFocus {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 1px; BACKGROUND-COLOR: #ffffff
}
.selectBoxOption {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 17px; PADDING-TOP: 2px; BACKGROUND-COLOR: #ffffff
}
.selectBoxOptionOver {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 2px; BACKGROUND-COLOR: #ffffff
}
.selectBoxOptionInnerLayer {
BORDER-RIGHT: #b4b4b4 1px solid; BORDER-TOP: #b4b4b4 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #b4b4b4; OVERFLOW: auto; BORDER-LEFT: #b4b4b4 1px solid; SCROLLBAR-SHADOW-COLOR: #b4b4b4; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #838383; SCROLLBAR-TRACK-COLOR: #eaeaea; BORDER-BOTTOM: #b4b4b4 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; BACKGROUND-COLOR: #ffffff
}
</style>
</head>
<body >
<SCRIPT LANGUAGE="JavaScript">
var nowOpenedSelectBox = "";
var mousePosition = "";
function selectThisValue(thisId,thisIndex,thisValue,thisString) {
var objId = thisId;
var nowIndex = thisIndex;
var valueString = thisString;
var sourceObj = document.getElementById(objId);
var nowSelectedValue = document.getElementById(objId+"SelectBoxOptionValue"+nowIndex).value;
hideOptionLayer(objId);
if (sourceObj) sourceObj.value = nowSelectedValue;
settingValue(objId,valueString);
selectBoxFocus(objId);
if (sourceObj.onchange) sourceObj.onchange();
}
function settingValue(thisId,thisString) {
var objId = thisId;
var valueString = thisString;
var selectedArea = document.getElementById(objId+"selectBoxSelectedValue");
if (selectedArea) selectedArea.innerText = valueString;
}
function viewOptionLayer(thisId) {
var objId = thisId;
var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");
if (optionLayer) optionLayer.style.display = "";
nowOpenedSelectBox = objId;
setMousePosition("inBox");
}
function hideOptionLayer(thisId) {
var objId = thisId;
var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");
if (optionLayer) optionLayer.style.display = "none";
}
function setMousePosition(thisValue) {
var positionValue = thisValue;
mousePosition = positionValue;
}
function clickMouse() {
if (mousePosition == "out") hideOptionLayer(nowOpenedSelectBox);
}
function selectBoxFocus(thisId) {
var objId = thisId;
var obj = document.getElementById(objId + "selectBoxSelectedValue");
obj.className = "selectBoxSelectedAreaFocus";
obj.focus();
}
function selectBoxBlur(thisId) {
var objId = thisId;
var obj = document.getElementById(objId + "selectBoxSelectedValue");
obj.className = "selectBoxSelectedArea";
}
function makeSelectBox(thisId) {
var downArrowSrc = "http://www.geekso.com/attachment/3j.jpg"; //三角
var downArrowSrcWidth = 16; //宽
var optionHeight = 18; // 高
var optionMaxNum = 7; //
var optionInnerLayerHeight = "";
var objId = thisId;
var obj = document.getElementById(objId);
var selectBoxWidth = parseInt(obj.style.width);
var selectBoxHeight = parseInt(obj.style.height);
if (obj.options.length > optionMaxNum) optionInnerLayerHeight = "height:"+ (optionHeight * optionMaxNum) + "px";
newSelect = "<table id='" + objId + "selectBoxOptionLayer' cellpadding='0' cellspacing='0' border='0' style='position:absolute;z-index:100;display:none;' onMouseOver=\"viewOptionLayer('"+ objId + "')\" onMouseOut=\"setMousePosition('out')\">";
newSelect += " <tr>";
newSelect += " <td height='" + selectBoxHeight + "' style='cursor:hand;' onClick=\"hideOptionLayer('"+ objId + "')\"></td>";
newSelect += " </tr>";
newSelect += " <tr>";
newSelect += " <td height='1'></td>";
newSelect += " </tr>";
newSelect += " <tr>";
newSelect += " <td bgcolor='#D3D3D3'>";
newSelect += " <div class='selectBoxOptionInnerLayer' style='width:" + (selectBoxWidth-1) + "px;" + optionInnerLayerHeight + "'>";
newSelect += " <table cellpadding='0' cellspacing='0' border='0' width='100%' style='table-layout:fixed;word-break:break-all;'>";
for (var i=0 ; i < obj.options.length ; i++) {
var nowValue = obj.options[i].value;
var nowText = obj.options[i].text;
newSelect += " <tr>";
newSelect += " <td onMouseOver=this.style.backgroundColor='#FFBA00';return true; onMouseOut=this.style.backgroundColor='FFFFFF';return true; bgcolor=#FFFFFF height='" + optionHeight + "' class='selectBoxOption' onMouseOver=\"this.className='selectBoxOptionOver'\" onMouseOut=\"this.className='selectBoxOption'\" onClick=\"selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "')\" style='cursor:hand;' >" + nowText + "</td>";
newSelect += " <input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'>";
newSelect += " </tr>";
}
newSelect += " </table>";
newSelect += " </div>";
newSelect += " </td>";
newSelect += " </tr>";
newSelect += "</table>";
newSelect += "<table cellpadding='0' cellspacing='1' border='0' bgcolor='#B4B4B4' onClick=\"viewOptionLayer('"+ objId + "')\" style='cursor:hand;'>";
newSelect += " <tr>";
newSelect += " <td style='padding-left:1px' bgcolor='#FFFFFF'>";
newSelect += " <table cellpadding='0' cellspacing='0' border='0'>";
newSelect += " <tr>";
newSelect += " <td><div id='" + objId + "selectBoxSelectedValue' class='selectBoxSelectedArea' style='width:" + (selectBoxWidth - downArrowSrcWidth - 4) + "px;height:" + (selectBoxHeight - 2) + "px;overflow:hidden;' onBlur=\"selectBoxBlur('" + objId + "')\" ></div></td>";
newSelect += " <td><img src='" + downArrowSrc + "' width='" + downArrowSrcWidth + "' border='0'></td>";
newSelect += " </tr>";
newSelect += " </table>";
newSelect += " </td>";
newSelect += " </tr>";
newSelect += "</table>";
document.write(newSelect);
var haveSelectedValue = false;
for (var i=0 ; i < obj.options.length ; i++) {
if (obj.options[i].selected == true) {
haveSelectedValue = true;
settingValue(objId,obj.options[i].text);
}
}
if (!haveSelectedValue) settingValue(objId,obj.options[0].text);
}
document.onmousedown = clickMouse;
</SCRIPT>
<Select class=in id=selectTest style="DISPLAY: none; BACKGROUND: #ffffff; WIDTH: 130px; HEIGHT: 19px" name=search>
<OPTION value="" selected>www.geekso.com</OPTION>
<OPTION value=name>geekso.com</OPTION>
<OPTION value=title>这一技客</OPTION>
</Select>
<SCRIPT>makeSelectBox("selectTest");</SCRIPT>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css处理下拉列表-这一技客:www.geekso.com</title>
<style>
.IN {
BORDER-RIGHT: #afaeae 1px solid; BORDER-TOP: #afaeae 1px solid; FONT-SIZE: 10pt; BORDER-LEFT: #afaeae 1px solid; COLOR: #7b7b7b; BORDER-BOTTOM: #afaeae 1px solid; FONT-FAMILY: "verdana"
}
.selectBoxSelectedArea {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 17px; PADDING-TOP: 1px; BACKGROUND-COLOR: #ffffff
}
.selectBoxSelectedAreaFocus {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 1px; BACKGROUND-COLOR: #ffffff
}
.selectBoxOption {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #000000; LINE-HEIGHT: 17px; PADDING-TOP: 2px; BACKGROUND-COLOR: #ffffff
}
.selectBoxOptionOver {
PADDING-LEFT: 3px; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 17px; PADDING-TOP: 2px; BACKGROUND-COLOR: #ffffff
}
.selectBoxOptionInnerLayer {
BORDER-RIGHT: #b4b4b4 1px solid; BORDER-TOP: #b4b4b4 1px solid; SCROLLBAR-FACE-COLOR: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #b4b4b4; OVERFLOW: auto; BORDER-LEFT: #b4b4b4 1px solid; SCROLLBAR-SHADOW-COLOR: #b4b4b4; SCROLLBAR-3DLIGHT-COLOR: #ffffff; SCROLLBAR-ARROW-COLOR: #838383; SCROLLBAR-TRACK-COLOR: #eaeaea; BORDER-BOTTOM: #b4b4b4 1px solid; SCROLLBAR-DARKSHADOW-COLOR: #ffffff; BACKGROUND-COLOR: #ffffff
}
</style>
</head>
<body >
<SCRIPT LANGUAGE="JavaScript">
var nowOpenedSelectBox = "";
var mousePosition = "";
function selectThisValue(thisId,thisIndex,thisValue,thisString) {
var objId = thisId;
var nowIndex = thisIndex;
var valueString = thisString;
var sourceObj = document.getElementById(objId);
var nowSelectedValue = document.getElementById(objId+"SelectBoxOptionValue"+nowIndex).value;
hideOptionLayer(objId);
if (sourceObj) sourceObj.value = nowSelectedValue;
settingValue(objId,valueString);
selectBoxFocus(objId);
if (sourceObj.onchange) sourceObj.onchange();
}
function settingValue(thisId,thisString) {
var objId = thisId;
var valueString = thisString;
var selectedArea = document.getElementById(objId+"selectBoxSelectedValue");
if (selectedArea) selectedArea.innerText = valueString;
}
function viewOptionLayer(thisId) {
var objId = thisId;
var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");
if (optionLayer) optionLayer.style.display = "";
nowOpenedSelectBox = objId;
setMousePosition("inBox");
}
function hideOptionLayer(thisId) {
var objId = thisId;
var optionLayer = document.getElementById(objId+"selectBoxOptionLayer");
if (optionLayer) optionLayer.style.display = "none";
}
function setMousePosition(thisValue) {
var positionValue = thisValue;
mousePosition = positionValue;
}
function clickMouse() {
if (mousePosition == "out") hideOptionLayer(nowOpenedSelectBox);
}
function selectBoxFocus(thisId) {
var objId = thisId;
var obj = document.getElementById(objId + "selectBoxSelectedValue");
obj.className = "selectBoxSelectedAreaFocus";
obj.focus();
}
function selectBoxBlur(thisId) {
var objId = thisId;
var obj = document.getElementById(objId + "selectBoxSelectedValue");
obj.className = "selectBoxSelectedArea";
}
function makeSelectBox(thisId) {
var downArrowSrc = "http://www.geekso.com/attachment/3j.jpg"; //三角
var downArrowSrcWidth = 16; //宽
var optionHeight = 18; // 高
var optionMaxNum = 7; //
var optionInnerLayerHeight = "";
var objId = thisId;
var obj = document.getElementById(objId);
var selectBoxWidth = parseInt(obj.style.width);
var selectBoxHeight = parseInt(obj.style.height);
if (obj.options.length > optionMaxNum) optionInnerLayerHeight = "height:"+ (optionHeight * optionMaxNum) + "px";
newSelect = "<table id='" + objId + "selectBoxOptionLayer' cellpadding='0' cellspacing='0' border='0' style='position:absolute;z-index:100;display:none;' onMouseOver=\"viewOptionLayer('"+ objId + "')\" onMouseOut=\"setMousePosition('out')\">";
newSelect += " <tr>";
newSelect += " <td height='" + selectBoxHeight + "' style='cursor:hand;' onClick=\"hideOptionLayer('"+ objId + "')\"></td>";
newSelect += " </tr>";
newSelect += " <tr>";
newSelect += " <td height='1'></td>";
newSelect += " </tr>";
newSelect += " <tr>";
newSelect += " <td bgcolor='#D3D3D3'>";
newSelect += " <div class='selectBoxOptionInnerLayer' style='width:" + (selectBoxWidth-1) + "px;" + optionInnerLayerHeight + "'>";
newSelect += " <table cellpadding='0' cellspacing='0' border='0' width='100%' style='table-layout:fixed;word-break:break-all;'>";
for (var i=0 ; i < obj.options.length ; i++) {
var nowValue = obj.options[i].value;
var nowText = obj.options[i].text;
newSelect += " <tr>";
newSelect += " <td onMouseOver=this.style.backgroundColor='#FFBA00';return true; onMouseOut=this.style.backgroundColor='FFFFFF';return true; bgcolor=#FFFFFF height='" + optionHeight + "' class='selectBoxOption' onMouseOver=\"this.className='selectBoxOptionOver'\" onMouseOut=\"this.className='selectBoxOption'\" onClick=\"selectThisValue('"+ objId + "'," + i + ",'" + nowValue + "','" + nowText + "')\" style='cursor:hand;' >" + nowText + "</td>";
newSelect += " <input type='hidden' id='"+ objId + "SelectBoxOptionValue" + i + "' value='" + nowValue + "'>";
newSelect += " </tr>";
}
newSelect += " </table>";
newSelect += " </div>";
newSelect += " </td>";
newSelect += " </tr>";
newSelect += "</table>";
newSelect += "<table cellpadding='0' cellspacing='1' border='0' bgcolor='#B4B4B4' onClick=\"viewOptionLayer('"+ objId + "')\" style='cursor:hand;'>";
newSelect += " <tr>";
newSelect += " <td style='padding-left:1px' bgcolor='#FFFFFF'>";
newSelect += " <table cellpadding='0' cellspacing='0' border='0'>";
newSelect += " <tr>";
newSelect += " <td><div id='" + objId + "selectBoxSelectedValue' class='selectBoxSelectedArea' style='width:" + (selectBoxWidth - downArrowSrcWidth - 4) + "px;height:" + (selectBoxHeight - 2) + "px;overflow:hidden;' onBlur=\"selectBoxBlur('" + objId + "')\" ></div></td>";
newSelect += " <td><img src='" + downArrowSrc + "' width='" + downArrowSrcWidth + "' border='0'></td>";
newSelect += " </tr>";
newSelect += " </table>";
newSelect += " </td>";
newSelect += " </tr>";
newSelect += "</table>";
document.write(newSelect);
var haveSelectedValue = false;
for (var i=0 ; i < obj.options.length ; i++) {
if (obj.options[i].selected == true) {
haveSelectedValue = true;
settingValue(objId,obj.options[i].text);
}
}
if (!haveSelectedValue) settingValue(objId,obj.options[0].text);
}
document.onmousedown = clickMouse;
</SCRIPT>
<Select class=in id=selectTest style="DISPLAY: none; BACKGROUND: #ffffff; WIDTH: 130px; HEIGHT: 19px" name=search>
<OPTION value="" selected>www.geekso.com</OPTION>
<OPTION value=name>geekso.com</OPTION>
<OPTION value=title>这一技客</OPTION>
</Select>
<SCRIPT>makeSelectBox("selectTest");</SCRIPT>
</body>
</html>
(3).div图片垂直居中
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hezc</title>
<style type="text/css">
.hezc{width:200px; height:200px;line-height:200px;font-size:180px;text-align:center;display:table-cell; vertical-align:middle;border:1px solid #ccc}
.hezc img{ vertical-align:middle;}
</style>
</head>
<body>
<div class="hezc">
<img src="http://lh4.ggpht.com/_ukA5Ln2cXIc/SRcgn5exDoI/AAAAAAAAAD4/JqcPpNZDPlI/s400/CSS%E9%80%9F%E8%AE%B0%E5%8D%A1%E7%89%87.gif" border="1" widht="100" height="100"/>
</div>
</body>
</html>
其他地址:http://www.hibloger.com/article.asp?id=75
4.给div加上阴影
<style type="text/css">
.div{
background-color:#9900FF;
width:200px;
height:200px;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999,direction=135,strength=5);
}
</style>
<div class="div">
</div>