❶ 前端代碼DIV+CSS關於定位
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>關於定位</title>
<styletype="text/css">
body{
margin-left:0px;
margin-top:0px;
margin-right:00px;
}
#header{
width:800px;
height:30px;
background-color:#9F9;
}
#main{
width:800px;
height:auto;
background-color:#FF6;
position:relative;
}
#one{
width:300px;
height:200px;
background-color:#F30;
position:absolute;
left:0px;
top:0px;
}
#tow{
width:490px;
height:200px;
background-color:#93F;
position:absolute;
left:310px;
top:0px;
}
#three{
width:400px;
height:200px;
background-color:#390;
position:absolute;
left:0px;
top:210px;
}
#four{
width:390px;
height:200px;
background-color:#66F;
position:absolute;
left:410px;
top:210px;
}
#foot{
width:960px;
height:30px;
background-color:#3C9;
}
</style>
<scripttype="text/javascript"src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
<divalign="center">
<divid="header"align="center">頭部</div>
<divid="main">
<divid="one">one</div>
<divid="tow">tow</div>
<divid="three">three</div>
<divid="four">four</div>
</div>
<divid="foot"align="left">版權</div>
</div>
</body>
<scripttype="text/javascript">
$(document).ready(function(){
varlast=$("#main>div").last();
vartop=last.css("top").replace("px","");
top=parseInt(top);
varheight=last.css("height").replace("px","");
height=parseInt(height);
varmainHeight=top+height;
$("#main").css("height",mainHeight+"px");
});
</script>
</html>
你的布局style都不用改，只需要在頁面載入完成後，計算出div#main中的div佔用的實際高度，並賦值給div#main。
計算原理：div#main中的每一個div都是設置了固定的top和height的，那麼最後一個div的top+height肯定就是div#main的實際佔用高度。
代碼中，我引用了jquery的css方法，你如果不jquery也可以自己用js原生寫。還有什麼問題就追問哈。
❷ 如何理解前端模塊化
前端模塊化
在JavaScript發展初期就是為了實現簡單的頁面交互邏輯，寥寥數語即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端代碼日益膨脹
這時候JavaScript作為嵌入式的腳本語言的定位動搖了，JavaScript卻沒有為組織代碼提供任何明顯幫助，甚至沒有類的概念，更不用說模塊（mole）了，JavaScript極其簡單的代碼組織規范不足以駕馭如此龐大規模的代碼
模塊
既然JavaScript不能handle如此大規模的代碼，我們可以借鑒一下其它語言是怎麼處理大規模程序設計的，在Java中有一個重要帶概念——package，邏輯上相關的代碼組織到同一個包內，包內是一個相對獨立的王國，不用擔心命名沖突什麼的，那麼外部如果使用呢？直接import對應的package即可
import java.util.ArrayList;
遺憾的是JavaScript在設計時定位原因，沒有提供類似的功能，開發者需要模擬出類似的功能，來隔離、組織復雜的JavaScript代碼，我們稱為模塊化。
一個模塊就是實現特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什麼功能，就載入什麼模塊。模塊開發需要遵循一定的規范，各行其是就都亂套了
規范形成的過程是痛苦的，前端的先驅在刀耕火種、茹毛飲血的階段開始，發展到現在初具規模，簡單了解一下這段不凡的歷程
函數封裝
我們在講函數的時候提到，函數一個功能就是實現特定邏輯的一組語句打包，而且JavaScript的作用域就是基於函數的，所以把函數作為模塊化的第一步是很自然的事情，在一個文件裡面編寫幾個相關函數就是最開始的模塊了
function fn1(){
statement
}
function fn2(){
statement
}
這樣在需要的以後夾在函數所在文件，調用函數就可以了
這種做法的缺點很明顯：污染了全局變數，無法保證不與其他模塊發生變數名沖突，而且模塊成員之間沒什麼關系。
對象
為了解決上面問題，對象的寫法應運而生，可以把所有的模塊成員封裝在一個對象中
var myMole = {
var1: 1,
var2: 2,
fn1: function(){
},
fn2: function(){
}
}
這樣我們在希望調用模塊的時候引用對應文件，然後
myMole.fn2();
這樣避免了變數污染，只要保證模塊名唯一即可，同時同一模塊內的成員也有了關系
看似不錯的解決方案，但是也有缺陷，外部可以隨意修改內部成員
myModel.var1 = 100;
這樣就會產生意外的安全問題
立即執行函數
可以通過立即執行函數，來達到隱藏細節的目的
var myMole = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
這樣在模塊外部無法修改我們沒有暴露出來的變數、函數
上述做法就是我們模塊化的基礎，目前，通行的JavaScript模塊規范主要有兩種：CommonJS和AMD
CommonJS
我們先從CommonJS談起，因為在網頁端沒有模塊化編程只是頁面JavaScript邏輯復雜，但也可以工作下去，在伺服器端卻一定要有模塊，所以雖然JavaScript在web端發展這么多年，第一個流行的模塊化規范卻由伺服器端的JavaScript應用帶來，CommonJS規范是由NodeJS發揚光大，這標志著JavaScript模塊化編程正式登上舞台。
定義模塊
根據CommonJS規范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內部定義的變數，無法被其他模塊讀取，除非定義為global對象的屬性
模塊輸出：
模塊只有一個出口，mole.exports對象，我們需要把模塊希望輸出的內容放入該對象
載入模塊：
載入模塊使用require方法，該方法讀取一個文件並執行，返迴文件內部的mole.exports對象
❸ 如何規劃和設計較復雜的網頁
網頁的規劃和設計是兩個相對獨立的內容。
一般網頁製作都會經歷一個：規劃 - 設計 - 製作 的過程。
規劃，規劃也叫網站策劃，你需要整理出網站的內容分類，通常是從主導航入手，然後逐層細化和歸類。主要的原則是流暢，清晰，這直接涉及最終的用戶體驗。一般規劃還可以使用草圖文案和原型圖設計。規劃工作完成時，你要整理出完整的頁面列表和內容形式，比如列表，圖文列表等。
設計，設計階段是簡單說是美化原型圖，讓網頁更具美感。設計的原則自然是遵循網頁設計規范，保持設計源文件的清晰度和圖層合理性，這一步，你除了需要具備基礎的網頁設計理論外，還需要作圖能力，當然，還需要你大致懂得網頁效果圖和實際網頁的關系（字體，圖片，圖標等！）
製作，製作部分一般稱為開發，開發分為前端和編程兩部分。
前端開發，是把網頁效果圖製作成html文件。這一步，你需要使用到html、css、js等基礎的網頁編程語言。前端開發的原則是代碼嚴謹（標簽使用得當，js無錯誤等），頁面兼容大部分瀏覽器和屏幕。
編程開發，是製作頁面動態數據交互，也就是通常所說的增刪改查。這一步的工作相對復雜，主要需要注意程序的高效性，安全性和交互的合理性。
其實，你所說的復雜，可以從兩個方面理解，一是頁面結構的復雜，二是程序功能的復雜。
網頁結構的復雜，就是網頁設計的比較「繁瑣」。頁面內容較多，頁面中的各種交互較為復雜。這種時候，你需要有靈活的代碼邏輯，也需要你能夠從整體上把握網頁的構成和框架，只有這樣，你才可以把復雜的網頁一步一步、一層一層簡化掉，也就是化整為零。通常，一個網頁的設計和製作也基本是1-2-3-4-5這樣的製作，一個頁面，氛圍2個區域，然後逐層細分。當你熟練的使用position等特殊的css技巧後，你會發現，其實做網頁和ps作圖差不多。
程序設計的復雜性，這個就仁者見仁了，程序設計的復雜和網站規劃相關，也和程序開發的模式有關，網站規劃的時候，你就要把每個功能推敲好，具體這個模塊或功能適合怎樣的表現，大致能使用到那些技術，有無其他介面等。其實有時候，規劃初期可能有20幾個功能，經過推敲後變成了10個，而最終開發的時候，可能因為模塊的操作的相似性又會被程序人員開發成5個功能塊，當然這是一種開發模式。總而言之，程序設計的復雜性，首先需要考慮有無必要復雜，然後設計復雜程序，然後簡單的驗證程序的可用性，最終確定程序設計方案。
❹ 前端如何快速尋找到css樣式的位置
CSS樣式實現快速定位bug的六大技巧
1、檢查是否清除浮動
其實有不少的CSSBUG問題是因為沒有清除浮動造成的。養成良好的清除浮動的習慣是必要的，推薦使用無額外HTML標簽的清除浮動的方法（盡量避免使用overflow:hidden;zoom:1的類似方法來清除浮動，會有太多的限制性）。
2、檢查IE下是否觸發haslayout
很多的IE下復雜CSS BUG都與IE特有的haslayout息息相關。熟悉和理解haslayout對於處理復雜的CSSBUG會事半功倍。推薦閱讀old9翻譯的《Onhavinglayout》（如果無法翻越穿越偉大的GFW，可閱讀藍色上的轉帖）
快捷提示：如果觸發了haslayout，IE的調試工具IEDeveloperToolbar中的屬性中將會顯示haslayout值為-1。
3、邊框背景調試法
故名思議就是給元素設置顯眼的邊框或者背景（一般黑色或紅色），進行調試。此方法是最常用的調試CSSBUG的方法之一，對於復雜BUG依舊適用。經濟實惠還環保.
4、檢查頁面的標簽是否閉合
不要小看這條，也許折騰了你兩天都沒有解決的CSS BUG問題，卻僅僅源於這里。畢竟頁面的模板一般都是由開發來嵌套的，而他們很容易犯此類問題。
快捷提示：可以用Dreamweaver打開文件檢查，一般沒有閉合的標簽，會黃色背景高亮。
5、樣式排除法
有些復雜的頁面也許載入了N個外鏈CSS文件，那麼逐個刪除CSS文件，找到BUG觸發的具體CSS文件，縮小鎖定的范圍。
對於剛才鎖定的問題CSS樣式文件，逐行刪除具體的樣式定義，定位到具體的觸發樣式定義，甚至是具體的觸發樣式屬性。
6、模塊確認法
有時候我們也可以從頁面的HTML元素出發。刪除頁面中不同的HTML模塊，尋找到觸發問題的HTML模塊。
❺ 前端頁面有哪三層構成，分別是什麼作用是什麼
最准確的網頁設計思路是把網頁分成三個層次，即：結構層、樣式層、行為層。
HTML：結構層
網頁的結構或內容層是該頁面的基礎HTML代碼。正如房屋的框架為房屋的其他部分構建了一個堅實
的基礎，HTML的堅實基礎創建了一個可以在其上創建網站的平台。
結構層用於存儲客戶想要閱讀或查看的所有內容。HTML結構可以包含文本和圖像，它包括訪問者用
於瀏覽網站的超鏈接。這是在符合標準的HTML5中編碼的，可以包括文本，圖像和多媒體（視頻，音頻等）。
網站內容的每個方面都應該在結構層中表示。這允許關閉JavaScript的客戶或無法查看整個網站的
CSS訪問許可權的客戶（如果不是所有功能）。
CSS：樣式層
該層指示結構化HTML文檔如何看待網站的訪問者，並由CSS（層疊樣式表）定義。這些文件包含有
關如何在Web瀏覽器中顯示文檔的樣式說明。樣式層通常包括基於屏幕大小和設備更改站點顯示的
媒體查詢。
網站的所有視覺樣式都應位於外部樣式表中。您可以使用多個樣式表，但請記住，每個CSS文件都需
要HTTP請求才能獲取它，從而影響站點性能。
JavaScript：行為層
行為層使網站具有交互性，允許頁面響應用戶操作或基於一組條件進行更改。JavaScript是行為層最
常用的語言，但CGI和PHP也經常被使用。
當開發人員引用行為層時，大多數都是指在Web瀏覽器中直接激活的層。您可以使用此圖層直接與
DOM（文檔對象模型）進行交互。在內容層中編寫有效的HTML對於行為層中的DOM交互非常重
要。在構建行為層時，應該像使用CSS一樣使用外部腳本文件來優化速度和性能。
(5)前端復雜化頁面定位擴展閱讀：
分層的一些好處是：
共享資源：當您編寫外部CSS或JavaScript文件時，站點上的任何頁面都可以使用該文件。如果
您需要對該文件進行更改，也許更新網站上的某些排版樣式，則使用該樣式表的每個頁面都會得到
更改。沒有必要單獨編輯網站的每個頁面，這對於大型網站來說可能是一項艱苦的任務。
下載速度更快：首次由客戶下載腳本或樣式表後，Web瀏覽器會對其進行緩存。由於這些共享
資源現在包含在瀏覽器的緩存中，因此瀏覽器中請求的其他頁面載入速度更快，從而提高了整體頁
面速度和性能。
多人團隊：如果您有多個人同時在網站上工作，您可以使用允許文件簽入和簽出的系統，以確
保每個人都使用最新版本。如果樣式和行為與結構文檔交織在一起，那就更難了。
搜索引擎優化：一個明確分離風格和結構的網站可能會對搜索引擎有更好的表現，因為它們可以更有效地抓取內容並理解頁面而不會陷入視覺風格和行為信息。
輔助功能：外部樣式表和腳本文件更易於人們和瀏覽器訪問。屏幕閱讀器等軟體可以更輕松地
處理結構層中的內容，而無需處理無論如何都無法使用的樣式。
向後兼容性：使用單獨的開發層設計的站點更可能向後兼容，因為無法使用某些CSS樣式或禁
用了JavaScript的瀏覽器和設備仍然可以查看HTML。然後，您可以使用支持它們的瀏覽器的功能逐
步增強您的網站。
❻ 測試：進入某個頁面顯示內容錯誤，如何定位是前端還是後端問題
朋友您好，進入某個頁面顯示內容錯誤，定位是前端問題還是後端問題，其實很簡答。將後端的日誌等級調低，當頁面顯示內容錯誤的時候，可以看一下後端日誌有沒有報錯；其次，如果你是研發人員的話，可以debug或者將頁面請求的響應值都列印出來。還有一種方法，就是在頁面端，使用一些工具，如打開開發者工具，點擊網路，可以看一下請求後台的返回值是否是預期的，如果是預期的值，頁面展示不對，那就是前端展示出現了問題，如果是後端響應的值都不對，那可以從後端排查問題。
❼ web前端如何實現一個div固定在某個位置
在前端裡面，如何將一個div固定在某個位置，屬於css內position定位的內容。position定位屬性有五種類型，分別如下：
1.static 定位。html元素的默認值，即沒有定位，遵循正常的文檔流對象。靜態定位的元素不會受到 top, bottom, left, right影響。
2.fixed 定位。元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。
3.relative 定位。相對定位元素的定位是相對其正常位置。
4.absolute 定位。絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於整個頁面。
5.sticky 定位。粘性定位是基於用戶的滾動位置來定位。它依賴於用戶的滾動，在position:relative與position:fixed定位之間切換。
❽ 為什麼我們的WEB前端變的越來越復雜
1、以前對於前端的定位可能只是「頁面仔」，把設計師的設計變成一個實際的網頁。不過現在可不是這么簡單了，同樣是一張設計圖，需要在許多千奇百怪的瀏覽器上面進行兼容，調試。而且因為現在網頁的交互已經變得越來越復雜，單純的網頁已經不能夠滿足於用戶。而更加像是一個富客戶端。
2、而且隨著HTML5跨平台應用的興起，前端的定位又進一步發展了。因為可以要求前端編寫移動端web app應用甚至是跨平台應用。這個時候，前端要學習的東西就更多了。
3、可能這些只是一個表面上看到的東西。因為前端工程師如果定位不好，在一個團隊中很容易成為一個中間人。為什麼這么說呢，因為團隊中會使用一種後端語言，常見的有python,php,ruby現在還有node.js（對不起，我知道node.js不是一種語言，不過你懂就行了），如果你不會這種後端語言，你會變得好像一個局外人，甚至在團隊中顯得像個外包。因此前端又需要在應用層面上會這些後端的語言，比如說要爬爬數據，你總不能在瀏覽器上就完成吧？所以前端的范圍就更廣了。
好吧，從幾個方面說了前端為什麼那麼苦逼。其實前端是一個很好的練武場，你一定會在前端職位上成為一個多面手，學習到最多的東西，因為你跨維度是最大的，你懂設計，懂交互，懂後端語言，懂前端語言，會溝通，會兼容，你都做到了，你已經是個牛人了！歡迎加入前端。
❾ 前端框架如何實現定位
前端bug主要分為3個類別：HTML,CSS,Javascript三類問題
給個最大的區別方式方法：
出現樣式的問題基本都是CSS的bug
出現文本的問題基本都是html的bug
出現交互類的問題基本都是Javascript的bug
區分前後台交互：查看網路請求
TMS對應的VM模板，出現的一些截斷控制，轉換功能都屬於前端的問題
標簽閉合—表象，頁面中出現大范圍的混亂，就是少了標簽的情況，導致標簽未閉合
標簽浮出—例如滑鼠移動到文本位置，浮出全名的這種浮出形式都屬於標簽浮出的問題
標簽在不同的瀏覽器的一種解析方式的不同導致的前端bug例如如下結構
頁面定點的問題：最明顯的前端功能，在於點擊某個鏈接將頁面位置定位到對應的位置
頁面的跳轉，也屬於html的問題，大家在出現點擊未跳轉或者跳轉方式不正確的問題，直接可以定位到跳轉屬性的問題，找到對應的跳轉對應的塊提供給開發人員即可
兼容型bug
腳本兼容型問題：在出現對應交互的問題就基本可以定位到腳本兼容型bug，例如DIV的顯示和層結構。實際可以參考聚劃算的幾個商品滑鼠移動到小圖的時候，對應大圖展示的功能。
頁面樣式兼容型問題：直接表象在樣式上，都是基於框架的頁面展示錯誤，很容易定位
業務性bug
內容型bug
有產生交互類的問題，大多數都可以定位到是屬於javascript產生的問題，該部分大多不會報錯
有錯誤提示類的。頁面左下方有出現javascript的錯誤提示；有彈出錯誤信息提示的bug；瀏覽器返回的一些錯誤彈出框都屬於javascript的bug
現在以淘寶的前端人員工作為例進行相關bug定位的剖析
判斷前後台問題的區分方法：
FF, 打開錯誤控制台
a) Html中如果有鏈接，有相應的情況下，基本可以定位到是屬於前端的問題
b) 如果為空，或者有出現error錯誤信息，我們就可以定位到屬於後台開發的問題
一、HTML
最常見的HTML的問題—就是標簽的問題了，最常見的排查和解決辦法就是查看頁面源代碼，然後通過檢查標簽的工具，現在暫時提供idea.exe進行檢查，有其他更好的工具再進行推薦。
常見問題類別：
該部分可以看做為一個大的框即是標簽<a> 內嵌標題的標簽<p>，裡面再有這些個內容<ing>,那麼在不同的瀏覽器中，可能ie和FF的解析會產生不同，假設IE解析 為<a><p><ing></ing></a></p>的一種形式，但在FF 下可能解析為
<a><ing></ing></a>
<p></p>
的兩行的形式從而導致前端在復古鞋/板鞋這塊ing裡面的格式產生混亂
結構可看為：
a) 我們可以通過右鍵，查看元素的工具進行定位到毛點所定位到的位置，如果出現問題這種問題很直觀，並且能通過這種方法直接定位到問題
二、CSS，產生樣式問題。例如：排版，布局，顏色，背景等
css的bug主要分為：兼容型bug 、業務性bug 和 內容型bug
a) 表現：僅在少數幾個瀏覽器上出現
b) 原因：瀏覽器的解析不一致
c) 解決：根據實際情況進行前端代碼的通用性
d) 類別：
a) 表現：在所有瀏覽器下都有該問題
b) 原因：對業務不熟悉
c) 解決：根據需求進行修改達到業務要求
該類型的定位，主要在和實現的要求不一致，最直接表現在頁面的友好型，用戶的可用性的bug，可以定位為該類型
a) 表現： 前端自測正確，但在填入內容後，出現的錯誤，內容消失等
b) 原因： 擴展性未考慮周全
c) 解決： 進行overflow test
輸入內容的長度限制等功能可定位為內容型bug
三、Javascript
最直接的判斷方法，刷新頁面，出現滯後顯示的一些模塊基本都為腳本的輸出塊。該部分的一些問題可以參照兼容型bug中類別的腳本兼容型bug。
❿ 前端開發，頁面優化，性能優化有哪些方面
常用的優化有兩部分
第一：面向內容的優化
1. 減少 HTTP 請求
2. 減少 DNS 查找
3. 避免重定向
4. 使用 Ajax 緩存
5. 延遲載入組件
6. 預先載入組件
7. 減少 DOM 元素數量
8. 切分組件到多個域
9. 最小化 iframe 的數量
10. 不要出現http 404 錯誤
第二：面向 Server
1. 縮小 Cookie
2. 針對 Web 組件使用域名無關性的