導讀：網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的互動形式為使用者提供了更好的使用體驗，這些都是基於前端技術實現的。以下是由本站小編J.L為您整理推薦的前端開發筆試題目，歡迎參考閱讀。
一、HTML/CSS
1，讓一個input的背景顏色變成紅色
2，div的高寬等於瀏覽器可見區域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區域
思路：
(1)先放置一個div1，浮動：position:absolute;top:0px;left:0px;
(2)再放置一個div2，浮動：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一個div3，令其高度超過瀏覽器高度，使div2產生滾動條
(4)對html,body進行樣式設定：width:100%;height:100%;overflow:hidden->不讓瀏覽器產生滾動條，避免頁面出現兩個滾動條
(5)編寫JavaScript，另div2的高度等於頁面可見高度，寬度等於頁面可見寬度，注意，在計算完可見高度height和可見寬度width後，要對這兩個值做處理，可見寬度-div2的滾動條的寬度，滾動條的寬度我這裡假設是20px
這樣題目基本就完成了，不過瀏覽器的相容性還不是很好。
3，IE、FF下面CSS的解釋區別
(1) 讓頁面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的設定+text-align:center
(2) ff：不支援濾鏡
ie：支援濾鏡
(3) ff：支援!important
ie支援*，ie6支援_
(4) min-width,min-height
FF支援，IE不支援，IE可以用css expression來替代
(5) Css Expression
FF不支援，IE支援
(6) cursor：hand
IE下可以顯示手指狀，FF下不行
(7) UL的預設padding和margin
IE下ul預設有margin，FF下ul預設有padding
(8) FORM的預設margin
IE下FORM有預設margin，FF下margin預設為0
4，一個定寬元素在瀏覽器(IE6，IE7，Firefox)中橫向居中對齊的佈局，請寫出主要的HTML標籤及CSS
思路：
IE6/7：text-align:center
Firefox：margin:0 auto(margin-top和margin-bottom也可以為其他數字，關鍵是margin-left,margin-right為auto)
5，CSS中margin和padding的區別
margin是元素的外邊框，是元素邊框和相鄰元素的距離
Padding是元素的內邊框，是元素邊框和子元素的距離
6，最後一個問題是，如何製作一個combo選項，就是可以輸入可以下拉選單選擇。
思路：
(1)佈局select和input，讓input覆蓋select，除了select的下拉圖示，以方便select選擇
(2)編寫JS，為select新增onchange事件，onchange時將input的value置成select選中的指
7，
中alt和tittle的區別
alt：圖片顯示不出來了就提示alt
title：滑鼠劃過圖片顯示的提示
8，用css、html編寫一個兩列布局的網頁，要求右側寬度為200px，左側自動擴充套件。
在這裡我使用了兩種方式：
(1)使用position