1 fix問題:
我們都知道IE6下不支持position:fixed問題!但是我做浮動菜單固定某個位置時也是經常用這個屬性去解決 但是考慮到一個問題就是IE6下不支持這個屬性!那怎麼辦呢 在網上google了下 發現可以有一種方法可以解決上面的問題 就是用hack技術及表達式 我們都知道IE6下有很多bug沒有修復 當然微軟現在也不可能是修復IE6 所以網上很多高手研究了hack出來 當然hack也是一門技術 千萬不要認爲hack會怎麼樣會怎麼樣!!!當然能不用hack儘量不用!!!fix解決方案如下:
*position:absolute;*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-101))
其中代碼中101指那個浮動菜單的高度!這樣的話IE6雖然支持fix屬性 但是當我們移動滾動條測試時候 還是會發現IE6,7會有抖動的bug 修復IE6 7抖動的方法如下:
html,html body {background-p_w_picpath:url(about:blank);background-p_w_upload:fixed;}
以前我是用個很少的1px×1px透明圖片去解決這個問題 但是發現用個空 圖片放哪裏也可以 現在到目前爲止 bug就沒有啊 兼容IE 火狐 谷歌等等遊覽器!!!
2 實現半透明問題 只需要在css中加入一句代碼就ok了
background-color:#000; opacity:0.5;filter:alpha(opacity=50);
3 解決因透明flash覆蓋到元素上面 在IE6 7 下 元素無法點擊問題 只需要在元素上面加入如下代碼 即可解決:
filter:alpha(opacity=0);*background-color:#000; position:relative; z-index:1000;
4 解決浮動菜單隨滾動條滾動在IE6下的hack
width:100%!important; width:auto; /*nav IE6下保持居中*/_position:absolute;_top:expression(eval(documentElement.scrollTop+130)); /*左右兩側*/ _position:absolute;bottom:0px;_top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-58)); overflow:hidden;left:0.1%;margin-left:10px;}/*位於底部*/
5 ul li的問題 正常情況下是這樣的 不好意思 好像這裏不能截個圖放不進來 描述下吧 正常情況下就是每一行一行的 但是在IE6 7 下回偏斜點 所以解決的方法一定要用display:inline;這個屬性就可以解決問題了!!!
6 height問題 想要某個元素高度背景隨內容的增加而增加時 千萬不要設置height:100%;這樣的話 會出現背景不會隨的內容的增加而增加 在中間會脫節 一般情況下不設置height 但是當有的時候需要height:100%時候 爲了解決上面背景會脫節問題 用下面的代碼就可以解決啊!!
body,html{height:100%;}
這樣的話 最外層的高度就會隨的body及文檔的高度而變化!就可以解決上面的問題了!
7 淘寶旺旺 點擊旺旺時候 就彈出某某旺旺對話框進行聊天 只要加個鏈接就可以了
<a href="http://amos.im.alisoft.com/msg.aw?v=2&uid=%E8%8B%BB%E8%8B%8F&site=cntaobao&s=1&charset=utf-8" target="_blank">在線旺旺</a> 這樣的 uid=%E8%8B%BB%E8%8B%8F uid後面的就是某個旺旺名稱 只要用encodeURI進行編碼轉換就可以了
8 新浪 微博分享代碼 <iframe src="http://v.t.sina.com.cn/widget/widget_topic_publish.php?tags=%E8%AF%9D%E9%A2%98%EF%BC%9A%E8%AF%B4%E5%87%BA%E4%BD%A0%E7%9A%84%E6%96%87%E5%85%B7%E6%9C%80%E7%88%B1%EF%BC%9F&skin=4&isShowPic=1&width=448&height=103&wordLength=&mblogNum=20" class="iframe2"></iframe>
其中tags後面的到&skin前面的 也是把話題經過編碼轉換後的
9 淘寶微博插件線上轉換地址 http://t.taobao.com/topic/admin/topicWidgetAdmin.htm 不過這個要裝思科的×××才能打開!
10 新浪微博分享代碼:
<a href="javascript:(function(){window.open('http://v.t.sina.com.cn/share/share.php?title='+encodeURIComponent('【名師講堂】品質課程,精品講堂')+'&url='+encodeURIComponent(location.href)+'&source=bookmark','_blank','width=450,height=400');})()"></a>
淘江湖
<a href="javascript:(function(){window.open('http://share.jianghu.taobao.com/share/addShare.htm?url='+encodeURIComponent(location.href),'_blank');})()"></a>
人人網
<a href="javascript:(function(){window.open('http://share.renren.com/share/buttonshare.do?link='+encodeURIComponent(location.href)+'&title='+encodeURIComponent('【名師講堂】品質課程,精品講堂'),'_blank');})()"></a>
豆瓣網
<a href="javascript:(function(){window.open('http://shuo.douban.com/!service/share?p_w_picpath=&href='+encodeURIComponent(location.href),'_blank');})()"></a>
開心網
<a href="javascript:(function(){window.open('http://www.kaixin001.com/repaste/share.php?rtitle='+encodeURIComponent('【名師講堂】品質課程,精品講堂')+'&rurl'+encodeURIComponent(location.href),'_blank');})()"></a>
QQ微博
<a href="javascript:(function(){window.open('http://s.jiathis.com/?webid=tqq&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent('【名師講堂】品質課程,精品講堂'),'_blank');})()"></a>
QQ空間
<a href="javascript:(function(){window.open('http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+encodeURIComponent(location.href),'_blank');})()"></a>
MSN
<a href="javascript:(function(){window.open('http://mail.live.com/secure/start?action=compose&subject='+encodeURIComponent('【名師講堂】品質課程,精品講堂'))+'&body='+encodeURIComponent(location.href),'_blank');})()"></a>
谷歌buzz
<a href="javascript:(function(){window.open('http://www.google.com/buzz/post?hl=zh-CN&url='+encodeURIComponent(location.href),'_blank');})()"></a>
10 優酷網視頻地址轉換 : 有時候需求方 給我們一個優庫網 視頻地址 但是那個視頻地址有廣告 不過需求方說 我不想要廣告 那麼我們這邊轉換的方法 可以先把 優酷網視頻打開 點擊"更多"按鈕 然後先複製flash地址 比如說這個:
http://player.youku.com/player.php/sid/XMzMyNTQ2MjA4/v.swf 我們只需要這樣轉換下就ok了 http://player.youku.com/player.php/partnerid/XMTcxMg==/sid/XMzMyNTQ2MjA4/v.swf 把 partnerid/XMTcxMg== 加上
11.有時候我們要用錨點鏈接 但是有時候錨點鏈接不能用 我們可以用javascript 寫個javascript就可以了
<map name="Map2" id="Map2"> <area shape="rect" coords="16,60,148,104" href="javascript:" onclick="map('#nav1')" target="_self"/> <area shape="rect" coords="15,107,147,151" href="javascript:" onclick="map('#nav2')" target="_self"/> </map>
JS
<script type="text/javascript"> function map(url){ var _url = document.location.href, surl = _url.split("#"), realUrl = surl[0] + url; location.href = realUrl; } </script>
12 如何做網頁中加入天氣預報:
<iframe src="http://m.weather.com.cn/m/pn12/weather.htm?id=101210101T" width="245" height="110" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
效果如下:
如果想要換成其他的城市 那麼只要改下"101210101"這個數字即可 那麼具體不同的城市對應的數字可以通過http://ah.weather.com.cn/?裏的點擊查詢,則地址欄中的URL:http://www.weather.com.cn/weather/101011000.shtml裏的數字即是。
13 騰訊QQ 點擊qq按鈕後 直接可以和淘寶旺旺一樣 進行聊天 只需要這樣加代碼即可:
<a href="tencent://message/?uin=807287699&Site=www.xnzjpc.com.cn&Menu=yes" title="點擊給他發QQ消息">有事您Q我</a> 其中uin是qq號 當然你可以改成自己想要的QQ號!
14 給某人發郵件 :
<a href="mailto:[email protected]" target="_parent" title="給我發郵件吧">Email <span>
[email protected]</span> </a>
15 請編寫一個javascript函數 parseQueryString,它的用途是把url解析爲一個對象,如url="http://www.baidu.com/index.php?key0=0&key1=1&key2=2";
<script> function parseQueryString(url){ var arr; var obj = {}; //alert(url); if((arr=url.indexOf("?"))!=-1){ var param = url.substring(arr+1,url.length-1); console.log(param) //key0=0&key1=1&key2= var paramArr = param.split("&"); console.log(paramArr);//["key=0",'key=1','key=']; var ret=[]; for(var i=0;i<paramArr.length;i++){ ret = paramArr[i].split("="); console.log(ret); //console.log(ret[1]); obj[ret[0]]=ret[1]; console.log(obj[ret[0]]=ret[1]); } } return obj; } var url = "http://www.taobao.com/index.php?key0=0&key1=1&key2=2"; var obj = parseQueryString(url); console.log((obj.key0));//0 </script>
16 IE8和IE9的hack 1. background-color:red\0;IE8和IE9都支持;
background-color:#000; opacity:0.5;filter:alpha(opacity=50); 前端學習培訓、視頻教程、學習路線,添加威信 kaixin666haoyun
2 . background-color:blue\9\0; 僅IE9支持;