前端頁面重構技巧總結TIP【持續更新...】
本文均為項目實戰經驗，要求兼容至IE8，所以以下內容均為兼容代碼，歡迎各位小夥伴批評指教。其實重構頁面是一門學問，看似簡單，卻暗藏很多學問。實際項目中頁面的重構有以下幾點最基本需求：
1.需要使用合理的標簽進行語義化；
2.可擴展性，在頁面的某個標簽內增加新的內容（文字或標簽），不會對原有內容造成影響。
3.當頁面接受後臺數據時，標簽內容替換後，頁面布局與樣式不會受到影響。
4.兼容性（根據項目需要）
頁面重構基本思想：
1.漸進增強思想（以兼容要求的最低版本為基礎，主鍵向高層次的瀏覽器靠攏）；例如：項目需要兼容至IE8的透明背景，則先需要使用透明背景圖片，在此基礎上再進行其他樣式的編寫。
2.代碼重用思想；包括相同結構的DOM結構和公用的CSS樣式
技巧匯總
1.li統一樣式，列表居中
如下如中間內容區為1200px;但要確保每個li的樣式是統一的，這樣既方便後臺程序進行循環，樣式也不會亂；若無需做兼容則使用：first-child選擇器就能實現，做兼容兼容時需要使ul外再套一層盒子做居中，而實際上ul是沒有劇中的（ul寬度大於ul的外層盒子）
應用公式為（5列） 4 * margin-right + 5 * li的width=1200 ul的寬度為 1200 + margin-right
代碼如下：
<div class="con"></div> <div class="ul-box"> <ul class="li-box"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
*{padding: 0;margin: 0;} .con{ width: 1200px; height: 200px; background: #ff0; margin: 0 auto; } .li-box{ width: 1250px; overflow: hidden; } .li-box li{ list-style: none; float: left; width: 200px; height: 400px; background: #f00; margin: 0 50px 20px 0; } .ul-box{ width: 1200px; margin: 0 auto; }
效果如下：
2.select樣式美化與兼容
目前純css樣式實現select的所有瀏覽器樣式一直是無法實現的，最後換了一下思路，大膽使用了屬性hack；
在chrome和FF下隱藏默認樣式，顯示css自定義樣式，在ie下隱藏自定義樣式，顯示默認樣式。
<select name=""> <option value=""></option> </select>
select{ width: 100px; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url("drag.png"); background-position: right center; padding-right: 0 \9; background: none \9; }
3. 多行內元素垂直居中
（1）正常文檔流（2）脫離文檔流
在使用了table-cell之後，元素對寬高告訴敏感，無法設置寬高，寬高自動被撐開。若想設置寬高需要高增加float使其脫離文檔流。
<div class="box"> <div class="fl"> <span>標題</span> <img src="images/index-logo.png" alt=""> <img src="images/play.png" alt=""> </div> <div class="fr"> </div> </div> <div class="box2"> <span>標題</span> <img src="images/index-logo.png" alt=""> <span>標題</span> <img src="images/play.png" alt=""> </div>
*{padding: 0;margin: 0} .box{ width: 100%; overflow: hidden; background: #ff0; } .box:after{clear: both;} .fl,.fr{ width: 50%; float: left; height: 100px; display: table-cell; line-height: 100px; } .fl img{ vertical-align: middle; display: inline-block; } .box2{ clear: both; width: 100%; height:100px; float: left; background: #ccc; line-height: 100px; display: table-cell; } .box2 img{ vertical-align: middle; }
4.基於jqury的錨鏈接緩沖滾動
<div class="fix-nav"> <a>點擊nav1</a> <a>點擊nav2</a> </div> <div class="box1"> </div> <h2 id="nav1">nav1</h2> <div class="box1"> </div> <h2 id="nav2">nav2</h2> <div class="box1"> </div> <div class="box1"> </div> <div class="box1"> </div>
*{padding: 0;margin: 0;} .box1{ width: 100%; height:500px; background: #ff0; } .fix-nav{ position: fixed; width: 100%; height:60px; background: #ccc; } .fix-nav a{ background: #f00; display: inline-block; line-height: 60px; text-align: center; cursor: pointer; }
//需要引入jquery var jsonScroll={ "0":$("#nav1").offset().top-60, "1":$("#nav2").offset().top-60, }; console.log(jsonScroll) var scrollNav=$(".fix-nav a"); scrollNav.each(function(i,ele){ $(ele).attr("index",i); $(ele).click(function(){ $("html,body").animate({scrollTop:jsonScroll[$(this).attr("index")]},500,"swing"); }) })
5.調用百度地圖，添加標註
http://api.map.baidu.com/lbsapi/createmap/index.html
打開鏈接後獲取中心位置坐標，然後添加定位標註後獲取代碼，但標註的樣式總是不顯示，原因是百度地圖的樣式與我們寫的樣式沖突了，增加下面的CSS樣式即可
#map img { max-width: inherit; }
6.單行文本溢出隱藏並用省略號代替
<h2 class="title">標題內容標題內容標題內容標題內容標題內容標題內容標題內容標題內容</h2>
.title{ width: 200px; height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
7.多行文本溢出用省略號顯示
（1）只適用於chrome
<p class="des">段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內
容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內容段落內
容段落內容段落內容段落內容段落內容段落內容</p>
.des{
width: 500px;
height: 90px;
overflow: hidden;
line-height: 30px;
display:-webkit-box;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
}
(2)兼容高端瀏覽器
.des{ width: 500px; height: 90px; line-height: 30px; position: relative; overflow: hidden; } .des:after{ content:"..."; width: 20px; height: 30px; background: #fff; color: #000; z-index: 2; position: absolute; right: 0; bottom: 0; }
8.background-size需要在background-url之後才有效
9.background-size:cover 的兼容IE8 方案
$(".bg-filter").css({
"-webkit-background-size":"cover",
"-moz-background-size": "cover",
"-o-background-size": "cover",
"background-size": "cover",
///必須在此處指明背景圖片位置
"filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/index-item-bg3.jpg‘,sizingMethod=‘scale‘",
///必須在此處指明背景圖片位置
"-ms-filter":"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘images/index-item-bg3.jpg‘,sizingMethod=‘scale‘"
})
10.定位相對位置為padding-box
<div class="outer"> <div class="inner"> </div> </div>
.outer{ width: 100px; height: 100px; border: 10px solid #000; background: #ff0; position: relative; padding: 10px; } .inner{ width: 30px; height: 30px; background: #f00; position: absolute; top: 0; left: 0; }
前端頁面重構技巧總結TIP【持續更新...】