web前端筆試題集錦(HTML/CSS篇)

　　導讀：網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術實現的，

web前端筆試題集錦(HTML/CSS篇)

。以下是由應屆畢業生網小編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選項，就是可以輸入可以下拉菜單選擇，

資料共享平臺

《web前端筆試題集錦(HTML/CSS篇)》(http://salifelink.com)。

　　思路：

　　(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

【web前端筆試題(HTML/CSS篇)】相關文章：

騰訊WEB前端筆試題和面試題答案10-09

芒果Web前端開發面試經歷08-15

筆美國國家儀器試題目09-23

ＨＲ是如何面試那些前端菜鳥的07-26

新浪筆經04-27

IBM公司筆經09-15

營銷卷筆經10-25

科勒筆經09-23

新聞總署筆經10-13

consulting firm筆經05-06