- 相關(guān)推薦
web前端筆試題集錦(HTML/CSS篇)
導(dǎo)讀：網(wǎng)頁不再只是承載單一的文字和圖片，各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng)，網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(yàn)，這些都是基于前端技術(shù)實(shí)現(xiàn)的，
web前端筆試題集錦(HTML/CSS篇)
。以下是由應(yīng)屆畢業(yè)生網(wǎng)小編J.L為您整理推薦的前端開發(fā)筆試題目，歡迎參考閱讀。
一、HTML/CSS
1，讓一個(gè)input的背景顏色變成紅色
2，div的高寬等于瀏覽器可見區(qū)域的高寬，瀏覽器滾動(dòng)，div始終覆蓋瀏覽器的整個(gè)可見區(qū)域
思路：
(1)先放置一個(gè)div1，浮動(dòng)：position:absolute;top:0px;left:0px;
(2)再放置一個(gè)div2，浮動(dòng)：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一個(gè)div3，令其高度超過瀏覽器高度，使div2產(chǎn)生滾動(dòng)條
(4)對(duì)html,body進(jìn)行樣式設(shè)置：width:100%;height:100%;overflow:hidden->不讓瀏覽器產(chǎn)生滾動(dòng)條，避免頁面出現(xiàn)兩個(gè)滾動(dòng)條
(5)編寫JavaScript，另div2的高度等于頁面可見高度，寬度等于頁面可見寬度，注意，在計(jì)算完可見高度height和可見寬度width后，要對(duì)這兩個(gè)值做處理，可見寬度-div2的滾動(dòng)條的寬度，滾動(dòng)條的寬度我這里假設(shè)是20px
這樣題目基本就完成了，不過瀏覽器的兼容性還不是很好。
3，IE、FF下面CSS的解釋區(qū)別
(1) 讓頁面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的設(shè)置+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的默認(rèn)padding和margin
IE下ul默認(rèn)有margin，F(xiàn)F下ul默認(rèn)有padding
(8) FORM的默認(rèn)margin
IE下FORM有默認(rèn)margin，F(xiàn)F下margin默認(rèn)為0
4，一個(gè)定寬元素在瀏覽器(IE6，IE7，F(xiàn)irefox)中橫向居中對(duì)齊的布局，請(qǐng)寫出主要的HTML標(biāo)簽及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，最后一個(gè)問題是，如何制作一個(gè)combo選項(xiàng)，就是可以輸入可以下拉菜單選擇，
資料共享平臺(tái)
《web前端筆試題集錦(HTML/CSS篇)》(http://m.stanzs.com)。思路：
(1)布局select和input，讓input覆蓋select，除了select的下拉圖標(biāo)，以方便select選擇
(2)編寫JS，為select添加onchange事件，onchange時(shí)將input的value置成select選中的指
7，
中alt和tittle的區(qū)別
alt：圖片顯示不出來了就提示alt
title：鼠標(biāo)劃過圖片顯示的提示
8，用css、html編寫一個(gè)兩列布局的網(wǎng)頁，要求右側(cè)寬度為200px，左側(cè)自動(dòng)擴(kuò)展。
在這里我使用了兩種方式：
(1)使用position
【web前端筆試題(HTML/CSS篇)】相關(guān)文章：
騰訊WEB前端筆試題和面試題答案10-09
筆美國國家儀器試題目09-23
ＨＲ是如何面試那些前端菜鳥的07-26
新浪筆經(jīng)04-27
IBM公司筆經(jīng)09-15
營銷卷筆經(jīng)10-25
科勒筆經(jīng)09-23
新聞總署筆經(jīng)10-13