前端頁面重構技巧總結TIP【持續更新...】

本文均為項目實戰經驗，要求兼容至IE8，所以以下內容均為兼容代碼，歡迎各位小伙伴批評指教。其實重構頁面是一門學問，看似簡單，卻暗藏很多學問。實際項目中頁面的重構有以下幾點最基本需求：

1.需要使用合理的標簽進行語義化；

2.可擴展性，在頁面的某個標簽內增加新的內容（文字或標簽），不會對原有內容造成影響。

3.當頁面接受后台數據時，標簽內容替換后，頁面布局與樣式不會受到影響。

4.兼容性（根據項目需要）

 

頁面重構基本思想：

1.漸進增強思想（以兼容要求的最低版本為基礎，主鍵向高層次的瀏覽器靠攏）；例如：項目需要兼容至IE8的透明背景，則先需要使用透明背景圖片，在此基礎上再進行其他樣式的編寫。

2.優雅降級（在不影響頁面結構的情況下為低版本瀏覽器進行效果降級）

3.代碼重用思想；包括相同結構的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;
        }

11.字符間距在ps下的計算方法：

css字符間距（px）= ps字符間距/1000*font-size

12.兼容IE8的background-size

方法1：濾鏡

body {  
    background: url() no-repeat center;  
    -webkit-background-size: cover;  
    -moz-background-size: cover;  
    -o-background-size: cover;  
    background-size: cover;  
    filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='', sizingMethod='scale');  
    -ms-filter: progid: DXImageTransform.Microsoft.AlphaImageLoader( src='', sizingMethod='scale');  
}  

方法二：通過引入htc文件計算屏幕尺寸控制img標簽尺寸，模擬background-size:cover;效果

you can use this file (https://github.com/louisremi/background-size-polyfill “background-size polyfill”) for IE8 that is really simple to use:  
  
.selector {  
background-size: cover;  
-ms-behavior: url(/backgroundsize.min.htc);  
}  

13 純CSS的 自適應設備的全屏顯示　　

		.box{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background: #ff0;
		}

　　

	<div class="box">
		
	</div>

14.圖片祛色（黑白）

img{
     -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -ms-filter: grayscale(0);
    -o-filter: grayscale(0);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
img:hover{
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -o-filter: grayscale(1);
}

15.box-shadow偽3D效果

	<div class="box">
	盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容盒子內容
	</div>

　　

.box{
	width: 300px;
	height: 300px;
	cursor: pointer;
	-webkit-transition: transform linear 0.2s,box-shadow linear 0.2s;
	-moz-transition: transform linear 0.2s,box-shadow linear 0.2s;
	-ms-transition: transform linear 0.2s,box-shadow linear 0.2s;
	-o-transition: transform linear 0.2s,box-shadow linear 0.2s;
	transition: transform linear 0.2s,box-shadow linear 0.2s;
}
.box:hover{
	-webkit-box-shadow: 0 15px 30px rgba(0,0,0,0.1);
	box-shadow: 0 15px 30px rgba(0,0,0,0.1);
	-webkit-transform: translateY(-3px);
	-moz-transform: translateY(-3px);
	-ms-transform: translateY(-3px);
	-o-transform: translateY(-3px);
	transform: translateY(-3px);
}		

16.　樹圖結構

可無限擴展

　

　　

<div class="tree-box">
	<div class="tree">
		<ul>
			<li class="text-c first-fork">
				<a href="#" class="dot">
					<div class="name">
						mayun
					</div>
					<div class="vip">
						VIP1
					</div>
				</a>
				<ul class="fork">
					<li class="fork-l fork-b" style="width: 50%;float:left;">
							<a href="#" class="dot">
								<div class="name">
									mayun
								</div>
								<div class="vip">
									VIP1
								</div>
							</a>
							<ul class="fork">
								<li class="fork-l fork-b" style="width: 50%;float:left;">
									<a href="#" class="dot">
										<div class="name">
											mayun
										</div>
										<div class="vip">
											VIP1
										</div>
									</a>
									<ul class="fork">
										<li class="fork-l fork-b" style="width: 50%;float:left;">
											<a href="#" class="dot">
												<div class="name">
													mayun
												</div>
												<div class="vip">
													VIP1
												</div>
											</a>

										</li>
										<li class="fork-r fork-b" style="width: 50%;float:left;">
											<a href="#" class="dot">
												<div class="name">
													mayun
												</div>
												<div class="vip">
													VIP1
												</div>
											</a>

										</li>					
									</ul>
								</li>
								<li class="fork-r fork-b" style="width: 50%;float:left;">
									<a href="#" class="dot">
										<div class="name">
											mayun
										</div>
										<div class="vip">
											VIP1
										</div>
									</a>
									<ul class="fork">
										<li class="fork-l fork-b" style="width: 50%;float:left;">
											<a href="#" class="dot">
												<div class="name">
													mayun
												</div>
												<div class="vip">
													VIP1
												</div>
											</a>

										</li>
										<li class="fork-r fork-b" style="width: 50%;float:left;">
											<a href="#" class="dot">
												<div class="name">
													mayun
												</div>
												<div class="vip">
													VIP1
												</div>
											</a>

										</li>					
									</ul>
								</li>					
							</ul>
					</li>





					<li class="fork-r fork-b" style="width: 50%;float:left;">
							<a href="#" class="dot">
								<div class="name">
									mayun
								</div>
								<div class="vip">
									VIP1
								</div>
							</a>
							<ul class="fork">
								<li class="fork-l fork-b" style="width: 50%;float:left;">
									<a href="#" class="dot">
										<div class="name">
											mayun
										</div>
										<div class="vip">
											VIP1
										</div>
									</a>
									<ul class="fork">
										<li class="fork-l fork-b" style="width: 50%;float:left;">
											<a href="#" class="dot">
												<div class="name">
													mayun
												</div>
												<div class="vip">
													VIP1
												</div>
											</a>

										</li>
										<li class="fork-r fork-b" style="width: 50%;float:left;">
											<a href="#" class="dot">
												<div class="name">
													mayun
												</div>
												<div class="vip">
													VIP1
												</div>
											</a>

										</li>					
									</ul>
								</li>
								<li class="fork-r fork-b" style="width: 50%;float:left;">
									<a href="#" class="dot">
										<div class="name">
											mayun
										</div>
										<div class="vip">
											VIP1
										</div>
									</a>
									<ul class="fork">
										<li class="fork-l fork-b" style="width: 50%;float:left;">
											<a href="#" class="dot">
												<div class="name">
													mayun
												</div>
												<div class="vip">
													VIP1
												</div>
											</a>
										</li>
										<li class="fork-r fork-b" style="width: 50%;float:left;">
											<a href="#" class="dot">
												<div class="name">
													mayun
												</div>
												<div class="vip">
													VIP1
												</div>
											</a>

										</li>					
									</ul>
								</li>					
							</ul>
					</li>					
				</ul>
			</li>
		</ul>
	</div>
</div>

*{
　　　　padding:0;
　　　　margin:0;
}
.vip-type  li{
	width: 33.33%;
	float: left;
}
.vip-type ul{
	overflow:hidden;
}
.vip-chos{
	width: 100%;
	height: 100%;
	border: 2px solid #ccc;
	border-radius: 5px;
	text-align: center;
	color: #1b82d1;
}
.now-vip{
	border: 2px solid #1b82d1;
}
.dot{
	color: #fff;
	display: inline-block;
}
.tree{
	width: 100%;
	height: 20px;
	position: relative;
	text-align: center;
}
.tree ul{
	padding-top: 30px;
	position: relative;
}
.tree li{
	padding-top: 30px;
}
.fork{
	width: 100%；
}
.tree .fork:before{
	content: "";
	width: 0;
	height: 30px;
	position: absolute;
	top: 0;
	left: 50%;
	border-left: 1px solid #959595;
}
.fork-b{
	position: relative;

}
.fork-l:after{
	content: "";
	width: 50%;
	height: 30px;
	top: 0;
	left: 50%;
	position: absolute;
	border-top: 1px solid #959595;
	border-left: 1px solid #959595;
}
.fork-r:before{
	content: "";
	width: 50%;
	height: 30px;
	top: 0;
	position: absolute;
	right: 50%;
	border-top: 1px solid #959595;
	border-right: 1px solid #959595;
}
.vip{
	background: #7bb0dc;
}
.name{
	background: #1b82d1;
}	

17.overflow-y:auto帶來的寬度問題

我們都了解，可以通過使用overflow-y:auto的方式使垂直方向的內容溢出后通過滾動條顯示，但隨之而來的問題是增加滾動條后盒子的寬度也會隨之增加，因此可能會對布局產生影響，對此需要增加 overflow-x:hidden;便可將滾動條寬度包含在盒子的寬度之內。　　

18. 背景漸變的IE兼容處理

需要注意的是css順序不可改變，顏色為十六進制　　

.bg{
    width: 200px;
    height: 300px;
    background: #fff000;
    background:-moz-linear-gradient(top,#fff000,#ff0000);  
    background:-webkit-linear-gradient(top, #fff000, #ff0000);  
    background:-ms-linear-gradient(top,#fff000,#ff0000); 
    background:linear-gradient(top,#fff000, #ff0000); 
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fff000,endColorstr=#ff0000)";
}

19. 兼容IE下的 ico圖標引入

	<link rel="Shortcut Icon" type="image/x-icon" href="images/favor.ico">

20.純CSS選項卡

　　

　

<div class="bar">
	<div class="tab-nav">
		<span>首頁</span>
		<div class="tab-box">
			
		</div>
	</div>
	<div class="tab-nav">
		<span>首頁</span>
		<div class="tab-box">
			
		</div>
	</div>
	<div class="tab-nav">
		<span>新聞</span>
		<div class="tab-box">
			
		</div>
	</div>
	<div class="tab-nav">
		<span>案例</span>
		<div class="tab-box">
			
		</div>
	</div>
</div>	

　

		.bar{
			background: #f2f2f2;
			height: 46px;
			line-height: 46px;
			border: 1px solid #c0c0c0;
		}
		.bar:after{
			content: ""
			clear:both;
		}
		.tab-nav{
			height: 46px;
			position: relative;
			float: left;
			width: 180px;
		}
		.tab-nav:hover .tab-box{
			display: block;
			z-index: -1;
		}
		.tab-nav span{
			position: absolute;
			display: block;
			width: 100%;
			height: 46px;
			top: 0;
			left: 0;
			box-sizing: content-box;
			/*padding: 0 15px;*/
			position: relative;
			text-align: center;
		}
		.tab-nav:hover span{
			margin-left: -1px;
			border-right: 1px solid #c0c0c0;
			border-left: 1px solid #c0c0c0;
			border-bottom: 1px solid #f2f2f2;
		}
		.tab-nav:hover{
			z-index: 10;
		}
		.tab-box{
			width: 600px;
			height: 400px;
			background: #f2f2f2;
			border: 1px solid #c0c0c0;
			position: absolute;
			z-index: 5;
			top: 46px;
			left: -1px;
			display: none;
		}

20.單行顯示

  word-break:keep-all;
  white-space: nowrap;