- 相關(guān)推薦
web前端筆試題集錦(HTML/CSS篇)
導(dǎo)讀:網(wǎng)頁不再只是承載單一的文字和圖片,各種富媒體讓網(wǎng)頁的內(nèi)容更加生動,網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(yàn),這些都是基于前端技術(shù)實(shí)現(xiàn)的,
web前端筆試題集錦(HTML/CSS篇)
。以下是由應(yīng)屆畢業(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進(jìn)行樣式設(shè)置:width:100%;height:100%;overflow:hidden->不讓瀏覽器產(chǎn)生滾動條,避免頁面出現(xiàn)兩個滾動條
(5)編寫JavaScript,另div2的高度等于頁面可見高度,寬度等于頁面可見寬度,注意,在計算完可見高度height和可見寬度width后,要對這兩個值做處理,可見寬度-div2的滾動條的寬度,滾動條的寬度我這里假設(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,一個定寬元素在瀏覽器(IE6,IE7,F(xiàn)irefox)中橫向居中對齊的布局,請寫出主要的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,最后一個問題是,如何制作一個combo選項(xiàng),就是可以輸入可以下拉菜單選擇,
資料共享平臺
《web前端筆試題集錦(HTML/CSS篇)》(http://m.oriental01.com)。思路:
(1)布局select和input,讓input覆蓋select,除了select的下拉圖標(biāo),以方便select選擇
(2)編寫JS,為select添加onchange事件,onchange時將input的value置成select選中的指
7,
中alt和tittle的區(qū)別
alt:圖片顯示不出來了就提示alt
title:鼠標(biāo)劃過圖片顯示的提示
8,用css、html編寫一個兩列布局的網(wǎng)頁,要求右側(cè)寬度為200px,左側(cè)自動擴(kuò)展。
在這里我使用了兩種方式:
(1)使用position
【web前端筆試題(HTML/CSS篇)】相關(guān)文章:
騰訊WEB前端筆試題和面試題答案10-09
筆美國國家儀器試題目09-23
HR是如何面試那些前端菜鳥的07-26
新浪筆經(jīng)04-27
IBM公司筆經(jīng)09-15
營銷卷筆經(jīng)10-25
科勒筆經(jīng)09-23
新聞總署筆經(jīng)10-13