前端-細節處理筆記

 

圖片處理

帶縮略圖的可更新焦點圖，不按照固定尺寸上傳，那麼咱們給圖片設置

.item .imgWrap{
    height : 500px; // 圖片最大高度，讓img vertical-align;
}

.item .imgWrap img{
    width: auto;  // 圖片根據高度自動變更寬度;
    max-width: 600px;     
    max-height: 500px;  // 設定最大高度，原圖片大於這個高度，就按照比例自動壓縮寬度，若是壓縮後的寬度大於最大寬度，則又按照最大寬度按比例壓縮寬度高度;
    vertical-align: middle; //若是圖片高度不夠最大高度, 圖片水平居中父級;
}

 

排錯思路：

　　* 檢查 javascript腳本是否反覆引入 (多個相同的js文件會產生沒法預料的錯誤);

      * 當你不知道某些函數在哪被調用的時候，沒必要惱火，把這函數註釋掉，這樣調用此函數的語句就會立馬在console控制檯報錯，抓到了吧？哈哈..  

　　  (可是這個函數調用的次數太多，找到調用的位置就太麻煩了，由於每當語句報錯，JS就會中止在這個地方，再也不運行;);

　　* 後端輸出模版出錯，檢查標籤是否閉合, 或者標籤的代碼書寫失誤.

 

HTML符號:

　　特殊符號如 > < ©  這些符號，必須使用 &nbsp; &gt;這些來代替，不然程序渲染可能會出問題;

 

文本換行:

.hotClick_bd .linksWrap a{ 
    display:inline-block; //關鍵，讓文本有了邊界，不然文本就不會知道從哪開始換行，而整段文本變成一排;
    white-space:nowrap;
}