web重構技巧與常見問題
posted in web技術 at june 7th, 2008 /
一、 xhtml+css 技巧篇
●在重構也面之前要做的準備工作：
1.拿一張psd效果圖,必需是psd的這樣的話你就可以自己更加隨意的做切片；
2.先把psd不做切片生成乙個網頁,起名為index_psd.html(這個頁面做參考用)；
3. 在準備幾個必需的資料夾 images(放) 、css(放css樣式檔案)、js(放js檔案)；
●準備工作做好以後，先分析整個頁面的結構。分析頁面的結構要先整體再部分，先看頁面中最大的板塊是怎樣關聯的是上下並列還是左右平鋪。看清了頁面的大板塊結構，就可以構建頁面最基礎的幾個區塊了。例如我們的頁面試上中下結構，這時就可以寫：
//放也麵頭和導航等
//頁面的主題內容
●寫css的時候就需要使用index_psd.html這個檔案了，用dw開啟這個檔案，選擇檢視模式，可以通過拉輔助線，來測量各個區塊的長寬為設定css提供參考，這樣做的好處就是重構出來的頁面可以精確到1畫素。
●每寫好乙個區塊就要用ie和ff測試下效果，以便及時發現問題及時解決，在各個區塊沒內容的時候最好給他們都加上背景色。
●寫好大的板塊後，再分析大板塊裡面的內容，同樣的道理也是先整體再部分，例如內容頁面看起來是左右兩個板塊，這個時候我們可以把**寫為：
//放也麵頭和導航等
//頁面的主題內容
//左邊
//右邊
其中content-2-1中的2表是分兩欄，2-1表示左欄，2-2表示右欄這樣的分欄方式可以使自己檢視頁面**的時候更加直觀，分好多欄的時候這個優勢更加明顯。
●欄目列表加描述的最好用：
欄目1
欄目1描述
欄目2欄目2描述
●在css檔案定義的最開始最好加上如下語句
body,html
*●最好能給大的區塊設定overflow:：hidden，這樣可以保證容器不被撐開，從而破壞整個頁面的布局。
二、 div+css 問題篇
1. ie6意外空白問題：
在並列的幾個小區塊橫鋪在乙個大區塊中的時候，本來小區塊寬度的和等於大區塊的寬度，在ff等其他瀏覽器中沒問題，可是在ie6中就是有乙個區塊顯 示不出來要不就被擠到下面去了。這個時候可以設定小區塊的css 為display：inline。如果這個辦法還不行那就把各個區塊的寬度減少1到2個畫素。
2．ie6重影問題：
有時在ie6中在乙個大div結束的底端老出現div內容結尾幾個字元的重複，在ff等其他瀏覽器裡面就不會出現。解決這個問題有兩個辦法：1）刪 除注釋；2）在這個div的後面填加
定義clear的css樣式為：
.clear {
font-size: 1px;
clear: both;
visibility: hidden;
width: 1px;
推薦使用第二種方法，如果把注釋去掉的話**的可讀性就受到影響了。
3．ie6無法居中的問題：
一般情況下只要給乙個div（設其id為1）設定css樣式：margin:0px auto;就可以讓這個div在盛放它的容器（設其id為0）中居中了，它們的結構如下：…
但是ie6就不行。這個時候可以給div0的css設定：text-align: center;
5．ff中div裡面的內容出軌
有時在ie中看很正常的內容在ff中卻看到div裡面的東西跑到外面了，這種情況在div有邊框的時候尤為明顯。這是因為div在ie中設定了高度 後，如果div裡面的內容如果高於div的時候，div會自動增高。但是ff就沒有這麼靈活，只要限定了高度就不會自己改變。這時可以通過重設高度來解決 這個問題，也可以把高度設為自動。
6．ff中區域意外消失
其他的問題暫時想不起來了，在重構的過程中總會有一些莫名奇妙的問題，只要善於思考，不厭其煩的測試，或是到網上查詢，總會找到解決辦法的。每乙個問題的解決都是乙個不小的收穫。
web開發常見問題整理
this指向問題 在方法中誰呼叫this就指向誰 在物件方法中呼叫 事件繫結 事件監聽 在建構函式或者建構函式原型物件中this指向建構函式的例項 在專案中this指向問題的常見示例 上面1 因為在setinterval中要設定this.setstate 而此時的this已經指向window而不是c...
web開發常見問題整理
this指向問題 在方法中誰呼叫this就指向誰 在物件方法中呼叫 事件繫結 事件監聽 在建構函式或者建構函式原型物件中this指向建構函式的例項 在專案中this指向問題的常見示例 上面1 因為在setinterval中要設定this.setstate 而此時的this已經指向window而不是c...
Web產品的常見問題
15.安全考慮 直接url鏈結檢查 在web系統中，匿名在位址列直接輸入各個功能頁面的url位址，檢查系統是否處理了許可權控制 預防方法 開發 走查的方式確認所有頁面的具有許可權驗證邏輯 測試 獲取所有系統url，在非登入情況下進行遍歷截圖，或關鍵字判斷，驗證非登入狀態下無法訪問具有訪問許可權限定的...