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

时间: 2024-10-12 01:15:54

前端页面重构技巧总结TIP【持续更新...】的相关文章

前端页面优化技巧

1.首先说说浏览器的加载流程: (1) 用户在地址栏中打开一个URL,浏览器首先会寻找该URL所在服务器,通过DNS服务器查询浏览器会获 得该URL所在网站的IP地址,然后向该地址发起请求,连接到服务器: (2) 建立连接后,向服务器发送http请求,请求对应的HTML文档: (3) 解析HTML文档,目的是知道该页面需要哪些资源以及生成DOM树:生成DOM树和获取到相应需要的 资源文件同时进行:解析HTML文档时,一旦发现一个标签,就会根据标签的要求分配对指定的资源进行下载,当DOM树生成后,

在页面切换时使用RxJava持续更新UI界面

欢迎Follow我的GitHub, 关注我的CSDN. 在应用开发中, 我们需要使用后台任务更新前台界面, 不因页面切换而导致重新开始, 或因某些任务阻塞界面刷新, 比如显示下载或播放进度等. 为了追求更优质的用户体验, 需要大量使用后台任务, 常见的就是异步任务(AsyncTask)和后台服务(Service), 当然还有RxJava. 我写了一个示例, 来讲讲如何使用这些常用的后台方式. 主要 (1) 使用异步任务和后台服务更新页面, 避免内存泄露. (2) 使用RxJava的时间间隔\延迟

iOS开发调试技巧总结(持续更新中)

作者:乞力马扎罗的雪  原文 对于软件开发而言,调试是必须学会的技能,重要性不言而喻.对于调试的技能,基本上是可以迁移的,也就是说你以前在其他平台上掌握的很多调试技巧,很多也是可以用在iOS开发中.不同语言.不同IDE.不同平台的调试,有同性也有个性.今天我们就来学习一下iOS开发中的调试技巧,语言暂用为OC,IDE当然是强大的Xcode.首先说明下,Xcode已经为我们调试项目提供了极大的方便. [1.普通断点] 断点(Breakpoint)绝对是调试程序的第一大选择,也是掌握的基础技能.顾名

Windows 操作小技巧 之一(持续更新)

1.图片批量旋转 通常携带单反去景点排了大量照片回来处理图片时都会遇到很多横竖杂乱排序的图片难以处理的情形.现提供如下技巧进行处理. 1).在文件夹中添加“方向”的排列或分组选项: 2).选择需要进行旋转的全部图片进行批量顺时针旋转或逆时针旋转(取决于图片方向)

重构函数基本原则(持续更新)

1.  重构函数时一定要查清有哪些类调用了该函数 修改函数之前要明白函数每一段代码的作用再做修改(所以体积小的函数好改啊),我就遇到过这样的问题,修改函数内部有某个常量,但是该常量对于另外一个调用该函数的类来说是错误的. 之后师傅把该 常量 的设置转移到了接口里面(接口实现作为调用者的内部类,所以会根据调用者的不同而变化),才避免了不同调用冲突的问题.

RedHat / Centos &nbsp; Linux 系统运维与管理实践技巧荟萃,持续更新

RedHat / Centos   Linux  系统运维与管理实践技巧荟萃

web后端学习过程中技巧总结(持续更新。。。)

1.当鼠标经过单元格的时候,想让鼠标的变成"小手手势",使其中的文字变成红色(或其他颜色) 可以使用CSS样式对表格单元格进行设计:          <!--使用css样式来控制当鼠标放在单元格之上的时候,鼠标变成小手,单元格文字变成红色--> <style type="text/css"> td{ cursor:pointer; } td:hover{ color: red; } </style>

前端页面重构切图优化

定义 CSS: 初始化样式: 公共样式: 切图方式:打开PSD文件,点击选择按钮,选中自动选择,下拉选择图层,然后点击要选择的图层(特殊的转换为智能对象),然后用虚线框选出来,复制粘贴到一个空白文件. 点击直接拨号<a href="tel:123-456789">123-456789</a>

移动前端页面制作技巧

一. http://www.webank.com/mobile/index.html http://qzs.qq.com/qzone/qzact/act/qzapp/qzone5.0/mobile/index.html?g_f=5758&srctype=62&ticket= http://cyyis.me/