前端页面重构技巧总结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:;margin:;}
.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="data:images/index-logo.png" alt="">
<img src="data:images/play.png" alt="">
</div>
<div class="fr"> </div>
</div>
<div class="box2">
<span>标题</span>
<img src="data:images/index-logo.png" alt="">
<span>标题</span>
<img src="data:images/play.png" alt="">
</div>
*{padding:;margin:}
.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:;margin:;}
.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:;
position: absolute;
right:;
bottom:;
}
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:;
left:;
}
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;
前端页面重构技巧总结TIP【持续更新...】的更多相关文章
- 前端开发中的一些tips(持续更新)
本文记录分享一些在日常开发中经常遇到的一些问题的解决方案及常用小技巧,如有错误之处还请批评指正.CSS相关:1.如何修改chrome记住密码后自动填充表单的黄色背景? input:-webkit-au ...
- iOS开发调试技巧总结（持续更新中）
作者:乞力马扎罗的雪 原文 对于软件开发而言,调试是必须学会的技能,重要性不言而喻.对于调试的技能,基本上是可以迁移的,也就是说你以前在其他平台上掌握的很多调试技巧,很多也是可以用在iOS开发中.不 ...
- Windows 操作小技巧 之一（持续更新）
1.图片批量旋转 通常携带单反去景点排了大量照片回来处理图片时都会遇到很多横竖杂乱排序的图片难以处理的情形.现提供如下技巧进行处理. 1).在文件夹中添加"方向"的排列或分组选项: ...
- Vue技巧小结（持续更新）
1. 动态生成的input自动focus 背景: input元素在需要时才插入DOM,这时元素用autofocus属性第一次是可以获取焦点,但是如果有第二个,就不再生效,所以得另外的办法. 方法: / ...
- Excel小技巧整理（持续更新）
合并某列中相同单元格 参考https://jingyan.baidu.com/article/9158e00006db70a25512286f.html 使用方法 先给需要合并的列排序,这样相同数据会 ...
- MySQL使用技巧收集，持续更新中......
1.查询时按某一内容为中文的字段,以拼音字母排序: SELECT * FROM game ORDER BY CONVERT(name USING GBK);
- iOS开发常用小技巧记录（持续更新）
以下问题都是自己在项目中遇到的,解决问题的方法肯定有多种,我所列举的不一定就是最好的解决办法.如有问题欢迎大家指正,补充,交流. 解决同时按两个按钮进两个view的问题.[button setExcl ...
- Idea中快捷键与小技巧的总结-->持续更新
1.Scala类或单例对象中快速声明实例对象: eg. new SparkContext(conf).var 系统会自动提示,可以自动补全,如图: 2.ctrl+i与ctrl+o的区别: ctrl + ...
- ExCEL操作技巧集锦，持续更新
1.格式刷 word里面格式化的快捷键很好用,但是excel里面的快捷键用不了,经百度得知: excel双击格式化按钮,可以开启连续应用格式刷模式,单击之后关闭,这样比快捷键好用多了,如下图
随机推荐
- Zabbix应用八:Zabbix监控MongoDB
利用Zabbix监控MongoDB 一.首先介绍mongodb采集到的数据含义: 1.状态采集命令: >db.serverStatus(); 2.输出内容: { "host" ...
- Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗
Hadoop生态圈-Azkaban实现文件上传到hdfs并执行MR数据清洗 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如果你没有Hadoop集群的话也没有关系,我这里给出当时我 ...
- UnicodeDecodeError gbk codec can't decode byte in position illegal multibyte sequence
UnicodeDecodeError:'gbk' codec can't decode byte in position : illegal multibyte sequence 觉得有用的话,欢迎一 ...
- 解决linux mysql命令 bash: mysql: command not found 的方法
错误: root@DB-02 ~]# mysql -u root-bash: mysql: command not found 原因:这是由于系统默认会查找/usr/bin下的命令,如果这个命令不在这 ...
- 也谈创业企业CEO该拿多少工资
网上看到一篇文章,关于创业公司CEO要给自己开多少工资. 当然,原文中的一些创业公司例子都过于高大上,譬如一创业就拿到A轮B轮的融资.对于这样的案例我想说的是:“太脱离人民大众创业者”. 纵观我国的I ...
- C++的Enum hack
从一个例子开始吧 class Game { private: static const int GameTurn = 10; int scores[GameTurn]; }; 对于支持类内初始化的C+ ...
- 【NOI】2017 整数（BZOJ 4942，LOJ2302） 压位+线段树
[题目]#2302. 「NOI2017」整数 [题意]有一个整数x,一开始为0.n次操作,加上a*2^b,或询问2^k位是0或1.\(n \leq 10^6,|a| \leq 10^9,0 \leq ...
- Codeforces 238 div2 A. Gravity Flip
题目链接:http://codeforces.com/contest/405/problem/A 解题报告:有n列箱子竖直放置,每列箱子上都有数量不等的箱子,这些箱子之间没有固定,当重力方向改为平行向 ...
- requests(二): json请求中固定键名顺序&消除键和值之间的空格
继上一篇requests发送json请求的文章后,实际工作中遇到了以下2种情况. 1:服务端要求json字符串,键名的顺序固定 2.服务端对于接收到的json数据中,若key和value之间有空格, ...
- Java Service Wrapper将java程序设置为服务
有时候我们希望我们java写的程序作为服务注册到系统中,Java Service Wrapper(下面简称wrapper)是目前较为流行的将Java程序部署成Windows服务的解决方案, 本文将讨论 ...