前端页面重构技巧总结TIP

墨蓝 2021-07-04 19:03 506阅读 0赞

本文均为项目实战经验，要求兼容至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`  
![在这里插入图片描述][20191115090459448.png]  
代码如下：

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

效果如下：  
![在这里插入图片描述][20191115090518149.png]

### 2.`select`样式美化与兼容 ###

目前纯`css`样式实现`select`的所有浏览器样式一直是无法实现的，最后换了一下思路，大胆使用了属性`hack`；

在chrome和FF下隐藏默认样式，显示`css`自定义样式，在ie下隐藏自定义样式，显示默认样式。

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使其脱离文档流。

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

![在这里插入图片描述][20191115091819268.png]

## 4.基于`jquery`的锚链接缓冲滚动 ##

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

![在这里插入图片描述][2019111509083154.png]

### 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;
            }

![在这里插入图片描述][20191115091853499.png]

### 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` ###

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

![在这里插入图片描述][20191115090946126.png]

### 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;
    }

### 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.树图结构 ###

**可无限扩展**  
![在这里插入图片描述][20191115091934336.png]

<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图标引入 ###

### 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;
    }

### 21.单行显示 ###

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

[20191115090459448.png]: /images/20210704/ee0b92fb4c6e4ca8a46505eb073d2921.png
[20191115090518149.png]: /images/20210704/97c3860a311a4a81ac80ab4a0229ebd4.png
[20191115091819268.png]: /images/20210704/1425ede0f5764501b5ed455aff5ccef0.png
[2019111509083154.png]: /images/20210704/9b7da0f0f7094506ac01759ae18497d9.png
[20191115091853499.png]: /images/20210704/e914b5b5b9134f5daec3bd88e73b31eb.png
[20191115090946126.png]: /images/20210704/450c00e0345147cfb2879eee00ab9e9f.png
[20191115091934336.png]: /images/20210704/b2e801b35a8e42a0bd4575b42933c7f1.png