武林網(www.vevb.com)文章簡介：網頁製作技巧:xHTML、css和JS。
細節1………………………………………………………………………………一、當文字與圖片在一行，需要將文字與圖片底對齊，需要這樣寫：
<li>記住密碼<img src= align=bottom style=margin-bottom:-4px/></li>
二、當文字與圖片在一行，需要將文字與圖片居中對齊，需要這樣寫：
<li>記住密碼<img src=static/img/xyx.jpg align=middle/></li>
三、更改IE查看源代碼菜單打開的編輯器
打開註冊表編輯器,在開始-運行中輸入regedit
找到以下位置： HKEY_LOCAL_MACHINESOFTWAREMicrosoftInternet ExplorerView SourceEditorEditor Name修改默認的數據為D:Program FilesEmEditorEmEditor.exe
切換到IE中查看源代碼就可以看到效果了。
如果View Source EditorEditor Name項沒有,可以自己新建。
四、自動最大化窗口，在<body> 與</body> 之間加入：
<SCRIPT language=javascript>
setTimeout('top.moveTo(0,0)',5000);
setTimeout('top.resizeTo(screen.availWidth,screen.availHeight)',5000);
< /script>
五、window.opener 實際上就是用window.open打開的窗體的父窗體。
比如在父窗體parentForm裡面通過window.open(subForm.html),那麼在subform.html中window.opener
就代表parentForm,可以通過這種方式設置父窗體的值或者調用js方法。
1,window.opener.test(); ---調用父窗體中的test()方法；
2,如果window.opener存在,設置parentForm中stockBox的值。
if (window.opener && !window.opener.closed)
{
window.opener.document.parentForm.stockBox.value = symbol;
}
六、刷新頁面的方法
Javascript刷新頁面的方法：
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.href
自動刷新頁面的方法:
1.頁面自動刷新：把<meta http-equiv=refresh content=20>加入<head>區域中
2.頁面自動跳轉：把<meta http-equiv=refresh content=20;url=http://www.webjx.com>加入<head>區域中
3.js自動刷新頁面
<script language=JavaScript>
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
< /script>
4.JS刷新框架
a)刷新包含該框架的頁面用
<script language=JavaScript>
parent.location.reload();
< /script>
b)子窗口刷新父窗口
<script language=JavaScript>
self.opener.location.reload();
< /script>
( 或<a href=javascript:opener.location.reload()>刷新</a> )
c)刷新另一個框架的頁面
<script language=JavaScript>
parent.另一FrameID.location.reload();
< /script>
七、用過CSS hack應該知道，用下劃線命名是一種hack，如使用_style這樣的命名，可以讓IE外的大部分瀏覽器忽略這個樣式的定義，所以使用_做為命名時的分隔符是不規範的。在做CSS檢查時會出現錯誤提示。
八、IE條件註釋寫法
< !--[if !IE]>除IE外都可識別<![endif]-->
< !--[if IE]> 所有的IE可識別<![endif]-->
< !--[if IE 5.0]> 只有IE5.0可以識別<![endif]-->
九、CSS HACK 寫法
第一種：
.div {
background:orange;
*background:green !important;
*background:blue;
}
第二種：
.div {
margin:10px;
*margin:15px;
_margin:15px;
}
第三種：
#div { color: #333; }
*+html #div { color: #999; }
* html #div { color: #666; }
細節2………………………………………………………………………………
一、IE6及以下不識別a 標籤外的:hover偽類，在火狐，IE7裡能正確達到效果，解決辦法：
#show li.s1{ border:1px solid #ff9900; background:#454242;}
#show li.s2{ border:1px solid #D9D8D8; background:#312E2E;}
< li></li>
二、為元素設置hasLayout
很多IE6（或IE7）的問題可以用設置hasLayout值的方法來解決，最簡單的給元素設置hasLayout值的方法是給加上CSS 的height或width(當然，zoom也可以用，但這不是CSS的一部分)。比如設置為height:1%。如果父元素沒有設置高度，那麼元素的物理高度並不會改變，但是，已經具備hasLayout屬性。
三、IE6下字符重複出現
確保浮動元素設置了display:inline;
在浮動元素中使用margin-right:-3px;
四、樣式優先級
1，內聯樣式[1.0.0.0]
2，ID選擇器[0.1.0.0]
3，類，屬性，偽類選擇器[0.0.1.0]
4，元素標籤，偽元素選擇器[0.0.0.1]
五、一個元素垂直居中的css寫法
#exm{
position:absolute;
left:50%;
top:50%;
z-index:1;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-52px;
}
六、zoom : normal | number
設置或檢索對象的縮放比例。設置或更改一個已被呈遞的對象的此屬性值將導致環繞對象的內容重新流動。雖然此屬性不可繼承，但是它會影響對象的所有子對象( children )。
七、圖片跟文字並排時, 要實現圖片文字垂直居中:
1> 將line-height:設置成圖片的高度,或者圖片父元素的高度.
2> 再將圖片的CSS設置vertical-align:middle;
八、li 元素中包含a img 元素的時候，IE6下出現空白
解決方法一
使li 浮動，並設置img 為塊級元素
解決方法二
設置ul 的font-size:0;
解決方法三
設置img 的vertical-align: bottom;
解決方法四
設置img 的margin-bottom: -5px;
細節3………………………………………………………………………………
一、被點擊訪問過的超鏈接樣式不在具有hover和active
解決方法：改變CSS屬性的排列順序: LVHA
二、FF下連續長字段不能自動換行
解決方法：word-wrap:break-word;overflow:hidden;
三、FF下父容器高度不能自適應
解決辦法：清除子元素的浮動
四、IE下圖片下方產生空隙
解決辦法：定義img 為display:block，或vertical-align為top/bottom/middle/text-bottom
定義父容器的字體大小為零，font-size:0
五、IE6下浮動元素和它相鄰的非浮動元素之間有3px空隙
解決辦法：相鄰的非浮動元素也設置浮動；
浮動元素相對IE6定義_margin-right:-3px;
六、LI內容超長後以省略號顯示
解決辦法： white-space:nowrap;(文本不換行)text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;
七、文本不能垂直居中
解決辦法：行高和容器高度相等line-height=height；
八、文本輸入框和相鄰的文本不能對齊
解決辦法：設置文本輸入框vertical-align:middle;
九、IE設置滾動條樣式
解決辦法：
body{
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff;
}
十、IE6無法定義高度為1px的容器
解決辦法：overflow:hidden
zoom:0.8
line-height:1px
細節4………………………………………………………………………………
一、讓層顯示在flash之上
解決辦法：給FLASH設置透明<param name=wmode value=transparent />或者<param name=wmode value=opaque />
二、使一個層垂直居中瀏覽器中
解決辦法：使用百分比絕對定位，與外補丁負值的方法。
position:absolute;
top:50%;
left:50%;
margin:-100px auto auto -100px;
width:200px;
height:200px;
三、加入收藏夾
解決辦法：<script type=text/javascript>
// <![CDATA[
function bookmark(){
var title=document.title
var url=document.location.href
if (window.sidebar) window.sidebar.addPanel(title, url,);
else if( window.opera && window.print ){
var mbm = document.create_r_rElement_x('a');
mbm.setAttribute('rel','sidebar');
mbm.setAttribute('href',url);
mbm.setAttribute('title',title);
mbm.click();}
else if( document.all ) window.external.AddFavorite( url, title);
}
// ]]>
< /script>
< a href=javascript:bookmark()>加入收藏夾</a>
細節5………………………………………………………………………………
1.常見新聞列表的寫法：
<ul class=list>
< li><span>2006年6月6日</span><a href=#>新聞標題01</a></li>
< li><span>2006年6月6日</span><a href=#>新聞標題02</a></li>
< li><span>2006年6月6日</span><a href=#>新聞標題03</a></li>
< li><span>2006年6月6日</span><a href=#>新聞標題04</a></li>
< /ul>
2.IE實現頁面背景漸變（FF及chrome不支持）
從上到下：
body{filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000);}
左上至右下：
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100); background-color: skyblue;}
從左至右
body{FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000);}
從上到下
style=filter:progid:DXImageTransform.microsoft.gradient(gradienttype=0,startColorStr=blue,endColorStr=white);
3.a hover的樣式實現多種效果，可以靈活運用
#outer a { border:1px solid #069;}
#outer a:hover {border:1px dashed #c00;}
4.border:none;與border:0區別
理論上的性能差異:
border:0;把border設為0像素雖然在頁面上看不見，但按border默認值理解，瀏覽器依然對border-width/border-color進行了渲染，即已經佔用了內存值。 border:none;把border設為none即沒有，瀏覽器解析none時將不作出渲染動作，即不會消耗內存值。
兼容性差異：
兼容性差異只針對瀏覽器IE6、IE7與標籤button、input而言，在win、win7、vista 的XP主題下均會出現此情況。當border為none時似乎對IE6/7無效邊框依然存在,當border為0時，感覺比none更有效，所有瀏覽器都一致把邊框隱藏，
如何讓border:none;實現全兼容？只需要在同一選擇符上添加背景屬性即可
5.css實現多列等高佈局,正內邊距與負外邊距
給每個需要實現等高的列應用樣式：.e{padding-bottom:32767px;margin-bottom:-32767px;}
6.position:relative;特殊用法？ ？ ？ ？
* {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(***.gif) center center no-repeat;}
a:hover {color:#000;background:url(***.gif) 0 0 no-repeat;width:86px;position:relative;}
細節6………………………………………………………………………………
1。 innerText：從起始位置到結束位置的內容，不包含標籤innerHTML
outerHTML:包含innerHTML和標籤
<div id=test><span>test1</span>test2</div>
test.innerText:test1 test2
test.innerHTML:<span>test1</span>test2
test.outerHTML:<div id=test><span>test1</span>test2</div>
2。 Number（）：任何包含非數字字符的字符串做參數時，結果為NaN
parseInt():從左到右盡可能多低把字符串轉化為數字，直到遇到一個非數字時停止
isNaN():參數不是一個數字時，返回true;
3。 a=23.50abc
typeof(a)=String
parseFloat(a)=23.5
parseInt(a)=23
Number(a)=NaN
4。 JS變量名包含數字字母美元符下劃線，不能以數字開頭
5。 getElementsByTagName_r()需要等文檔加載完畢後才能獲取到
6。 nodeType：共12種，1表示元素節點，3表示文本節點
nodeName：表示節點名稱，如果是文本節點，則表示#text
nodeValue：表示節點的值
eg: 獲取tagname為li的節點if(obj.nodeName.toLowerCase()=='li'){}
改變P的文本內容document.getElementsByTagName_r('p')[0].firstchild.nodeValue=''
7。父節點到子節點
childNodes：元素所有第一層子節點列表，不包括向下更深層次的子節點
obj.firstChild=obj.childNodes[0]
obj.lastChild=obj.childNodes[obj.childNodes.length-1]
hasChildNodes() 判斷元素是否有子節點，返回布爾值
7。子節點到父節點
var parentElm=myLinkItem.parentNode;
while(parentElm,className!='syna '&&parentElm!='document.body')
parentElm=parentElm.parentNode
8。修改元素屬性
1）以對象屬性的方式獲取或設置
var mainImage=document.getElementByIdx_x('nav').getElementsByTagName['img'][0];
mainImage.src='';
mainImage.;
2)用getAttribute()和setAttribute()方法
細節7………………………………………………………………………………
1。將數字轉化為擁有X位小數位的形式function roundTo(base,precision)
{ var m=Math.pow(10,precision);
var a=Math.round(base*m)/m;
return a;
}
var n=3.942487;
roundTo(n,3)=3.942
roundTo(n,0)=3
2。創建受約束的隨機數
function randomBetween(min,max)
{ return min+Math.floor(Math.random()*(max-min+1))}
3。數字轉換為字符串
var a=10;
a=String(a);/a=a.toString();
4。對url的編碼
var a=?p=e;
var b=escape(a);
var c=(b);
5。改變文檔內元素的類型
p--->div
首先創建一個div元素，然後復制p的子節點到div中，最後再用div 替換p
6。一個函數需要多少參數
function add(n1,n2){}
return num=add.length;
7。一個函數傳入了多少參數
function add(n1,n2){
return arguments.length;}
細節8………………………………………………………………………………
1). display:inline-block;顧名思義，就是在內聯情況下的塊狀，可以設定高度寬度。
.element-class {
display: -moz-inline-stack; //Firefox only code
display: inline-block; //some standard browsers
zoom: 1; //IE only
*display: inline; //Only IE know this code (CSS Hack)
}
2).清理浮動
.clearfix:after{visibility:hidden;display:block;font-size:0;content: ;clear:both;height:0;}
.clearfix {zoom:1;}
3).在地址欄添加自定義圖標
首先，我們需要預先製作一個圖標文件，大小為16*16像素。文件擴展名為ico，然後上傳到相應目錄中。在HTML源文件<head></head>之間添加如下代碼：<Link Rel=ICON NAME href=圖片的地址（注意與剛才的目錄對應）>，當然如果用戶使用IE5或以上版本瀏覽時，就更簡單了，只需將圖片上傳到網站根目錄下，即可自動識別！
4). 在IE6中設置display:block的空容器一個較小高度時，如<p style=height:1px;></p>，會發現其高度不能小於某個值。解決方案：設置overflow:hidden。
5).文字用省略號截斷
div{width:200px;height:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}