阿里巴巴2014web前端實(shí)習(xí)生筆試

1、HTML題：實(shí)現(xiàn)下面的表格國(guó)家名稱地址排名中國(guó)淘寶32美國(guó)12網(wǎng)站排名代碼：<tableborder=1cellspacing=0>//border：邊框；cellspacing：?jiǎn)卧裰苯拥目崭?/cellspacing與border-collapse:collapse的作用一樣 <tr> <thwidth="20%">國(guó)家</th> //width設(shè)置使得表格整齊排放 <thwidth="20%">名稱</th> <thwidth="40%">地址</th> <thwidth="20%">排名</th> </tr> <tralign=center>//align：設(shè)置文本居中顯示 <td>中國(guó)</td> <td>淘寶</td> <td></td> <td>32</td> </tr><tralign=center> <tdrowspan=2>美國(guó)</td>//rowspan:單元格可橫跨的行數(shù)。//colspan：?jiǎn)卧窨蓹M跨的列數(shù)。 <td>ebay</td> <td></td> <td>22</td> </tr> <tralign=center> <td>facebook</td> <td></td> <td>12</td> </tr> <tralign=right> <tdcolspan=4>網(wǎng)站排名</td> </tr> </table>2、css題目：請(qǐng)簡(jiǎn)化以下的CSS代碼。div.container{ width:500px; background-image:url(/img/sprite.png); background-repeat:no-repeat; background-position:0px-78px;}div.containerul#news-list,div.containerul#news-listli{ margin:0px;padding:0px;}div.containerul#news-listli{ padding-left:20px; background-image:url(/img/sprite.png); background-repeat:no-repeat; background-position:-120px0px;}A{ font-size:14px; font-weight：bold; line-height:150%; color:#000000;}參考答案div.container{ width:500px; background:url(/img/sprite.png)no-repeat0-78px;}#news-list,#news-listli{margin:0padding:0;}#news-listli{padding-left:20px;background:url(/img/sprite.png)no-repeat-120px0;}A{font:bold14px/150%;color:#000;}3、css題目:圓角半透明純CSS方式實(shí)現(xiàn)圓角框的原理在網(wǎng)絡(luò)上已經(jīng)有很多人詳細(xì)解說(shuō)了，下面這個(gè)示意圖是我將其中的一個(gè)圓角進(jìn)行放大后的效果。圖一從上面效果圖中我們可以看到其實(shí)這種圓角框是靠一個(gè)個(gè)容器堆砌而成的，每一個(gè)容器的寬度不同，這個(gè)寬度是由margin外邊距來(lái)實(shí)現(xiàn)的，如：margin:05px;就是左右兩側(cè)的外邊距5像素，從上到下有5條線，其外邊距分別為5px，3px，2px，1px，依次遞減。因此根據(jù)這個(gè)原理我們可以實(shí)現(xiàn)簡(jiǎn)單的html結(jié)構(gòu)和樣式。代碼/*上圓角框通用設(shè)置樣式*/.b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8{ height:1px; font-size:1px; overflow:hidden; display:block; }.b1,.b8{ margin:05px;}.b2,.b7{ margin:03px; border-right:2pxsolid; border-left:2pxsolid;}.b3,.b6{ margin:02px; border-right:1pxsolid; border-left:1pxsolid;}.b4,.b5{ margin:01px;border-right:1pxsolid; border-left:1pxsolid; height:2px;}.content{ border-right:1pxsolid; border-left:1pxsolid; overflow:hidden;}/*顏色方案一,藍(lán)色邊框*//*下面第一、二句決定邊框顏色，第三句決定背景顏色*//*邊框色*/.color1.b2,.color1.b3,.color1.b4,.color1.b5,.color1.b6,.color1.b7,.color1.content{ border-color:#96C2F1;}.color1.b1,.color1.b8{ background:#96C2F1;}css實(shí)現(xiàn)半透明：<styletype="text/css">.alpha1,.alpha2{ width:100%;height:auto;min-height:250px;/*必需*/_height:250px;/*必需*/overflow:hidden;background-color:#FF0000;/*背景色*/}.alpha1{filter:alpha(opacity=30);/*IE透明度30%*/}.alpha2{background-color:#FFFFFF;-moz-opacity:0.7;/*Moz+FF透明度30%*/opacity:0.7;/*支持CSS3的瀏覽器（FF1.5也支持）透明度30%*/}.ap2{position:absolute;}</style><divclass="alpha1"><divclass="ap2"><p>背景為紅色(#FF0000)，透明度20%。</p></div><!--[ifIE]> <![if!IE]> <![endif]--> <divclass="alpha2"></div> <!--[ifIE]> <![endif]><![endif]--></div>4、JS題目：獲取頁(yè)面中所有的class為test的節(jié)點(diǎn)//獲得標(biāo)簽名為tagName,類名className的元素functiongetClass(tagName,className){ //支持這個(gè)函數(shù)if(document.getElementsByClassName){ returndocument.getElementsByClassName(className);}else{ //獲取標(biāo)簽 vartags=document.getElementsByTagName(tagName); //用于返回類名為className的元素vartagArr=[];for(vari=0;i<tags.length;i++){if(tags[i].className==className){ //保存滿足條件的元素tagArr[tagArr.length]=tags[i];}}returntagArr;}}vartopMenus=getClass('li','topMenu');for(vari=0;i<topMenus.length;i++){alert(topMenus[i].innerHTML);}5、使用js取得數(shù)組中無(wú)重復(fù)的元素：就是去重//方法一 <script> functiongetDistArray(a,n){ sort(a,n); varnew_arr=newArray(); varres=newArray(); new_arr=a; res[0]=new_arr[0]; vark=1; varkey=1; for(i=1;i<n;i++){ j=k-1; if(new_arr[j]!=new_arr[i]){ res[key]=new_arr[i]; key++; k=i+1; } } returnres; } functionsort(a,n){ flag=false; for(i=0;i<n-1;i++){ for(j=0;j<n-i-1;j++){ if(parseInt(a[j])>parseInt(a[j+1])){ tmp=a[j+1]; a[j+1]=a[j]; a[j]=tmp; flag=true; } } if(flag==false){ returna; } } }//方法二functiongetDist(a,n){ varres=newArray(); res[