web前端筆試題集錦(HTML/CSS篇)
導讀：網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗，這些都是基于前端技術(shù)實現(xiàn)的，
web前端筆試題集錦(HTML/CSS篇)
。以下是由應屆畢業(yè)生網(wǎng)小編J.L為您整理推薦的前端開發(fā)筆試題目，歡迎參考閱讀。
一、HTML/CSS
1，讓一個input的背景顏色變成紅色
2，div的高寬等于瀏覽器可見區(qū)域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區(qū)域
思路：
(1)先放置一個div1，浮動：position:absolute;top:0px;left:0px;
(2)再放置一個div2，浮動：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一個div3，令其高度超過瀏覽器高度，使div2產(chǎn)生滾動條
(4)對html,body進行樣式設置：width:100%;height:100%;overflow:hidden->不讓瀏覽器產(chǎn)生滾動條，避免頁面出現(xiàn)兩個滾動條
(5)編寫JavaScript，另div2的高度等于頁面可見高度，寬度等于頁面可見寬度，注意，在計算完可見高度height和可見寬度width后，要對這兩個值做處理，可見寬度-div2的滾動條的寬度，滾動條的寬度我這里假設是20px
這樣題目基本就完成了，不過瀏覽器的'兼容性還不是很好。
3，IE、FF下面CSS的解釋區(qū)別
(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下可以顯示手指狀，F(xiàn)F下不行
(7) UL的默認padding和margin
IE下ul默認有margin，F(xiàn)F下ul默認有padding
(8) FORM的默認margin
IE下FORM有默認margin，F(xiàn)F下margin默認為0
4，一個定寬元素在瀏覽器(IE6，IE7，F(xiàn)irefox)中橫向居中對齊的布局，請寫出主要的HTML標簽及CSS
思路：
IE6/7：text-align:center
Firefox：margin:0 auto(margin-top和margin-bottom也可以為其他數(shù)字，關(guān)鍵是margin-left,margin-right為auto)
5，CSS中margin和padding的區(qū)別
margin是元素的外邊框，是元素邊框和相鄰元素的距離
Padding是元素的內(nèi)邊框，是元素邊框和子元素的距離
6，最后一個問題是，如何制作一個combo選項，就是可以輸入可以下拉菜單選擇，
資料共享平臺
《web前端筆試題集錦(HTML/CSS篇)》(http://www.ishadingyu.com)。思路：
(1)布局select和input，讓input覆蓋select，除了select的下拉圖標，以方便select選擇
(2)編寫JS，為select添加onchange事件，onchange時將input的value置成select選中的指
7，
中alt和tittle的區(qū)別
alt：圖片顯示不出來了就提示alt
title：鼠標劃過圖片顯示的提示
8，用css、html編寫一個兩列布局的網(wǎng)頁，要求右側(cè)寬度為200px，左側(cè)自動擴展。
在這里我使用了兩種方式：
(1)使用position
【web前端筆試題集錦(HTML/CSS篇)】相關(guān)文章：