品才網>面試>網站開發面試題

網站開發面試題

時間：2022-06-28 04:30:58 面試我要投稿

相關推薦

網站開發面試題

1.解決IE6及更早瀏覽器浮動時產生雙倍邊距的BUG

網站開發面試題

display:inline

2.如何解決IE6下的文本溢出BUG(行業內稱：多出一只豬)

刪除2個div之間所有的注釋;不設置浮動;調整2個div的寬度，比如將寬度調整為更小一點，刷新頁面看效果。

3.DIV浮動IE文本產生3象素的bug

左邊對象浮動，右邊采用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距. #box{

float:left; width:800px;} #left{ float:left; width:50%;}

#right{ width:50%;} *html #left{ margin-right:-3px; //這句是關鍵}

4.css hack

5.如果這道題出的不是IE6 而是讓你列舉各瀏覽器之間的兼容性解決方法，就要寫死了。。太多太多

二、如果讓一個div在頁面中垂直居中(動動腦子，其實方法很多，各有利弊)

1.絕對定位法

2.單行垂直居中(重點是里面的文字是單行)

div {

height:25px;

line-height:25px;

overflow:hidden;

}

3.多行未知高度文字的垂直居中

div {

padding:xxpx; (誰都會吧)

}

4.多行文本固定高度的垂直居中 (IE6不能正確地理解display:table和display:table-cell，所以要

用css hack，想知道為什么這樣做，可以參考

div#wrap父容器 {

display:table;

border:1px solid #FF0099;

background-color:#FFCCFF;

width:760px;

height:400px;

_position:relative;

overflow:hidden;

}

div#subwrap子容器 {

vertical-align:middle;

display:table-cell;

_position:absolute;

_top:50%;

}

div#content內容 {

_position:relative;

_top:-50%;

}

三、如何讓2個并列的div自動等高(不設高度)

注：如果能寫出3種常見方法固然最好，但最好寫一下各自優缺點，否則面試時肯定會問你為什么這樣

寫

1、背景模擬法(假高度)，按照尺寸制作背景，平鋪，當內容增多時，背景就會向下縱向重復，看起

來就向左右兩個div都自動向下延伸了一樣。

2、表格嵌套法(不難理解，表格都是等高的，就是在div中嵌套表格)

3、內外補丁法(最推薦的方法，因為只用css實現的，但初學者不易理解)

* { margin:0; padding:0; }

#wrap {

overflow:hidden; (這行代碼是重點，否則你會看到頁面很長很長)

padding:0;

padding-left:180px;(內補丁)

}

#left,#right {

height:auto;

margin-bottom:-10000px;(外補丁)

padding-bottom:10000px;(內補丁)

}

#left {

display:inline;

float:left;

width:180px;

margin-left:-180px;(外補丁)

background: #0CF;

}

#right{

float:right;

width:100%;

background: #FC6;

}

這里說一下內外補丁，其實也沒那么難理解，我的理解就是相互抵消。多用用margin負值，你會了解這

個原理的。

四、寬度自適應三欄的布局方式

三種方法：

1、絕對定位法(最易理解)

左右兩欄采用絕對定位，分別固定于頁面的左右兩側，中間的主體欄用左右margin值撐開距離。于是實

現了三欄自適應布局。

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

#left,#right{position:absolute; top:0; width:200px; height:100%;}

#left{left:0; background:#a0b3d6;}

#right{right:0; background:#a0b3d6;}

#main{margin:0 210px; background:#ffe6b8; height:100%;}

2、margin負值法(不易理解)

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

#main{width:100%; height:100%; float:left;}

#main #body{margin:0 210px; background:#ffe6b8; height:100%;}

#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}

#left{margin-left:-100%;}

#right{margin-left:-200px;}

重點是第一個div是中間的main，且必須套一個容器。

3、浮動法(最常見)

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

#main{height:100%; margin:0 210px; background:#ffe6b8;}

#left,#right{width:200px; height:100%; background:#a0b3d6;}

#left{float:left;}

#right{float:right;}

重點是中間的main要放在標簽最后，缺點是需要用clear:both

五、一小張效果圖，大致內容是一個圖片列表，ul內邊距左：10px 右：10px。ul中的li右邊距30px，

但最后一個li距離ul只有10px，也就是ul有邊框，里面的li圖片列表也有邊框。(這些屬性是定死的，

你不能修改，要求寫出這段css代碼)

這道題，其實也是考你的內外補丁掌握，大致方法是，ul設置左右內邊距后，設置li的margin負值，這

樣li在ul的框里就居中了。還有一種比較傻瓜的辦法，設置li的margin-right:30px的后，最后一個li

需要改class，把margin-right清掉。

六、談談你對WEB標準以及W3C的理解與認識。

這題網上隨便找找都有，大致要點:標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用

外鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內

容能被更廣泛的設備所訪問、更少的代碼和組件，容易維護、改版方便，不需要變動頁面內容、提供打

印版本而不需要復制內容、提高網站易用性。

【網站開發面試題】相關文章：

京東商城的網站是哪個團隊開發的？07-11