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

1、HTML題：實現(xiàn)下面的表格國家名稱地址排名中國淘寶32美國12網(wǎng)站排名代碼：<tableborder=1cellspacing=0>//border：邊框；cellspacing：單元格直接的空格//cellspacing與border-collapse:collapse的作用一樣 <tr> <thwidth="20%">國家</th> //width設(shè)置使得表格整齊排放 <thwidth="20%">名稱</th> <thwidth="40%">地址</th> <thwidth="20%">排名</th> </tr> <tralign=center>//align：設(shè)置文本居中顯示 <td>中國</td> <td>淘寶</td> <td></td> <td>32</td> </tr><tralign=center> <tdrowspan=2>美國</td>//rowspan:單元格可橫跨的行數(shù)。//colspan：單元格可橫跨的列數(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題目：請簡化以下的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方式實現(xiàn)圓角框的原理在網(wǎng)絡(luò)上已經(jīng)有很多人詳細解說了，下面這個示意圖是我將其中的一個圓角進行放大后的效果。圖一從上面效果圖中我們可以看到其實這種圓角框是靠一個個容器堆砌而成的，每一個容器的寬度不同，這個寬度是由margin外邊距來實現(xiàn)的，如：margin:05px;就是左右兩側(cè)的外邊距5像素，從上到下有5條線，其外邊距分別為5px，3px，2px，1px，依次遞減。因此根據(jù)這個原理我們可以實現(xià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;}/*顏色方案一,藍色邊框*//*下面第一、二句決定邊框顏色，第三句決定背景顏色*//*邊框色*/.color1.b2,.color1.b3,.color1.b4,.color1.b5,.color1.b6,.color1.b7,.color1.content{ border-color:#96C2F1;}.color1.b1,.color1.b8{ background:#96C2F1;}css實現(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題目：獲取頁面中所有的class為test的節(jié)點//獲得標簽名為tagName,類名className的元素functiongetClass(tagName,className){ //支持這個函數(shù)if(document.getElementsByClassName){ returndocument.getElementsByClassName(className);}else{ //獲取標簽 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ù)組中無重復(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[