前端页面重构技巧总结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;
