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

HTML

前端面试题—1

發布時間：2024/9/5 HTML 41 豆豆

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

??? 前端開發的學習還沒有找到很好的入門點，就做些題吧。

http://www.cnblogs.com/jQing/archive/2012/07/01/2571987.html

第一部分：用CSS實現布局

讓我們一起來做一個頁面

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

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

第二部分：用javascript優化布局

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

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

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

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

提示：

也許，我們其他的布局也會用到這個放大的效果哦。可以使用任何開源代碼，包括曾經你自己寫的。

關鍵字：javascript、封裝、復用

第三部分：處理緊急情況

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

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

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

第一題的兩種實現方式：

①：

②：（這種貌似不太好）

第二題的實現：

<!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>body{ margin:0; padding:0} div{background:#CCCCCC; position:absolute} #first{width:100px; height:150px} #second{top:160px;width:100px;height:150px} #third{ width:200px; height:310px; left:110px} </style> <script language="javascript">function zoom(id,x,y){ // 設置縮放函數參數：容器id、橫向縮放倍數、縱向縮放倍數（等比例縮放時也可以設定一個參數） var obj=document.getElementById(id); // 獲取元素對象值//alert(obj); var dW=obj.clientWidth ; // 獲取元素寬度 var dH=obj.clientHeight; // 獲取元素高度 obj.onmouseover=function(){ // 鼠標移入 this.style.width=dW*x+"px"; // 橫向縮放 this.style.height=dH*y+"px"; // 縱向縮放 this.style.backgroundColor="#f00";//設置調試背景 this.style.zIndex=1; // 設置z軸優先 } obj.onmouseout=function(){ // 鼠標移出，設回默認值 this.style.width=""; this.style.height=""; this.style.padding=""; this.style.backgroundColor=""; this.style.zIndex=""; } } </script> </head> <body onload="zoom('first',1.2,1.2),zoom('second',1.2,1.2),zoom('third',1.2,1.2)"><div id="first"></div> <div id="second"></div> <div id="third"></div> </body> </html>

第三題：

①是不是應該先看返回的狀態碼？根據狀態碼具體判斷是什么問題。

②JS代碼沒有放在頁面的后面，加載速度慢尚未顯示出來。或者是頁面地址出錯了。

這種情況下，先查看頁面的源代碼，看看有沒有什么問題，盡量先排除前端方面的問題。

然后找后臺技術人員，看是不是服務器或技術方面的問題。

轉載于:https://www.cnblogs.com/wj204/p/3887498.html

總結

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

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

面试题