1.一個頁面上存儲了10^n個按鈕,請實現功能:點擊按鈕時,顯示這是頁面上的第幾個按鈕(alert便可)css
代碼以下:html
window.onload=function(){ var buttons=document.getElementsByTagName("button"); for(var i=0;i<buttons.length;i++){ buttons[i].index=i+1; } this.addEventListener('click',function(e){ if(e.target.nodeType==1&&e.target.nodeName.toUpperCase()=="BUTTON") alert(e.target.index); },false); }
2.用html+css實現以下框架:上方爲四幅圖片,實現其無縫鏈接,左邊爲導航欄,寬度固定爲100px,右邊長度可拉伸//圖片沒有,請自行腦補。。前端
主要代碼以下:node
html:web
<body> <div class="top"> <div class="photo"><img src="url"></div> <div class="photo"><img src="url"></div> <div class="photo"><img src="url"></div> <div class="photo"><img src="url"></div> </div> <div class="container"> <div class="left">sidebar</div> <div class="right">content</div> </div> </body>
css:框架
*{ margin: 0; padding: 0; } .top{ width:100%; height:50px; display:-moz-box; display:-webkit-box; display:box; padding:0; margin:0; } .top .photo{ -moz-box-flex:1; -webkit-box-flex:1; box-flex:1; } .container{ margin:0; padding:0; } .container::after, .container::before{/*清除浮動*/ content:""; display:table; } .container .left{ width:100px; float:left; } .container .right{ margin-left:100px; }