2023年6月21日发(作者：)

前端页⾯重构技巧总结TIP【持续更新...】本⽂均为项⽬实战经验，要求兼容⾄IE8，所以以下内容均为兼容代码，欢迎各位⼩伙伴批评指教。其实重构页⾯是⼀门学问，看似简单，却暗藏很多学问。实际项⽬中页⾯的重构有以下⼏点最基本需求：1.需要使⽤合理的标签进⾏语义化；2.可扩展性，在页⾯的某个标签内增加新的内容（⽂字或标签），不会对原有内容造成影响。3.当页⾯接受后台数据时，标签内容替换后，页⾯布局与样式不会受到影响。4.兼容性（根据项⽬需要）

页⾯重构基本思想：1.渐进增强思想（以兼容要求的最低版本为基础，主键向⾼层次的浏览器靠拢）；例如：项⽬需要兼容⾄IE8的透明背景，则先需要使⽤透明背景图⽚，在此基础上再进⾏其他样式的编写。2.优雅降级（在不影响页⾯结构的情况下为低版本浏览器进⾏效果降级）3.代码重⽤思想；包括相同结构的DOM结构和公⽤的CSS样式

技巧汇总统⼀样式，列表居中如下如中间内容区为1200px;但要确保每个li的样式是统⼀的，这样既⽅便后台程序进⾏循环，样式也不会乱；若⽆需做兼容则使⽤：first-child选择器就能实现，做兼容兼容时需要使ul外再套⼀层盒⼦做居中，⽽实际上ul是没有剧中的（ul宽度⼤于ul的外层盒⼦）应⽤公式为（5列） 4 * margin-right + 5 * li的width=1200 ul的宽度为 1200 + margin-right代码如下：

*{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; }效果如下：样式美化与兼容⽬前纯css样式实现select的所有浏览器样式⼀直是⽆法实现的，最后换了⼀下思路，⼤胆使⽤了属性hack；在chrome和FF下隐藏默认样式，显⽰css⾃定义样式，在ie下隐藏⾃定义样式，显⽰默认样式。　　select{ width: 100px; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url(""); background-position: right center; padding-right: 0 9; background: none 9;

}3. 多⾏内元素垂直居中（1）正常⽂档流（2）脱离⽂档流在使⽤了table-cell之后，元素对宽⾼告诉敏感，⽆法设置宽⾼，宽⾼⾃动被撑开。若想设置宽⾼需要⾼增加float使其脱离⽂档流。

标题

标题 标题
*{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的锚链接缓冲滚动
点击nav1 点击nav2

*{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, }; (jsonScroll) var scrollNav=$(".fix-nav a"); (function(i,ele){ $(ele).attr("index",i); $(ele).click(function(){ $("html,body").animate({scrollTop:jsonScroll[$(this).attr("index")]},500,"swing"); }) })5.调⽤百度地图，添加标注/lbsapi/createmap/打开链接后获取中⼼位置坐标，然后添加定位标注后获取代码，但标注的样式总是不显⽰，原因是百度地图的样式与我们写的样式冲突了，增加下⾯的CSS样式即可#map img { max-width: inherit;}6.单⾏⽂本溢出隐藏并⽤省略号代替

标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容

.title{ width: 200px; height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }7.多⾏⽂本溢出⽤省略号显⽰（1）只适⽤于chrome

段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内　　容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内　　容段落内容段落内容段落内容段落内容段落内容

.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; }ound-size需要在background-url之后才有效ound-size:cover 的兼容IE8 ⽅案 $(".bg-filter").css({ "-webkit-background-size":"cover",

"-moz-background-size": "cover",

"-o-background-size": "cover",

"background-size": "cover",

///必须在此处指明背景图⽚位置"filter":"progid:mageLoader(src='images/',sizingMethod='scale'",

///必须在此处指明背景图⽚位置 "-ms-filter":"progid:mageLoader(src='images/',sizingMethod='scale'" })10.定位相对位置为padding-box

.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-size12.兼容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: mageLoader( src='', sizingMethod='scale');

-ms-filter: progid: mageLoader( src='', sizingMethod='scale');

}

⽅法⼆：通过引⼊htc⽂件计算屏幕尺⼨控制img标签尺⼨，模拟background-size:cover;效果you can use this file (/louisremi/background-size-polyfill “background-size polyfill”) for IE8 that is really simple to use:

.selector {

background-size: cover;

-ms-behavior: url(/);

}

13 纯CSS的 ⾃适应设备的全屏显⽰　　 .box{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #ff0; }　　

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);}-shadow伪3D效果
盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒
　　.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.　树图结构可⽆限扩展　　　

*{　　　　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;}

ow-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:nt(GradientType=0,startColorstr=#fff000,endColorstr=#ff0000)";}19. 兼容IE下的 ico图标引⼊ 20.纯CSS选项卡　　　

⾸页

⾸页

新闻

案例

　 .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;　　　　　　

2023年6月21日发(作者：)

前端页⾯重构技巧总结TIP【持续更新...】本⽂均为项⽬实战经验，要求兼容⾄IE8，所以以下内容均为兼容代码，欢迎各位⼩伙伴批评指教。其实重构页⾯是⼀门学问，看似简单，却暗藏很多学问。实际项⽬中页⾯的重构有以下⼏点最基本需求：1.需要使⽤合理的标签进⾏语义化；2.可扩展性，在页⾯的某个标签内增加新的内容（⽂字或标签），不会对原有内容造成影响。3.当页⾯接受后台数据时，标签内容替换后，页⾯布局与样式不会受到影响。4.兼容性（根据项⽬需要）

页⾯重构基本思想：1.渐进增强思想（以兼容要求的最低版本为基础，主键向⾼层次的浏览器靠拢）；例如：项⽬需要兼容⾄IE8的透明背景，则先需要使⽤透明背景图⽚，在此基础上再进⾏其他样式的编写。2.优雅降级（在不影响页⾯结构的情况下为低版本浏览器进⾏效果降级）3.代码重⽤思想；包括相同结构的DOM结构和公⽤的CSS样式

技巧汇总统⼀样式，列表居中如下如中间内容区为1200px;但要确保每个li的样式是统⼀的，这样既⽅便后台程序进⾏循环，样式也不会乱；若⽆需做兼容则使⽤：first-child选择器就能实现，做兼容兼容时需要使ul外再套⼀层盒⼦做居中，⽽实际上ul是没有剧中的（ul宽度⼤于ul的外层盒⼦）应⽤公式为（5列） 4 * margin-right + 5 * li的width=1200 ul的宽度为 1200 + margin-right代码如下：

*{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; }效果如下：样式美化与兼容⽬前纯css样式实现select的所有浏览器样式⼀直是⽆法实现的，最后换了⼀下思路，⼤胆使⽤了属性hack；在chrome和FF下隐藏默认样式，显⽰css⾃定义样式，在ie下隐藏⾃定义样式，显⽰默认样式。　　select{ width: 100px; appearance: none; -moz-appearance: none; -webkit-appearance: none; background: url(""); background-position: right center; padding-right: 0 9; background: none 9;

}3. 多⾏内元素垂直居中（1）正常⽂档流（2）脱离⽂档流在使⽤了table-cell之后，元素对宽⾼告诉敏感，⽆法设置宽⾼，宽⾼⾃动被撑开。若想设置宽⾼需要⾼增加float使其脱离⽂档流。

标题

标题 标题
*{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的锚链接缓冲滚动
点击nav1 点击nav2

*{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, }; (jsonScroll) var scrollNav=$(".fix-nav a"); (function(i,ele){ $(ele).attr("index",i); $(ele).click(function(){ $("html,body").animate({scrollTop:jsonScroll[$(this).attr("index")]},500,"swing"); }) })5.调⽤百度地图，添加标注/lbsapi/createmap/打开链接后获取中⼼位置坐标，然后添加定位标注后获取代码，但标注的样式总是不显⽰，原因是百度地图的样式与我们写的样式冲突了，增加下⾯的CSS样式即可#map img { max-width: inherit;}6.单⾏⽂本溢出隐藏并⽤省略号代替

标题内容标题内容标题内容标题内容标题内容标题内容标题内容标题内容

.title{ width: 200px; height: 30px; line-height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }7.多⾏⽂本溢出⽤省略号显⽰（1）只适⽤于chrome

段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内　　容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内　　容段落内容段落内容段落内容段落内容段落内容

.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; }ound-size需要在background-url之后才有效ound-size:cover 的兼容IE8 ⽅案 $(".bg-filter").css({ "-webkit-background-size":"cover",

"-moz-background-size": "cover",

"-o-background-size": "cover",

"background-size": "cover",

///必须在此处指明背景图⽚位置"filter":"progid:mageLoader(src='images/',sizingMethod='scale'",

///必须在此处指明背景图⽚位置 "-ms-filter":"progid:mageLoader(src='images/',sizingMethod='scale'" })10.定位相对位置为padding-box

.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-size12.兼容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: mageLoader( src='', sizingMethod='scale');

-ms-filter: progid: mageLoader( src='', sizingMethod='scale');

}

⽅法⼆：通过引⼊htc⽂件计算屏幕尺⼨控制img标签尺⼨，模拟background-size:cover;效果you can use this file (/louisremi/background-size-polyfill “background-size polyfill”) for IE8 that is really simple to use:

.selector {

background-size: cover;

-ms-behavior: url(/);

}

13 纯CSS的 ⾃适应设备的全屏显⽰　　 .box{ width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #ff0; }　　

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);}-shadow伪3D效果
盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒⼦内容盒
　　.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.　树图结构可⽆限扩展　　　

*{　　　　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;}

ow-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:nt(GradientType=0,startColorstr=#fff000,endColorstr=#ff0000)";}19. 兼容IE下的 ico图标引⼊ 20.纯CSS选项卡　　　

⾸页

⾸页

新闻

案例

　 .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;