當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端试题

發布時間：2023/12/19 HTML 30 豆豆

生活随笔收集整理的這篇文章主要介紹了前端试题小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、請實現頁面布局，包括頁頭、內容區域、頁腳三部分，其中內容區域為左右分欄，左欄定寬200px、右欄自適應寬度。

知識點 CSS中position屬性的應用：

position:這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是屬于什么類型，相對定位元素會相對于它在正常流中的默認位置偏移。

absolute:生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。（left,top,bootom,right）進行規定。

fixed:生成絕對定位的元素，相對于瀏覽器窗口進行定位。（left top rigt bottom）

relative:生成相對定位，相對于其正常位置進行定位。（left:20表示向元素的LEFT位置添加20像素）

static ?默認沒有定位

<!DOCTYPE HTML> <html lang="ch-ZN"> <head> <meta charset="utf-8"> <title>頁頭中間分欄頁腳</title> <style>html,body,header,footer{width:100%;padding:0px; margin:0px;}header,footer{background: red;}#main{padding-left:200px;}#left{width:200px;position:absolute;left:0px;background: green;}#right{width:100%;background: yellow;} </style> </head> <body> <header> 我是頁頭 </header> <div id="main"> <div id="left">我是左邊</div> <div id="right">我是右邊</div> </div> <footer>我是頁腳 </footer> </body> </html>

轉載自（http://witmax.cn/css-layout-1.html）

最近發現阿里巴巴的Web前端開發面試題，共分三部分：CSS部分，JavaScript部分，緊急處理部分，分享給大家做個參考～

第一部分：用CSS實現布局

讓我們一起來做一個頁面

首先，我們需要一個布局。

請使用CSS控制3個div，實現如下圖的布局。

本題主要考察三個方面，1. IE6 的 3 像素 BUG；2. 清楚浮動；

1 <!DOCTYPE HTML> 2 <html lang="ch-ZN"> 3 <head> 4 <meta charset="utf-8"> 5 <title>布局</title> 6 <style> 7 div{background:#CCCCCC;} 8 #first{float:left;width:100px; height:150px} 9 #second{clear:left;float:left;margin-top:10px;width:100px;height:150px} 10 #third{zoom:1; width:200px;margin-left:110px;margin-left:107px; height:310px} 11 </style> 12 </head> 13 <body> 14 15 <div id="first"></div> 16 <div id="second"></div> 17 <div id="third"></div> 18 </body> 19 </html>

float:

loat 屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。

注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。

clear:

定義和用法

clear 屬性規定元素的哪一側不允許其他浮動元素。

說明

clear 屬性定義了元素的哪邊上不允許出現浮動元素。在 CSS1 和 CSS2 中，這是通過自動為清除元素（即設置了 clear 屬性的元素）增加上外邊距實現的。在 CSS2.1 中，會在元素上外邊距之上增加清除空間，而外邊距本身并不改變。不論哪一種改變，最終結果都一樣，如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。

點評：這里我們介紹一下CSS中的Zoom屬性，這個屬性一般不為人知，甚至有些CSS手冊中都查詢不到其實Zoom屬性是IE瀏覽器的專有屬性，Firefox等瀏覽器不支持。它可以設置或檢索對象的縮放比例。除此之外，它還有其他一些小作用，比如觸發ie的hasLayout屬性，清除浮動、清除margin的重疊等。?

Zoom的使用方法：?

zoom : normal | number?

normal :　默認值。使用對象的實際尺寸?

number :　百分數 | 無符號浮點實數。浮點實數值為1.0或百分數為100%時相當于此屬性的 normal 值用白話講解就是zoom:后面的數字即放大的倍數，可以是數值，也可以是百分比。如：zoom:1，zoom:120%。而這個屬性只要在IE中才起作用，所以很少用到它的實際用途，而最經常用到作用是清除浮動等，如：?

復制代碼代碼如下:
.border{?
border:1px solid #CCC;?
padding:2px;?
overflow:hidden;?
_zoom:1;?
}?
_zoom是CSS hack中專對IE6起作用的部分。IE6瀏覽器會執行zoom:1表示對象的縮放比例，但這里?
overflow:hidden;和_zoom:1;是連起來用的，作用是清除border內部浮動。?

同理，還可以使用同樣方法清除margin屬性在IE瀏覽器中的重疊問題。

CSS中zoom:1的作用?

兼容IE6、IE7、IE8瀏覽器，經常會遇到一些問題，可以使用zoom:1來解決，有如下作用：?
觸發IE瀏覽器的haslayout?
解決ie下的浮動，margin重疊等一些問題。?
比如，本站使用DIV做一行兩列顯示，HTML代碼：?

復制代碼代碼如下:
<div class="h_mainbox">?
<h2>推薦文章</h2>?
<ul class="mainlist">?
<li><a href="#" style="color:#0000FF" target="_blank">CSS庫吧</a></li>?
<li><a href="#" style="color:#0000FF" target="_blank">原創< /a></li>?
</ul>?
</div>?
CSS代碼：?

復制代碼代碼如下:
.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden}?
.h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;}?
.h_mainbox h2 span { float:right; font-weight:normal;}?
.h_mainbox ul { padding:6px 0px; background:#fff;}?
.mainlist { overflow:auto; zoom:1;}?
.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}?
.mainlist里面的zoom:1的那里就可以在IE6、IE7、IE8正常顯示效果了。?

css中的zoom的作用?

1、檢查頁面的標簽是否閉合?
不要小看這條，也許折騰了你兩天都沒有解決的 CSS BUG 問題，卻僅僅源于這里。畢竟頁面的模板一般都是由開發來嵌套的，而他們很容易犯此類問題。?
快捷提示：可以用 Dreamweaver 打開文件檢查，一般沒有閉合的標簽，會黃色背景高亮。?

　　2、樣式排除法?
有些復雜的頁面也許加載了 N 個外鏈 CSS 文件，那么逐個刪除 CSS 文件，找到 BUG 觸發的具體 CSS 文件，縮小鎖定的范圍。?

　　對于剛才鎖定的問題 CSS 樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。?

　　3、模塊確認法?
有時候我們也可以從頁面的 HTML 元素出發。刪除頁面中不同的 HTML 模塊，尋找到觸發問題的 HTML 模塊。?

　　4、檢查是否清除浮動?
其實有不少的 CSS BUG 問題是因為沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的，推薦使用無額外 HTML 標簽的清除浮動的方法（盡量避免使用 overflow:hidden;zoom:1 的類似方法來清除浮動，會有太多的限制性）。?

　　5、檢查 IE 下是否觸發 haslayout?
很多的 IE 下復雜 CSS BUG 都與 IE 特有的 haslayout 息息相關。熟悉和理解 haslayout 對于處理復雜的 CSS BUG 會事半功倍。推薦閱讀 old9 翻譯的《On having layout》（如果無法翻越穿越偉大的 GFW，可閱讀藍色上的轉帖）?
快捷提示：如果觸發了 haslayout，IE 的調試工具 IE Developer Toolbar 中的屬性中將會顯示 haslayout 值為 -1。?

　　6、邊框背景調試法?
故名思議就是給元素設置顯眼的邊框或者背景（一般黑色或紅色），進行調試。此方法是最常用的調試 CSS BUG 的方法之一，對于復雜 BUG 依舊適用。經濟實惠還環保^^?
最后想強調一點的是，養成良好的書寫習慣，減少額外標簽，盡量語義，符合標準，其實可以為我們減少很多額外的復雜 CSS BUG，更多的時候其實是我們自己給自己制造了麻煩。希望你遠離 BUG ，生活越來越美好。

第二部分：用javascript優化布局

由于我們的用戶群喜歡放大看頁面

于是我們給上一題的布局做一次優化。

當鼠標略過某個區塊的時候，該區塊會放大25%，

并且其他的區塊仍然固定不動。

提示：

也許，我們其他的布局也會用到這個放大的效果哦。

可以使用任何開源代碼，包括曾經你自己寫的。

關鍵字：javascript、封裝、復用

慚愧啊，用上邊那個布局我怎么也沒把它優化出來，硬這頭皮用絕對定位改了布局；

所以樣式改成了這樣

1 <!DOCTYPE HTML> 2 <html lang="ch-ZN"> 3 <head> 4 <meta charset="utf-8"> 5 <title>頁頭中間分欄頁腳</title> 6 <style> 7 body{ margin:0; padding:0} 8 div{background:#CCCCCC; position:absolute} 9 #first{width:100px; height:150px} 10 #second{top:160px;width:100px;height:150px} 11 #third{ width:200px; height:310px; left:110px} 12 13 14 </style> 15 </head> 16 <body> 17 18 <div id="first"></div> 19 <div id="second"></div> 20 21 <div id="third"></div> 22 <script type="text/javascript"> 23 function zoom(id,x,y){ 24 // 設置縮放函數參數：容器id、橫向縮放倍數、縱向縮放倍數（等比例縮放時也可以設定一個參數） 25 var obj=document.getElementById(id); // 獲取元素對象值 26 var dW=obj.clientWidth; // 獲取元素寬度 27 var dH=obj.clientHeight; // 獲取元素高度 28 //var oTop=obj.offsetTop; 29 //var oLeft=obj.offsetLeft; 30 obj.onmouseover=function(){ // 鼠標移入 31 this.style.width=dW*x+"px"; // 橫向縮放 32 this.style.height=dH*y+"px"; // 縱向縮放 33 this.style.backgroundColor="#f00"; // 設置調試背景 34 this.style.zIndex=1; // 設置z軸優先 35 } 36 obj.onmouseout=function(){ // 鼠標移出，設回默認值 37 this.style.width=""; 38 this.style.height=""; 39 this.style.padding=""; 40 this.style.backgroundColor=""; 41 this.style.zIndex=""; 42 } 43 } 44 zoom("first",1.25,1.25); 45 zoom("second",1.25,1.25); 46 zoom("third",1.25,1.25); 47 </script> 48 49 </body> 50 </html>

第三部分：處理緊急情況

好了，我們的頁面完成了。

于是我們將頁面發布上網。

突然，晴天霹靂，頁面無法訪問了，這時候，你會怎么做？

面試題到此為止，你是否能夠對答如流呢，仔細想一下，然后在翻頁看一下答案。

第三題也許是JS代碼沒有放在頁面的后面，加載速度慢尚未顯示出來?；蛘呤琼撁娴刂烦鲥e了。

這種情況下，先查看頁面的源代碼，看看有沒有什么問題，然后找后臺技術人員，看是不是服務器或技術方面的問題。

（個人認為 1 自己所輸的路徑是否錯誤，查看源代碼看看有沒有代碼沒寫好導致瀏覽器無法加載出頁面，js代碼是否正確加載，這些都查看正確之后找后臺人員看是不是服務器問題還是路徑問題。）

以下為Web前端開發筆試題集錦之HTML/CSS篇，移步Javascript篇

1，讓一個input的背景顏色變成紅色

1	<input type="text" style="background:red;"/>

2，div的高寬等于瀏覽器可見區域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區域

div的高寬等于瀏覽器可見區域的高寬，瀏覽器滾動，div始終覆蓋瀏覽器的整個可見區域.思路：
(1)先放置一個div1，浮動：position:absolute;top:0px;left:0px;
(position:absolute 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
relative 生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。)
(2)再放置一個div2，浮動：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一個div3，令其高度超過瀏覽器高度，使div2產生滾動條
(4)對html,body進行樣式設置：width:100%;height:100%;overflow:hidden->
(overflow:元素內容溢出元素框時如何呈現。visible,hidden,scroll,auto)不讓瀏覽器產生滾動條，避免頁面出現兩個滾動條
(5)編寫JavaScript，令div2的高度等于頁面可見高度，寬度等于頁面可見寬度，注意，在計算完可見高度height和可見寬度width后，要對這兩個值做處理，可見寬度-div2的滾動條的寬度，滾動條的寬度我這里假設是20px
（z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
說明該屬性設置一個定位元素沿 z 軸的位置軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠）

1 <!DOCTYPE HTML> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <title>前端試題</title> 6 <style> 7 8 html,body{height:100%;width:100%;margin: 0px;padding: 0px;overflow: hidden;} 9 #fullDiv{width:100%;height: 100%;position: absolute;left:0px;top:0px;background: #eee;border: 1px solid red;} 10 #mainDiv{width: 100%;height: 100%;overflow: auto;z-index:999;position: absolute;top: 0px;left: 0px;} 11 #innerDiv{height: 1000px;border:1px solid black;background: #ee0;position: absolute;} 12 13 14 15 </style> 16 </head> 17 18 <body> 19 <div id="fullDiv"></div> 20 <div id="mainDiv"> 21 <div id="innerDiv"> 22 </div> 23 </div> 24 <script > 25 function getBrowerSize(){ 26 if(document.compatMode=="BackCompat"){ 27 cWidth=document.body.scrollWidth; 28 cHeight=document.body.scrollHeight; 29 }else{ 30 cWidth=document.documentElement.scrollWidth; 31 cHeight=document.documentElement.scrollHeight; 32 } 33 return {width:(cWidth-21)+"px",height:(cHeight-4)+"px"}; 34 } 35 36 var floatDiv=document.getElementById("fullDiv"); 37 var size=getBrowerSize(); 38 floatDiv.style.height=size.height; 39 floatDiv.style.width=size.width; 40 41 42 43 </script> 44 45 46 47 48 </body> 49 </html>

js中的文檔模式-document.compatMode

Posted on?2009年08月13日?by?愚人碼頭

今天在看框架的時候無意間看到了document.compatMode，經過一番資料查找，終于搞懂了。

文檔模式在開發中貌似很少用到，最常見的是就是在獲取頁面寬高的時候，比如文檔寬高，可見區域寬高等。

IE對盒模型的渲染在 Standards Mode和Quirks Mode是有很大差別的，在Standards Mode下對于盒模型的解釋和其他的標準瀏覽器是一樣，但在Quirks Mode模式下則有很大差別，而在不聲明Doctype的情況下，IE默認又是Quirks Mode。所以為兼容性考慮，我們可能需要獲取當前的文檔渲染方式。

document.compatMode正好派上用場，它有兩種可能的返回值：BackCompat和CSS1Compat。

BackCompat：標準兼容模式關閉。瀏覽器客戶區寬度是document.body.clientWidth；CSS1Compat：標準兼容模式開啟。瀏覽器客戶區寬度是document.documentElement.clientWidth。

那么寫了個準確獲取網頁客戶區的寬高、滾動條寬高、滾動條Left和Top的代碼：

[code="javascript"]

if (document.compatMode == "BackCompat") {
?? cWidth = document.body.clientWidth;
?? cHeight = document.body.clientHeight;
?? sWidth = document.body.scrollWidth;
?? sHeight = document.body.scrollHeight;
?? sLeft = document.body.scrollLeft;
?? sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
?? cWidth = document.documentElement.clientWidth;
?? cHeight = document.documentElement.clientHeight;
?? sWidth = document.documentElement.scrollWidth;
?? sHeight = document.documentElement.scrollHeight;
?? sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
?? sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}

[/code]

參考網址：http://hi.baidu.com/%C9%AE_%CC%C6/blog/item/a323a9df5a67c45d95ee3701.html

更多閱讀：http://www.css88.com/archives/90，http://www.css88.com/archives/149

3，IE、FF下面CSS的解釋區別

（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下可以顯示手指狀，FF下不行

（7） UL的默認padding和margin

IE下ul默認有margin，FF下ul默認有padding

（8） FORM的默認margin

IE下FORM有默認margin，FF下margin默認為0

4，一個定寬元素在瀏覽器（IE6，IE7，Firefox）中橫向居中對齊的布局，請寫出主要的HTML標簽及CSS

思路：

IE6/7：text-align:center

Firefox：margin:0 auto(margin-top和margin-bottom也可以為其他數字，關鍵是margin-left,margin-right為auto)

貼出代碼：

01 02 03 04 05 06 07 08 09 10 11 12 13 14

5，CSS中margin和padding的區別

margin是元素的外邊框，是元素邊框和相鄰元素的距離

Padding是元素的內邊框，是元素邊框和子元素的距離

6，最后一個問題是，如何制作一個combo選項，就是可以輸入可以下拉菜單選擇。

思路：

（1）布局select和input，讓input覆蓋select，除了select的下拉圖標，以方便select選擇

（2）編寫JS，為select添加onchange事件，onchange時將input的value置成select選中的指

貼出代碼

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

<HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=utf-8'> <TITLE>可輸入的下拉框</TITLE> <style type="text/css"> ????.container {position:relative;margin:10px;} ????.container .sel {width:120px;} ????.container .input {width:100px;height:20px;position:absolute;} </style> </HEAD> <BODY> <div> ????<input type="text" id="input"></input> ????<select id="sel"> ????????<option value="選項1">選項1</option> ????????<option value="選項2">選項2</option> ????????<option value="選項3">選項3</option> ????????<option value="選項4">選項4</option> ????</select> </div> <script type="text/javascript"> ????var sel = document.getElementById("sel"); ????var input = document.getElementById("input"); ????sel.onchange = function() { ????????input.value = this.value; ????} </script> </BODY></HTML>

7，<img>中alt和tittle的區別

alt：圖片顯示不出來了就提示alt

title：鼠標劃過圖片顯示的提示

8，用css、html編寫一個兩列布局的網頁，要求右側寬度為200px，左側自動擴展。

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>雙列布局，右側定寬</title> <style> ???html,body{width:100%;height:100%;margin:0px;padding:0px;} ???#left {background:#F00; width:100%;position:absolute;padding-right:-200px;} ???#right {background:#0F0; width:200px;position:absolute;right:0px;} ???div {height:100%;} </style> </head> <body> ???<div id="left"></div> ???<div id="right"></div> </body> </html>

9，解釋document.getElementById(“ElementID”).style.fontSize=”1.5em”

em是相對長度單位，相當于當前對象內文本的字體尺寸，如果當前行內文本的字體尺寸未被指定，則相對于瀏覽器的默認字體尺寸。

該語句將id為ElementID的元素的字體設置為當前對象內文本的字體尺寸的1.5倍

10，Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義? 行內元素有哪些？塊級元素有哪些？CSS的盒模型？

DOCTYPE是文檔類型，用來說明使用的HTML或者XHTML是什么版本，其中的DTD叫文檔類型定義，里面包含了文檔規則，瀏覽器根據定義的DTD來解析頁面的標識并展現出來

DOCTYPE有兩種用途：一個可以進行頁面的有效性驗證，另一個可以區分瀏覽器使用嚴格模式還是混雜模式來解析CSS。

嚴格模式和混雜模式是瀏覽器解析CSS的兩種模式，目前使用的大部分瀏覽器對這兩種模式都支持，但是IE5只支持混雜模式。

可那個過DOCTYPE聲明來判斷哪種模式被觸發

（1）沒有DOCTYPE聲明的網頁采用混雜模式解析

（2）對使用DOCTYPE聲明的網頁視不同瀏覽器進行解析

（3）對于瀏覽器不能識別的DOCTYPE聲明，瀏覽器采用嚴格模式解析

（4）在ie6下，如果在DOCTYPE聲明之前有一個xml聲明比如

<?xml version=”1.0” encoding=”utf-8”?>，采用混雜模式解析，在IE7，IE8中這條規則不生效。

(5) 在ie下，如果DOCTYPE之前有任何字符，都會導致它進入混雜模式，如：

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

常見的塊級元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等

常見的內聯元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用于描述為一個HTML元素形成的矩形盒子，盒模型還涉及元素的外邊距，內邊距，邊框和內容，具體來講最里面的內容是元素內容，直接包圍元素內容的是內邊距，包圍內邊距的是邊框，包圍邊框的是外邊距。內邊距，外邊距，邊框默認為0。

11，CSS引入的方式有哪些? link和@import的區別?

引入css的方式有下面四種

（1）使用style屬性

（2）使用style標簽

（3）使用link標簽

（4）使用@import引入

Link和@import區別：

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

（2）加載順序不同，當頁面被加載的時候，link加載的CSS隨之加載，而@import引用的CSS會等到頁面完全下載完之后才會加載

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

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

12，如何居中一個浮動元素?

一個浮動元素里面包含的元素可以水平居中，原理如下：

讓浮動元素left相對于父元素container右移50%，浮動元素left的子元素left-child相對于left左移50%就可以實現left-child相對于container水平居中

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

貼出代碼：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>讓浮動元素居中</title> <style> html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;} .container {width:100%;height:100%;position:relative;} .left {width:400px;height:400px;background:#00F;float:left;position:relative;left:50%;top:50%;} .left div {position:relative;left:-50%;top:-50%;background:#F00;width:100%;height:100%;} .clear {clear:both;} </style> </head> <body> <div> <div><div>這是一個浮動的元素</div></div> <div></div> </div> </body> </html>

13，HTML5和CSS3的了解情況

有所了解

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

HTML5相對于原來的HTML規范有一些變化：

（1）DOCTYPE更簡潔

（2）新增了一些語義化標簽，如article,header,footer,dialog等

（3）新增了一些高級標簽，如<vedio>,<audio>,<canvas>

CSS3相對于CSS2也新增了不少功能

（1）選擇器更加豐富

（2）支持為元素設置陰影

（3）無需圖片能提供圓角

14，你怎么來實現下面這個設計圖

（1）切圖

（2）布局，采用兩欄布局，分別左浮動

（3）編寫css代碼

貼出代碼：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<a href="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <title>品致頁面制作</title> <style> html,body {width:100%;height:100%;margin:0px;padding:0px;overflow:hidden;} ul,li,span,div,img{padding:0px;margin:0px;} li {list-style:none;margin:0px;padding:0px;} .wrapper {} .fl {float:left;} .nav {width:90px;} .article {width:270px;padding-left:10px;padding-top:8px;} .title {font-size:12px;color:#3366cc;margin:8px 0px;} .title span {margin:0px 2px;} .btn {background:url(img/btn.jpg) no-repeat;width:61px;height:17px;display:block;} .article-list {font-size:12px;zoom:1;} .article-list li.tip{background:url(img/title-bg.jpg) 0px 3px no-repeat ;padding-left:15px;list-style:none;color:#000;} .article-list li.separator{background:url(img/separator.jpg) no-repeat;width:250px;height:3px;margin:4px 0px;display:block;_margin:0px;line-height:3px;_background:url(img/separator.jpg) 0px 5px no-repeat;} .clear {clear:both;overflow:hidden;height:0px;} </style> </head> <body> ???<div> ??????<div> ?????????<div> ????????????<img src="img/logo.jpg" alt="logo"/> ?????????</div> ?????????<div align="center"> ????????????<span>品•致</span> ????????????<span>第11期</span> ?????????</div> ?????????<div align="center"> ????????????<span></span> ?????????</div> ??????</div> ??????<div> ?????????<ul> ????????????<li>老虎伍茲為何被女人“吃掉”？</li> ????????????<li></li> ????????????<li>你必須告訴一聲的九件事</li> ????????????<li></li> ????????????<li>男人，被時尚拋棄的一群？</li> ????????????<li></li> ????????????<li>30天牛奶養生讓你煥發青春肌膚</li> ????????????<li></li> ????????????<li>你是否曾經關注過你的心臟？</li> ????????????<li></li> ?????????</ul> ??????</div> ??????<div></div> ???</div> </body> </html>

15，css 中id和class如何定義,哪個定義的優先級別高?

id：#***，***為HTML中定義的id屬性

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

id比class的優先級高

16，用html實現如下表格(不如嵌套實用表格)

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

使用表格嵌套，源碼如下：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

運行結果如下：

17，web標準網站有那些優點

（1） Web標準網站結構和布局分離，使網站的訪問和維護更加容易

（2） Web標準網站結構，布局以及頁面訪問都標準化，使網站能在更多的web標準設備中訪問，兼容性更好

（3） Web標準網站語義化更好，語義化的XHTML不僅對用戶友好，對搜索引擎也友好。

來源：http://www.xuchen.name/2010/10/18/HTML,CSS,筆試題.html 修改了個別錯誤

轉載于:https://www.cnblogs.com/huhaibo/p/3618386.html

總結

以上是生活随笔為你收集整理的前端试题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

试题

上一篇：网站SEO文章编辑的事项
下一篇： [原]HTML5系列培训一(201403