二十一 漂亮的表格:
复制内容到剪贴板
代码:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Tables</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
/* CSS Document */
body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
}
a {
color: #c75f3e;
}
#mytable {
width: 700px;
padding: 0;
margin: 0;
}
caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
}
th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #CAE8EA url(images/bg_header.jpg) no-repeat;
}
th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
}
td.alt {
background: #F5FAFA;
color: #797268;
}
th.spec {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #fff url(images/bullet1.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
}
th.specalt {
border-left: 1px solid #C1DAD7;
border-top: 0;
background: #f5fafa url(images/bullet2.gif) no-repeat;
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #797268;
}
/*---------for IE 5.x bug*/
html>body td{ font-size:11px;}
</style>
<body>
<table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac
G5 series">
<caption> </caption>
<tr>
<th scope="col" abbr="Configurations" class="nobg">Configurations</th>
<th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
<th scope="col" abbr="Dual 2">Dual 2GHz</th>
<th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
</tr>
<tr>
<th scope="row" abbr="Model" class="spec">lipeng</th>
<td>M9454LL/A</td>
<td>M9455LL/A</td>
<td>M9457LL/A</td>
</tr>
<tr>
<th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>
<td class="alt">Dual 1.8GHz PowerPC G5</td>
<td class="alt">Dual 2GHz PowerPC G5</td>
<td class="alt">Dual 2.5GHz PowerPC G5</td>
</tr>
<tr>
<th scope="row" abbr="Frontside bus" class="spec">地图名片</th>
<td>900MHz per processor</td>
<td>1GHz per processor</td>
<td>1.25GHz per processor</td>
</tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">图秀卡</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr>
</table>
</body>
</html>
二十二 经典的带阴影的可拖动的浮动层
复制内容到剪贴板
代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MyPixbot</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {//reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
function MM_findObj(n, d) { //v4.01
var p,i,x;if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
function
MM_dragLayer(objName,x,hL,hT,hW,hH,toFront,dropBack,cU,cD,cL,cR,targL,targT,tol,dropJS,et,dragJS
) { //v4.01
//Copyright 1998 Macromedia, Inc. All rights reserved.
var i,j,aLayer,retVal,curDrag=null,curLeft,curTop,IE=document.all,NS4=document.layers;
var NS6=(!IE&&document.getElementById), NS=(NS4||NS6); if (!IE && !NS) return false;
retVal = true; if(IE && event) event.returnValue = true;
if (MM_dragLayer.arguments.length > 1) {
curDrag = MM_findObj(objName); if (!curDrag) return false;
if (!document.allLayers) { document.allLayers = new Array();
with (document) if (NS4) { for (i=0; i<layers.length; i++) allLayers[i]=layers[i];
for (i=0; i<allLayers.length; i++) if (allLayers[i].document &&
allLayers[i].document.layers)
with (allLayers[i].document) for (j=0; j<layers.length; j++)
allLayers[allLayers.length]=layers[j];
} else {
if (NS6) { var spns = getElementsByTagName("span"); var all =
getElementsByTagName("div");
for (i=0;i<spns.length;i++) if (spns[i].style&&spns[i].style.position)
allLayers[allLayers.length]=spns[i];}
for (i=0;i<all.length;i++) if (all[i].style&&all[i].style.position)
allLayers[allLayers.length]=all[i];
} }
curDrag.MM_dragOk=true; curDrag.MM_targL=targL; curDrag.MM_targT=targT;
curDrag.MM_tol=Math.pow(tol,2); curDrag.MM_hLeft=hL; curDrag.MM_hTop=hT;
curDrag.MM_hWidth=hW; curDrag.MM_hHeight=hH; curDrag.MM_toFront=toFront;
curDrag.MM_dropBack=dropBack; curDrag.MM_dropJS=dropJS;
curDrag.MM_everyTime=et; curDrag.MM_dragJS=dragJS;
curDrag.MM_oldZ = (NS4)?curDrag.zIndex:curDrag.style.zIndex;
curLeft= (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
if (String(curLeft)=="NaN") curLeft=0; curDrag.MM_startL = curLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curTop)=="NaN") curTop=0; curDrag.MM_startT = curTop;
curDrag.MM_bL=(cL<0)?null:curLeft-cL; curDrag.MM_bT=(cU<0)?null:curTop-cU;
curDrag.MM_bR=(cR<0)?null:curLeft+cR; curDrag.MM_bB=(cD<0)?null:curTop+cD;
curDrag.MM_LEFTRIGHT=0; curDrag.MM_UPDOWN=0; curDrag.MM_SNAPPED=false; //use in your JS!
document.onmousedown = MM_dragLayer; document.onmouseup = MM_dragLayer;
if (NS) document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
} else {
var theEvent = ((NS)?objName.type:event.type);
if (theEvent == 'mousedown') {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
var maxDragZ=null; document.MM_maxZ = 0;
for (i=0; i<document.allLayers.length; i++) { aLayer = document.allLayers[i];
var aLayerZ = (NS4)?aLayer.zIndex:parseInt(aLayer.style.zIndex);
if (aLayerZ > document.MM_maxZ) document.MM_maxZ = aLayerZ;
var isVisible = (((NS4)?aLayer.visibility:aLayer.style.visibility).indexOf('hid') ==
-1);
if (aLayer.MM_dragOk != null && isVisible) with (aLayer) {
var parentL=0; var parentT=0;
if (NS6) { parentLayer = aLayer.parentNode;
while (parentLayer != null && parentLayer.style.position) {
parentL += parseInt(parentLayer.offsetLeft); parentT +=
parseInt(parentLayer.offsetTop);
parentLayer = parentLayer.parentNode;
} } else if (IE) { parentLayer = aLayer.parentElement;
while (parentLayer != null && parentLayer.style.position) {
parentL += parentLayer.offsetLeft; parentT += parentLayer.offsetTop;
parentLayer = parentLayer.parentElement; } }
var
tmpX=mouseX-(((NS4)?pageX:((NS6)?parseInt(style.left):style.pixelLeft)+parentL)+MM_hLeft);
var tmpY=mouseY-(((NS4)?pageY:((NS6)?parseInt(style.top):style.pixelTop)
+parentT)+MM_hTop);
if (String(tmpX)=="NaN") tmpX=0; if (String(tmpY)=="NaN") tmpY=0;
var tmpW = MM_hWidth;if (tmpW <= 0) tmpW += ((NS4)?clip.width :offsetWidth);
var tmpH = MM_hHeight; if (tmpH <= 0) tmpH += ((NS4)?clip.height:offsetHeight);
if ((0 <= tmpX && tmpX < tmpW && 0 <= tmpY && tmpY < tmpH) && (maxDragZ == null
|| maxDragZ <= aLayerZ)) { curDrag = aLayer; maxDragZ = aLayerZ; } } }
if (curDrag) {
document.onmousemove = MM_dragLayer; if (NS4) document.captureEvents(Event.MOUSEMOVE);
curLeft = (NS4)?curDrag.left:(NS6)?parseInt(curDrag.style.left):curDrag.style.pixelLeft;
curTop = (NS4)?curDrag.top:(NS6)?parseInt(curDrag.style.top):curDrag.style.pixelTop;
if (String(curLeft)=="NaN") curLeft=0; if (String(curTop)=="NaN") curTop=0;
MM_oldX = mouseX - curLeft; MM_oldY = mouseY - curTop;
document.MM_curDrag = curDrag;curDrag.MM_SNAPPED=false;
if(curDrag.MM_toFront) {
eval('curDrag.'+((NS4)?'':'style.')+'zIndex=document.MM_maxZ+1');
if (!curDrag.MM_dropBack) document.MM_maxZ++; }
retVal = false; if(!NS4&&!NS6) event.returnValue = false;
} } else if (theEvent == 'mousemove') {
if (document.MM_curDrag) with (document.MM_curDrag) {
var mouseX = (NS)?objName.pageX : event.clientX + document.body.scrollLeft;
var mouseY = (NS)?objName.pageY : event.clientY + document.body.scrollTop;
newLeft = mouseX-MM_oldX; newTop= mouseY-MM_oldY;
if (MM_bL!=null) newLeft = Math.max(newLeft,MM_bL);
if (MM_bR!=null) newLeft = Math.min(newLeft,MM_bR);
if (MM_bT!=null) newTop= Math.max(newTop ,MM_bT);
if (MM_bB!=null) newTop= Math.min(newTop ,MM_bB);
MM_LEFTRIGHT = newLeft-MM_startL; MM_UPDOWN = newTop-MM_startT;
if (NS4) {left = newLeft; top = newTop;}
else if (NS6){style.left = newLeft; style.top = newTop;}
else {style.pixelLeft = newLeft; style.pixelTop = newTop;}
if (MM_dragJS) eval(MM_dragJS);
retVal = false; if(!NS) event.returnValue = false;
} } else if (theEvent == 'mouseup') {
document.onmousemove = null;
if (NS) document.releaseEvents(Event.MOUSEMOVE);
if (NS) document.captureEvents(Event.MOUSEDOWN); //for mac NS
if (document.MM_curDrag) with (document.MM_curDrag) {
if (typeof MM_targL =='number' && typeof MM_targT == 'number' &&
(Math.pow(MM_targL-((NS4)?left:(NS6)?parseInt(style.left):style.pixelLeft),2)+
Math.pow(MM_targT-((NS4)?top:(NS6)?parseInt(style.top):style.pixelTop),2))<=MM_tol)
{
if (NS4) {left = MM_targL; top = MM_targT;}
else if (NS6) {style.left = MM_targL; style.top = MM_targT;}
else {style.pixelLeft = MM_targL; style.pixelTop = MM_targT;}
MM_SNAPPED = true; MM_LEFTRIGHT = MM_startL-MM_targL; MM_UPDOWN = MM_startT-MM_targT;
}
if (MM_everyTime || MM_SNAPPED) eval(MM_dropJS);
if(MM_dropBack) {if (NS4) zIndex = MM_oldZ; else style.zIndex = MM_oldZ;}
retVal = false; if(!NS) event.returnValue = false; }
document.MM_curDrag = null;
}
if (NS) document.routeEvent(objName);
} return retVal;
}
function loadwin(obj){
with(MM_findObj(obj))with(style){
filters[0].apply();
display='';
filters[0].play();
}
}
function cs(captionBG,bodyBG,tableBG){
oldBody=document.body;
with(oldBody){
var newBody=cloneNode();
style.filter='blendtrans(duration=1)';
filters[0].apply();
with(document.styleSheets[0]){
with(rules[0].style){backgroundColor=captionBG;}
with(rules[1].style){backgroundColor=bodyBG;}
with(rules[2].style){backgroundColor=tableBG}
}
filters[0].play();
setTimeout(function(){
if(oldBody!=null){
oldBody.applyElement(newBody, "inside")
oldBody.swapNode(newBody);
oldBody.removeNode(true);
}
},1500);
}
}
//-->
</script>
<style type="text/css">
<!--
.caption {
font-size: 9px;
color: #FFFFFF;
background-color: #00CCFF;
padding-left: 5px;
cursor: default;
font-family: "Verdana", "Arial";
border: 1px inset;
}
body {
background-color: #f6f6f6;
border: 1px inset;
overflow: hidden;
}
table {
background-color: #eeeeee;
}
td {
font-family: "Verdana", "Arial";
font-size: 9px;
border: 0px;
}
.win {
filter:BlendTrans(duration=1) DropShadow(Color=#cccccc, OffX=3, OffY=3)
alpha(opacity=90)
}
a {
text-decoration: none;
color: #003399;
}
a:hover {
color: #FF0000;
}
input {
font-family: "Verdana", "Arial";
font-size: 9px;
border-width: 1px;
}
.statusbar {
font-family: "Tahoma", "Verdana";
font-size: 9px;
color: #999999;
padding-left: 3px;
}
.button {
border: 1px outset;
text-align: center;
}
.navframe {
padding: 5px;
}
-->
</style>
</head>
<body>
<div id="assist" style="position:absolute; left:15px; top:68px; width:185px;
z-index:1;display:none;" class="win"
onMouseDown="MM_dragLayer('assist','',0,0,150,18,true,false,-1,-1,-1,-1,15,68,100,'',false,'')">
<table width="180" border="1" cellpadding="0" cellspacing="0">
<tr>
<td class="caption">SeekAssist</td>
<td width="14" align="center"><a href="#"
onclick="with(MM_findObj('assistwin').style)display=display=='none'?'':'none'">%</a></td>
<td width="14" align="center"><a href="#"
onClick="MM_showHideLayers('assist','','hide')">X</a></td>
</tr>
<tr id="assistwin">
<td height="100" colspan="3"
bordercolor="#eeeeee"> </td>
</tr>
</table>
<br>
</div>
<script>loadwin('assist')</script>
<div id="rank" style="position:absolute; left:15px; top:194px; width:185px;
z-index:1;display:none;" class="win"
onMouseDown="MM_dragLayer('rank','',0,0,150,18,true,false,-1,-1,-1,-1,15,194,100,'',false,'')">
<table width="180" border="1" cellpadding="0" cellspacing="0">
<tr>
<td class="caption">SeekRank</td>
<td width="14" align="center"><a href="#"
onclick="with(MM_findObj('rankwin').style)display=display=='none'?'':'none'">%</a></td>
<td width="14" align="center"><a href="#"
onClick="MM_showHideLayers('assist','','inherit','rank','','hide')">X</a></td>
</tr>
<tr id="rankwin">
<td height="100" colspan="3"
bordercolor="#eeeeee"> </td>
</tr>
</table>
<br>
</div>
<script>setTimeout("loadwin('rank')",500)</script>
<div id="mycolor" style="position:absolute; left:15px; top:320px; width:185px;
z-index:1;display:none;" class="win"
onMouseDown="MM_dragLayer('mycolor','',0,0,150,18,true,false,-1,-1,-1,-1,15,320,100,'',false,'')
">
<table width="180" border="1" cellpadding="0" cellspacing="0">
<tr>
<td class="caption">MyColor</td>
<td width="14" align="center"><a href="#"
onclick="with(MM_findObj('mycolorwin').style)display=display=='none'?'':'none'">%</a></td>
<td width="14" align="center"><a href="#"
onClick="MM_showHideLayers('mycolor','','hide')">X</a></td>
</tr>
<tr id="mycolorwin">
<td height="100" colspan="3"
bordercolor="#eeeeee"><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td
align="center"><a href="#" onclick="cs('#00CCFF','#f6f6f6','#eeeeee')">Default</a></td>
</tr>
<tr>
<td
align="center"><a href="#" onclick="cs('red','#eeccee','#eeddee')">StyleSheet#1</a></td>
</tr>
<tr>
<td
align="center"><a href="#" onclick="cs('#99ccff','#eeeeee','#ccddff')">StyleSheet#2</a></td>
</tr>
<tr>
<td
align="center"><a href="#" onclick="cs('#ff9999','#ffffff','#ffeeff')">StyleSheet#3</a></td>
</tr>
<tr>
<td
align="center"><a href="#" onclick="cs('skyblue','#eeeeee','#99ddff')">StyleSheet#4</a></td>
</tr>
<tr>
<td
align="center"><a href="#" onclick="cs('#009900','#eeffee','#ddffdd')">StyleSheet#5</a></td>
</tr>
</table></td>
</tr>
</table>
<br>
</div>
<script>setTimeout("loadwin('mycolor')",1000)</script>
<div id="results" style="position:absolute; left:204px; top:68px; width:575px;
z-index:1;display:none;" class="win"
onMouseDown="MM_dragLayer('results','',0,0,400,18,true,false,-1,-1,-1,-1,204,68,50,'',false,'')"
>
<table width="570" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td class="caption">Results</td>
<td width="12" class="button"><a href="#"
onClick="with(MM_findObj('resultswin').style)display=display=='none'?'':'none'">%</a></td>
<td width="12" class="button"><a href="#"
onClick="MM_showHideLayers('results','','inherit')">X</a></td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" bordercolor="#eeeeee"><input
name="url" type="text" value="http://www.google.com/search?q=ezlee" size="100">
<a href="#"
onclick="mainframe.location=url.value">Search</a></td>
</tr>
<tr id="resultswin">
<td height="318" valign="top"
class="navframe"><aiframe name="mainframe" id="mainframe"
src="http://www.google.com/search?q=ezlee" width="100%" height="100%" frameborder="0"
scrolling="auto"><font color="#FF0000">Welcome!</font></aiframe></td>
</tr>
<tr>
<td height="14" class="statusbar">Ready!</td>
</tr>
</table>
<br>
</div>
<script>setTimeout("loadwin('results')",2000)</script>
</body>
</html>
二十三 运行代码的代码
复制内容到剪贴板
代码:
<script>
function Preview()
{
var TestWin=open('');
TestWin.document.write(code.value);
}
</script>
<textarea id=code cols=60 rows=15></textarea>
<br>
<button onclick=Preview() >运行</button>
二十四 凹陷文字
复制内容到剪贴板
代码:
<div style="width:300px;padding:20px;overflow:hidden;word-wrap:break-word;word-break:break:all;
font-size:12px; line-height:18px; background-color:#eeeeee;">
<font disabled>
怎么样,我凹下去了吧?<br>
你不想试试吗?<br>
<a href="http://www.lenvo.cn/">www.lenvo.cn</a></font>
</div>
二十五 漂亮的仿flash菜单
复制内容到剪贴板
代码:
<style>
/* 先把这个 xmenu 的样式放到css里 */
.xmenu td{font-size:12px;font-family:verdana,arial;font-weight:bolder;color:#ffffff;border:1px
solid #336699;background:#336699;filter:blendtrans(duration=0.5);cursor:hand;text-align:center;}
</style>
<script>
/*
http://lexrus.blueidea.com
这是把事件动作绑定到菜单上的函数
*/
function attachXMenu(objid){
var tds=objid.getElementsByTagName('td');
for(var i=0;i<tds.length;i++){
with(tds[i]){
onmouseover=function(){
with(this){
filters[0].apply();
style.background='#66CCFF'; //这是鼠标移上去时的背景颜色
style.border='1px solid #ffffff'; //边框
style.color='black'; //文字颜色
filters[0].play();
}
}
onmouseout=function(){
with(this){
filters[0].apply();
style.background='#336699'; //这是鼠标离开时的背景颜色
style.border='1px solid #336699'; //边框
style.color='#ffffff'; //文字颜色
filters[0].play();
}
}
}
}
}
</script>
<!--菜单从这里开始, 注意要把class设置成和css里相同的, 还要为它设一个id-->
<table class="xmenu" id="xmenu0" width="500" cellpadding="1" cellspacing="4" border="0"
bgcolor="#336699" align="center">
<tr>
<td><a href="http://www.lenvo.cn/">www.lenvo.cn</a></td>
<td>Name</td>
<td>Is</td>
<td>LeX</td>
<td>Rus</td>
<td>!!!</td>
</tr>
</table>
<script>attachXMenu(xmenu0); //在上面这个table结束的地方执行事件动作的绑定, 这里的这个xmenu0就是
那个table的id</script>
<br><br><br><br>
<!--下面这个是竖排的-->
<table class="xmenu" id="xmenu1" width="100" cellpadding="1" cellspacing="4" border="0"
bgcolor="#336699" align="center">
<tr><td>My</td></tr>
<tr><td>Name</td></tr>
<tr><td>Is</td></tr>
<tr><td>LeX</td></tr>
<tr><td>Rus</td></tr>
<tr><td>!!!</td></tr>
</table>
<script>attachXMenu(xmenu1);</script>
二十六 自定义容器和字体大小
复制内容到剪贴板
代码:
<!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" xml:lang="en" lang="en">
<head>
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="all">
body
{
margin: 1em;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
body *
{
margin: 0;
}
#content
{
padding: 1em;
background-color: #BBDDFF;
background-image: url(column_bg.gif);
background-repeat: repeat-y;
background-position: 30em 0;
text-align: left;
}
#content p
{
margin-bottom: 1em;
}
#footer
{
margin-top: 1em;
padding: 1em;
background-color: #0066CC;
text-align: left;
}
#footer a
{
color: #FFFFFF;
}
#header
{
margin-bottom: 1em;
padding: 1em;
background-color: #0066CC;
color: #FFFFFF;
text-align: left;
}
#leftContent
{
padding-right: 10em;
}
#options
{
margin-bottom: 1em;
text-align: right;
}
#options a
{
color: #000000;
}
#rightContent
{
float: right;
width: 8em;
}
#widthContainer
{
font-size: 0.8em;
width: 40em;
margin: auto;
}
.clearer
{
clear: both;
}
</style>
<script type="text/javascript">
<!--
function scaleWidth()
{
var optimalLineLength = "35em";
var extraAccounting = "12em";
var minimumTextHeight = "10px";
var windowWidth = document.body.clientWidth;
var optimalSize = windowWidth / (parseInt(optimalLineLength) + parseInt(extraAccounting));
if (optimalSize >= parseInt(minimumTextHeight))
{
document.body.style.fontSize = optimalSize + "px";
}
else
{
document.body.style.fontSize = parseInt(minimumTextHeight) + "px";
}
return true;
}
function textSize(size)
{
var theContainer = document.getElementById("widthContainer");
var increment = 0.1
var currentSize = parseFloat(document.getElementById("widthContainer").style.fontSize);
if (!currentSize)
{
currentSize = 0.8;
}
if (size == "smaller")
{
theContainer.style.fontSize = (currentSize - increment) + "em";
}
else
{
theContainer.style.fontSize = (currentSize + increment) + "em";
}
return true;
}
-->
</script>
</head>
<body onload="scaleWidth();" onresize="scaleWidth();">
<div id="widthContainer">
<div id="options">
<a href="#" onclick="textSize('smaller'); return false;">Text smaller</a> |
<a href="#" onclick="textSize('bigger'); return false;">Text bigger</a>
</div>
<!-- END options -->
<div id="header">
<h1>Browser-width defined font size</h1>
</div>
<!-- END header -->
<div id="content">
<div id="rightContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.
</p>
</div>
<!-- END rightContent -->
<div id="leftContent">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed lobortis ullamcorper augue. Praesent vel felis vitae purus ornare pretium. Nullam porta sollicitudin lectus. Integer non arcu eu neque tincidunt tincidunt. Nullam sapien arcu, ullamcorper sed, hendrerit in, rutrum in, nibh. Aliquam sed enim. Cras rhoncus ullamcorper justo. Aenean quam dolor, consectetuer sed, dapibus quis, iaculis id, diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut lacinia velit ac elit. Etiam id nulla. Phasellus at arcu ac mauris hendrerit ullamcorper. Quisque posuere sodales risus. Sed nunc nibh, egestas a, blandit eget, facilisis vel, dolor. Cras metus urna, feugiat et, iaculis quis, lacinia a, elit. Etiam enim. Maecenas viverra, est non tincidunt euismod, diam urna volutpat mi, in luctus pede ante sit amet risus.
</p>
<p>
Nulla metus. Ut sodales, tortor nec sollicitudin convallis, diam diam vulputate ligula, lobortis tincidunt urna purus at urna. Pellentesque laoreet. Nulla et dolor. Praesent vestibulum quam convallis neque. Praesent sit amet odio a dui iaculis dignissim. In vel nunc a tellus vulputate pellentesque. Maecenas bibendum. Donec mi nibh, euismod in, iaculis a, eleifend et, enim. In eget lectus vitae pede nonummy elementum. Mauris accumsan, lacus ut euismod varius, odio neque egestas quam, non aliquam velit purus et purus. Vestibulum at elit nec felis suscipit pulvinar. Suspendisse at enim quis lacus mattis condimentum. Proin arcu arcu, imperdiet vitae, aliquam non, congue id, ipsum.
</p>
<p>
Aliquam eu dolor nec risus luctus faucibus. Aenean condimentum, tortor in blandit cursus, dolor magna sagittis orci, vel vehicula dolor ante at lacus. Donec vel felis in enim aliquam molestie. Sed non velit id velit pulvinar consequat. Mauris luctus. Phasellus faucibus turpis nec purus. Mauris eget ante. Donec orci enim, luctus eu, posuere at, luctus quis, pede. In in lectus. Quisque blandit, ipsum eget tincidunt scelerisque, mauris ante accumsan erat, quis congue odio erat vitae diam. Donec ut felis fermentum sem viverra pulvinar. Sed neque lorem, adipiscing ut, placerat a, ornare et, dolor. Vestibulum pretium vehicula nibh. Etiam feugiat, ligula sed pulvinar fringilla, eros arcu placerat urna, nec eleifend nisl leo sit amet urna. Suspendisse quis augue ut nibh venenatis nonummy. Nunc ut augue. In fermentum, neque eget eleifend rutrum, nulla lorem fermentum massa, eu cursus lectus mi id libero.
</p>
<p>
Nam congue ligula quis magna. Vivamus porttitor nunc non dui. Aliquam posuere dapibus tortor. Quisque facilisis, quam in semper luctus, lacus dolor gravida massa, ultrices consectetuer risus arcu nec nibh. Nulla facilisi. In a eros id eros lobortis ultrices. Vivamus sit amet neque eu magna venenatis nonummy. Pellentesque consequat. Etiam ut ipsum. Nulla consectetuer est vel quam.
</p>
<p>
Integer eu diam vitae augue sollicitudin congue. Praesent vulputate pede vel velit. Maecenas dapibus tempus lacus. Quisque lectus metus, pretium ac, mollis nec, dignissim quis, mi. Aliquam purus risus, pharetra eget, condimentum ut, blandit sit amet, leo. Suspendisse iaculis purus sed tellus. Nunc sem justo, porttitor ut, pretium eu, hendrerit eu, nunc. Vivamus sit amet neque in est venenatis faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus, eros id ultrices facilisis, pede ligula dignissim eros, sit amet tempus risus urna sed nibh. Sed massa eros, dapibus tristique, blandit et, molestie sed, enim. Phasellus leo. Integer vestibulum volutpat enim. Duis pulvinar ligula. Pellentesque luctus velit a justo. Quisque volutpat, diam quis varius commodo, neque elit dictum tortor, quis aliquet felis risus vitae wisi. Aliquam bibendum, elit ut gravida vehicula, orci turpis auctor dolor, nec tristique tortor dolor eget ipsum.
</p>
</div>
<!-- END leftContent -->
<div class="clearer">
</div>
</div>
<!-- END content -->
<div id="footer">
<a href="http://www.themaninblue.com/writing/perspective/2003/12/22/">Back to the explanation</a>
</div>
</div>
<!-- END widthContainer -->
</body>
</html>
[
本帖最后由 forest 于 2006-5-15 22:16 编辑 ]
<script src="tag.php?action=relatetag&rtid=4939" type="text/javascript"></script>
相关推荐
JavaScript经典效果集锦JavaScript经典效果集锦
javascript源代码集锦 使用javascript制作背景效果,下拉菜单,状态条,动态字幕,用户信息
javascript经典效果示例 本人收集了几乎所有的网站常用的js特效集锦, 供大家参考
JavaScript经典效果集锦(转) 转自:蓝色理想 申请加精,只有这样本帖子才不会沉下去,感觉这个帖子对大家很有用的! 一 实用且必用的小脚本代码: 脚本1:进入主页以后自动播放声音 复制内容到剪贴板
JavaScript特效集锦:图片矩阵中单个图片放大效果--Ajax;JavaScript 图片滚动;JavaScript 由左向右的图片渐变过渡;图片旋转构成3D圆环的展示特效……
常用Javascript特效代码集锦,带有演示,左侧是特效分类及名称,点击后在右侧窗口中可预览效果,点右键可查看源代码,非常方便,是网页编程及学习JS的好资料。这些特效涵盖图片特效、页面与背景特效、日期与...
图像标签,图像地图 JavaScript经典效果集锦(一) JavaScript经典效果集锦(二) JavaScript经典效果集锦(三) Javascript技术技巧大全(一) Javascript技术技巧大全(二) Javascript技术技巧...
JavaScript网页特效应用大集锦 ☆「时间」特效的搜集 ☆「讯息栏」特效的搜集 ☆「变化按钮」特效的搜集 ☆「背景颜色」特效的搜集 ☆「Cookie」特效的搜集 ☆「表单控制」特效的搜集 ☆「图层控制」特效的搜集 ☆...
野狼网页特效集锦内容简介:野狼Javascript网页特效制作教程,chm版的小册子,收集的比较多的网页特效,有鼠标、浏览器、页面、Cookies、状态栏、代码生成、导航菜单、在线测试、密码类、综合类、游戏类、图形...
最全的js脚本集锦,很多窗口,图片等页面特效,可以轻松的获取自己想要的脚本内容,方便快捷。
jsp案例开发通过案例演示效果和代码解释,并附有详细的源代码。详细讲述了jsp与javascript,html,jdbc的结合。
这本书中详细的介绍了有关java的实用的编程技术,例如java+servlet+jsp 、 javascript、javaBean持久化、java动态效果、java在Nunix下的web应用…… 热爱编程的人们,下载吧!
超炫的js效果,带给你不一样的视觉感受和精神上的满足!
本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考,具体如下: ... [removed] [removed]=onclose; function onclose() { if(event.clientX>document.body.clientWidth&&event.clientY<...
在javascript中处理文本框输入值的时候,经常要用到"去掉前后空白"的功能。用过jQuery的朋友都知道,jQuery提供了一个trim()这样的功能函数,可以很轻松帮我们实现这样的效果。