Summary of common front-end technologies

1 fix problem:

We all know that the position:fixed problem is not supported under IE6! But I often use this attribute to fix a certain position of the floating menu. However, one problem is that this attribute is not supported under IE6! So what should I do? I found out that there is a way to solve the above problem by using hack techniques and expressions. We all know that there are many bugs under IE6 that have not been fixed. Of course, Microsoft cannot fix IE6 now, so many experts on the Internet research. Of course hacking is also a technology. Don’t think about hacking. ! ! Of course, you can use it without hacking! ! ! The fix solution is as follows:

 

*position:absolute;*top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-101))

The 101 in the code refers to the height of the floating menu! In this case, although IE6 supports the fix attribute, when we move the scroll bar to test, we still find that IE6 and 7 will have jitter bugs. The methods to fix IE6 7 jitter are as follows:

 

html,html   body {background-p_w_picpath:url(about:blank);background-p_w_upload:fixed;}

In the past, I used a few 1px×1px transparent images to solve this problem, but I found that I can put an empty image wherever I can. Now there are no bugs so far. Compatible with browsers such as IE, Firefox, Google, etc.! ! !

2 To achieve the problem of translucency, you only need to add a line of code to the css.

 

background-color:#000; opacity:0.5;filter:alpha(opacity=50);

3 To solve the problem that the element cannot be clicked under IE6 7 due to the transparent flash covering the element, it can be solved by adding the following code to the element:

 

filter:alpha(opacity=0);*background-color:#000;  position:relative; z-index:1000;

4 Solve the hack of floating menu scrolling with scroll bar under IE6

 

width:100%!important; width:auto; /*nav keep centered under IE6*/_position:absolute;_top:expression(eval(documentElement.scrollTop+130)); /*left and right sides*/ _position:absolute;bottom :0px;_top:expression(eval(documentElement.scrollTop+document.documentElement.offsetHeight-58)); overflow:hidden;left:0.1%;margin-left:10px;}/*At the bottom*/

5 The problem of ul li is like this under normal circumstances. I’m sorry, as if I can’t cut a picture here, I can’t put it in to describe it. Normally, it’s one line per line but under IE6 7 it’s skewed, so the solution must be display. :inline; this attribute can solve the problem! ! !

 6 The height problem When you want the height of an element to increase with the increase of the content, do not set height: 100%; in this case, the background will not increase with the increase of the content, and it will be out of touch in the middle. Generally, the height is not set But when there is a need for height: 100%, in order to solve the above background problem, the following code can be used to solve it! !

 

body,html{height:100%;}

 In this case, the height of the outermost layer will vary with the height of the body and document! The above problem can be solved!

7 Taobao Wangwang When you click Wangwang, a certain Wangwang dialog box will pop up to chat, just add a link.

<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 ">Online Want Want</a> Such uid=%E8%8B%BB%E8%8B%8F uid is followed by a certain Want Want name, as long as encodeURI is used for encoding conversion.

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>

Among them, the ones after tags and the ones in front of &skin are also after encoding the topic. 

9 Taobao Weibo plug-in online conversion address http://t.taobao.com/topic/admin/topicWidgetAdmin.htm But this one must be installed with Cisco's ××× to open it!

10 Sina Weibo sharing code:

<a href="javascript:(function(){window.open('http://vtsina.com.cn/share/share.php?title='+encodeURIComponent('[famous teacher lecture hall] quality course, boutique lecture hall' )+'&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>

Renren
    <a href="javascript:(function(){window.open('http://share.renren.com/share/buttonshare.do?link='+encodeURIComponent(location.href)+'&title= '+encodeURIComponent('[Master Lecture Hall] Quality Courses, Excellent Lecture Hall'),'_blank');})()"></a>

豆瓣网
    <a href="javascript:(function(){window.open('http://shuo.douban.com/!service/share?p_w_picpath=&href='+encodeURIComponent(location.href),'_blank');})()"></a>

Kaixin.com
    <a href="javascript:(function(){window.open('http://www.kaixin001.com/repaste/share.php?rtitle='+encodeURIComponent('【famous teacher lecture hall】quality course, excellent Lecture Hall')+'&rurl'+encodeURIComponent(location.href),'_blank');})()"></a>

QQ Weibo
 <a href="javascript:(function(){window.open('http://s.jiathis.com/?webid=tqq&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent ('[Famous teacher lecture hall] quality courses, excellent lecture hall'),'_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('【famous teacher lecture hall】quality course, boutique lecture hall '))+'&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 Youku video address conversion: Sometimes the demand side gives us a Youku video address, but that video address has advertisements, but the demand side says I don’t want advertisements, so our conversion method here can first open Youku video and click "More "Multi" button and then copy the flash address first, such as this:

http://player.youku.com/player.php/sid/XMzMyNTQ2MjA4/v.swf   We just need to convert like this and it will be ok  http://player.youku.com/player.php/partnerid/XMTcxMg==/ sid/XMzMyNTQ2MjA4/v.swf add partnerid/XMTcxMg== 

11. Sometimes we need to use anchor links, but sometimes anchor links cannot be used. We can use javascript to write a 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 How to add weather forecast to webpage:

 

<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>

The effect is as follows:

 

If you want to change to another city, just change the number " 101210101 ". Then the number corresponding to the specific different city can be searched by clicking on http://ah.weather.com.cn/? in the address bar URL in: http://www.weather.com.cn/weather/101011000.shtml The number in it is.

13 Tencent QQ After clicking the qq button, you can directly chat with Taobao Wangwang, just add the code like this:

<a href="tencent://message/?uin=807287699&Site=www.xnzjpc.com.cn&Menu=yes" title="Click to send him a QQ message">If something happens, please ask me</a> where uin is the qq number Of course you can change it to the QQ number you want!

14 To send an email to someone:

<a href="mailto:[email protected]" target="_parent" title="给我发邮件吧">Email <span> 
                       [email protected]</span> </a> 

15 Please write a javascript function parseQueryString, its purpose is to parse url into an object, such as 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 and IE9 hack   1. background-color:red\0; both IE8 and IE9 support;

background-color:#000; opacity:0.5;filter:alpha(opacity=50); Front-end learning training, video tutorials, learning routes, add prestige kaixin666haoyun


          2. background-color:blue\9\0; Only supported by IE9;


Guess you like

Origin blog.51cto.com/14895198/2562116