前端页面重构技巧总结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双击格式化按钮,可以开启连续应用格式刷模式,单击之后关闭,这样比快捷键好用多了,如下图
随机推荐
- 洛谷P3957 跳房子
普及组的题.....填坑来了. 当年的我一眼二分+DP,现在都佩服起自己来了...... 然后我们就写个二分,在check里面写单调队列优化DP即可. 然后就A了...... #include < ...
- 使用Sql语句快速将数据表转换成实体类
开发过程中经常需要根据数据表编写对应的实体类,下面是使用sql语句快速将数据表转换成对应实体类的代码,使用时只需要将第一行'TableName'引号里面的字母换成具体的表名称就行了: declare ...
- Go_22: Golang 命令行 test 应用
1. 测试某一个包下的所有测试用例 cd /myGoProject/src/go-test/utils go test -v "-v" 参数 go test -v ... 表示无论 ...
- disabled属性对form表单向后台传值的影响
在form表单里,如果对input加入disabled="disabled"或disabled="true"等属性,form表单提交的时候,就不会传值到后台. ...
- bzoj千题计划192：bzoj1569: [JSOI2008]Blue Mary的职员分配
http://www.lydsy.com/JudgeOnline/problem.php?id=1569 dp[i][j][a][b] 表示i个职员,发广告状态为j,已有金钱a,声誉b的最少天数 j= ...
- [转载]AngularJS之Factory vs Service vs Provider
http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider http://tylermcginnis.com/a ...
- J2EE完全手册（一）
为了使开发者能尽快的开发企业级的应用程序,Sun在1999年推出一种基于J2SE(用于开发桌面应的Java标准版)的开发模型:J2EE,用于开发服务器应用程序与服务的Java企业版,他运行于J2EE服 ...
- Linux - 用户操作
常用命令 users # 显示所有的登录用户 groups # 列出当前用户和他所属的组 who -q # 显示所有的登录用户 groupadd # 添加组 useradd user # 建立用户 p ...
- python3迭代器和生成器
1.手动访问迭代器中的元素 #要手动访问迭代器中的元素,可以使用next()函数 In [3]: with open('/etc/passwd') as f: ...: try: ...: while ...
- linux下usb转串口驱动分析【转】
转自:http://blog.csdn.net/txxm520/article/details/8934706 首先说一下linux的风格,个人理解 1. linux大小结构体其实是面向对象的方法,( ...