<dfn id="w48us"></dfn><ul id="w48us"></ul>
  • <ul id="w48us"></ul>
  • <del id="w48us"></del>
    <ul id="w48us"></ul>
  • web前端筆試題(HTML/CSS篇)

    時(shí)間:2022-10-09 16:06:49 筆試題目 我要投稿
    • 相關(guān)推薦

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

      導(dǎo)讀:網(wǎng)頁不再只是承載單一的文字和圖片,各種富媒體讓網(wǎng)頁的內(nèi)容更加生動(dòng),網(wǎng)頁上軟件化的交互形式為用戶提供了更好的使用體驗(yàn),這些都是基于前端技術(shù)實(shí)現(xiàn)的。以下是由應(yīng)屆畢業(yè)生網(wǎng)小編J.L為您整理推薦的前端開發(fā)筆試題目,歡迎參考閱讀。

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

      一、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),就是可以輸入可以下拉菜單選擇。

      思路:

      (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

      HTML:

      left

      right

      (2) 使用float

      HTML:

      固定寬度

      自適應(yīng)

      二者的CSS公用,如下:

      html,body{width:100%;height:100%;margin:0px;padding:0px;}

      .container {width:100%;height:400px;position:relative;}

      .fl1 {float:left;}

      .left {width:100%;height:400px;background:#AFFFD0;position:absolute;}

      .right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}

      .clear {clear:both;overflow:hidden;height:0px;}

      .container2 {width:100%;height:400px;margin-top:100px;}

      .left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}

      .right2 {height:400px;background:#f9afff;}

      9,解釋document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"

      em是相對(duì)長度單位,相當(dāng)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸,如果當(dāng)前行內(nèi)文本的字體尺寸未被指定,則相對(duì)于瀏覽器的默認(rèn)字體尺寸。

      該語句將id為ElementID的元素的字體設(shè)置為當(dāng)前對(duì)象內(nèi)文本的字體尺寸的1.5倍

      10,Doctype? 嚴(yán)格模式與混雜模式-如何觸發(fā)這兩種模式,區(qū)分它們有何意義? 行內(nèi)元素有哪些?塊級(jí)元素有哪些?CSS的盒模型?

      DOCTYPE是文檔類型,用來說明使用的HTML或者XHTML是什么版本,其中的DTD叫文檔類型定義,里面包含了文檔規(guī)則,瀏覽器根據(jù)定義的DTD來解析頁面的標(biāo)識(shí)并展現(xiàn)出來

      DOCTYPE有兩種用途:一個(gè)可以進(jìn)行頁面的有效性驗(yàn)證,另一個(gè)可以區(qū)分瀏覽器使用嚴(yán)格模式還是混雜模式來解析CSS。

      嚴(yán)格模式和混雜模式是瀏覽器解析CSS的兩種模式,目前使用的大部分瀏覽器對(duì)這兩種模式都支持,但是IE5只支持混雜模式。

      可那個(gè)過DOCTYPE聲明來判斷哪種模式被觸發(fā)

      (1) 沒有DOCTYPE聲明的網(wǎng)頁采用混雜模式解析

      (2) 對(duì)使用DOCTYPE聲明的網(wǎng)頁視不同瀏覽器進(jìn)行解析

      (3) 對(duì)于瀏覽器不能識(shí)別的DOCTYPE聲明,瀏覽器采用嚴(yán)格模式解析

      (4) 在ie6下,如果在DOCTYPE聲明之前有一個(gè)xml聲明比如

      ,采用混雜模式解析,在IE7,IE8中這條規(guī)則不生效。

      (5) 在ie下,如果DOCTYPE之前有任何字符,都會(huì)導(dǎo)致它進(jìn)入混雜模式,如:

      區(qū)分這兩種模式可以理解瀏覽器解析CSS的區(qū)別,主要是在盒模式的解釋上。

      常見的塊級(jí)元素有:DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

      常見的內(nèi)聯(lián)元素:SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等

      CSS盒模型用于描述為一個(gè)HTML元素形成的矩形盒子,盒模型還涉及元素的外邊距,內(nèi)邊距,邊框和內(nèi)容,具體來講最里面的內(nèi)容是元素內(nèi)容,直接包圍元素內(nèi)容的是內(nèi)邊距,包圍內(nèi)邊距的是邊框,包圍邊框的是外邊距。內(nèi)邊距,外邊距,邊框默認(rèn)為0。

      11,CSS引入的方式有哪些? link和@import的區(qū)別?

      引入css的方式有下面四種

      (1) 使用style屬性

      (2) 使用style標(biāo)簽

      (3) 使用link標(biāo)簽

      (4) 使用@import引入

      Link和@import區(qū)別:

      (1) link屬于XHTML標(biāo)簽,@import是CSS提供的一種方式。Link除了加載CSS外,還可以做很多事情,如定義RSS,rel連接屬性等;@import只能加載CSS

      (2)加載順序不同,當(dāng)頁面被加載的時(shí)候,link加載的CSS隨之加載,而@import引用的CSS會(huì)等到頁面完全下載完之后才會(huì)加載

      (3)兼容性差別,由于@import是CSS2.1提出的,所以老的瀏覽器不支持,IE系列的瀏覽器IE5以上才能識(shí)別,而link沒有這個(gè)問題

      使用DOM控制樣式的差別,使用JavaScript控制DOM去改變樣式的時(shí)候,只能操作link,@import不可以被DOM操作。

      12,如何居中一個(gè)浮動(dòng)元素?

      一個(gè)浮動(dòng)元素里面包含的元素可以水平居中,原理如下:

      讓浮動(dòng)元素left相對(duì)于父元素container右移50%,浮動(dòng)元素left的子元素left-child相對(duì)于left左移50%就可以實(shí)現(xiàn)left-child相對(duì)于container水平居中

      垂直居中類似,不過操作的不是left而是top

      13,HTML5和CSS3的了解情況

      有所了解

      HTML5和CSS3分別是新推出的HTML和CSS規(guī)范,前世是XHTML2和CSS2,目前還在草案階段,不過得到了Apple,Opera,Mozilla,Google,Microsoft不同程度的支持,也開發(fā)出了不少基于他們的應(yīng)用。

      HTML5相對(duì)于原來的HTML規(guī)范有一些變化:

      (1)DOCTYPE更簡潔

      (2)新增了一些語義化標(biāo)簽,如article,header,footer,dialog等

      (3)新增了一些高級(jí)標(biāo)簽,如,,

      CSS3相對(duì)于CSS2也新增了不少功能

      (1) 選擇器更加豐富

      (2) 支持為元素設(shè)置陰影

      (3) 無需圖片能提供圓角

      14,你怎么來實(shí)現(xiàn)下面這個(gè)設(shè)計(jì)圖

      (1) 切圖

      (2) 布局,采用兩欄布局,分別左浮動(dòng)

      (3) 編寫css代碼

      15,css 中id和class如何定義,哪個(gè)定義的優(yōu)先級(jí)別高?

      id:#***,***為HTML中定義的id屬性

      class:.***,***為HTML中定義的class屬性

      id比class的優(yōu)先級(jí)高

      16,用html實(shí)現(xiàn)如下表格(不如嵌套實(shí)用表格)

      三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(現(xiàn)場畫表)

      運(yùn)行結(jié)果如下:

      17,web標(biāo)準(zhǔn)網(wǎng)站有那些優(yōu)點(diǎn)

      (1) Web標(biāo)準(zhǔn)網(wǎng)站結(jié)構(gòu)和布局分離,使網(wǎng)站的訪問和維護(hù)更加容易

      (2) Web標(biāo)準(zhǔn)網(wǎng)站結(jié)構(gòu),布局以及頁面訪問都標(biāo)準(zhǔn)化,使網(wǎng)站能在更多的web標(biāo)準(zhǔn)設(shè)備中訪問,兼容性更好

      (3) Web標(biāo)準(zhǔn)網(wǎng)站語義化更好,語義化的XHTML不僅對(duì)用戶友好,對(duì)搜索引擎也友好。

    【web前端筆試題(HTML/CSS篇)】相關(guān)文章:

    谷歌HTML/CSS規(guī)范06-22

    Web前端開發(fā)筆試題集錦11-21

    web前端面試題201611-17

    Html/Css新手入門攻略01-23

    web前端實(shí)習(xí)報(bào)告09-06

    web前端簡歷封面05-28

    web前端簡歷模板05-29

    web前端自我介紹06-28

    如何面試Web前端開發(fā)10-10

    web前端簡歷封面模板05-06

    主站蜘蛛池模板: 无码aⅴ精品一区二区三区浪潮 | mm1313亚洲国产精品无码试看| 欧美精品国产一区二区| 久久精品女人天堂AV麻| 精品久久久久久久| 久久99国产综合精品免费| 国产精品欧美久久久久无广告| 国产精品无码专区| 最新精品国偷自产在线| 精品国产人成亚洲区| 久久国产乱子精品免费女| 无码人妻精品一区二区三18禁| 国产线视频精品免费观看视频| 国产成人精品视频在放| 精品亚洲国产成AV人片传媒| 日韩一区二区三区在线精品| 国产精品性爱| 亚洲精品免费观看| 99久久精品国产免看国产一区| 亚洲国产精品一区二区成人片国内| 精品日韩在线视频一区二区三区| 中文字幕精品一区影音先锋| jiucao在线观看精品| 热re99久久6国产精品免费| 亚洲А∨精品天堂在线| 久久人人爽人人精品视频| 国产成人精品久久综合 | 精品欧美一区二区三区久久久| 91精品国产色综久久| 亚洲国语精品自产拍在线观看| 九九热在线视频观看这里只有精品| 99热成人精品热久久669| 97久久超碰成人精品网站| 蜜芽亚洲av无码精品色午夜| 无码精品视频一区二区三区| 少妇人妻精品一区二区三区| 欧美精品hdvideosex4k| 久久久无码人妻精品无码| 久久久久久九九99精品| 日韩精品真人荷官无码| 日韩精品乱码AV一区二区|