api日常总结：前端常用js函数和CSS常用技巧

最新推荐文章于 2024-05-30 08:59:32 发布

???Sir

最新推荐文章于 2024-05-30 08:59:32 发布

阅读量103

点赞数

文章标签：前端 git json ViewUI

我的移动端media

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}} @media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}} @media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}} @media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}} @media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}} @media screen and (min-width:800px){html{font-size:25px}}

forEach()与map()方法

一个数组组成最大的数：

对localStorage的封装，使用更简单

//在get时，如果是JSON格式，那么将其转换为JSON，而不是字符串。以下是基础代码：
var Store = {
    get: function(key) {         var value = localStorage.getItem(key);         if (value) {             try {                 var value_json = JSON.parse(value);                 if (typeof value_json === 'object') {                     return value_json;                 } else if (typeof value_json === 'number') {                     return value_json;                 }             } catch(e) {                 return value;             }         } else {             return false;         }     },     set: function(key, value) {         localStorage.setItem(key, value);     },     remove: function(key) {         localStorage.removeItem(key);     },     clear: function() {         localStorage.clear();     } };

在此基础之上，可以扩展很多方法，比如批量保存或删除一些数据：
// 批量保存，data是一个字典
Store.setList = function(data) {
    for (var i in data) {         localStorage.setItem(i, data[i]);     } }; // 批量删除，list是一个数组 Store.removeList = function(list) {     for (var i = 0, len = list.length; i < len; i++) {         localStorage.removeItem(list[i]);     } };

js判断滚动条是否到底部：

<!DOCTYPE html>
<html>

	<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src=""></script> <style type="text/css"> * { padding: 0px; margin: 0px; } #main { width: 100%; height: 2000px; background: pink; } </style> <script type="text/javascript"> $(window).scroll(function() {　　 var scrollTop = $(this).scrollTop();　　 var docHeight = $(document).height();　　 var windowHeight = $(this).height(); var scrollHeight=document.body.scrollHeight; console.log("scrollTop:"+scrollTop); console.log("scrollbottom:"+(docHeight-scrollTop-windowHeight)); if(scrollTop + windowHeight == docHeight) {　　　　 alert("已经到最底部了！");　　 } }); </script> </head> <body> <div id="main"></div> </body> </html>

js操作cookie

JS设置cookie:
 
假设在A页面中要保存变量username的值("jack")到cookie中,key值为name，则相应的JS代码为： 

document.cookie="name="+username;  

JS读取cookie:
 
假设cookie中存储的内容为：name=jack;password=123
 
则在B页面中获取变量username的值的JS代码如下：

var username=document.cookie.split(";")[0].split("=")[1];   //JS操作cookies方法!  //写cookies  function setCookie(name,value)  {      var Days = 30;      var exp = new Date();      exp.setTime(exp.getTime() + Days*24*60*60*1000);      document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();  }  //读取cookies  function getCookie(name)  {      var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");       if(arr=document.cookie.match(reg))           return unescape(arr[2]);      else          return null;  }  //删除cookies  function delCookie(name)  {      var exp = new Date();      exp.setTime(exp.getTime() - 1);      var cval=getCookie(name);      if(cval!=null)          document.cookie= name + "="+cval+";expires="+exp.toGMTString();  }  //使用示例  setCookie("name","hayden");  alert(getCookie("name"));  //如果需要设定自定义过期时间  //那么把上面的setCookie　函数换成下面两个函数就ok;  //程序代码  function setCookie(name,value,time) {      var strsec = getsec(time);      var exp = new Date();      exp.setTime(exp.getTime() + strsec*1);      document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();  }  function getsec(str) {     alert(str);     var str1=str.substring(1,str.length)*1;     var str2=str.substring(0,1);     if (str2=="s")    {          return str1*1000;     }    else if (str2=="h")    {         return str1*60*60*1000;     }    else if (str2=="d")    {         return str1*24*60*60*1000;     }  }  //这是有设定过期时间的使用示例：  //s20是代表20秒  //h是指小时，如12小时则是：h12  //d是天数，30天则：d30  setCookie("name","hayden","s20"); /***************************************/ function getCookie(name){         if(name){             var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");             if(arr=document.cookie.match(reg))                 return (decodeURIComponent(arr[2]));             else                 return null;         }         return null;     }; function setCookie(name,value,Days){         if(!Days)Days=3000;         var exp = new Date();         exp.setTime(exp.getTime() + Days*24*60*60*1000000);         document.cookie = name + "="+ encodeURIComponent(value) + ";domain=weshare.com.cn;expires=" + exp.toGMTString() + ";path=/";     };

获取URL参数：

 function GetURLlist(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");                 var r = window.location.search.substr(1).match(reg);                 if(r != null) return unescape(r[2]);                 return null;             };

IOS和安卓判断：

var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if(isAndroid){ $(".down0").css('display','none') }else if(isiOS){ $(".down").css('display','none') } else{ return false; }

判断微信：

function isWeiXin(){
                var ua = window.navigator.userAgent.toLowerCase();                 if(ua.match(/MicroMessenger/i) == 'micromessenger'){                     return true;                 }else{                     return false;                 }             }

var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1|| u.indexOf('MI') > -1|| <br>u.indexOf('XiaoMi') > -1; //android终端或者uc，小米等奇葩浏览器  if(!isAndroid) {}  if(isAndroid) {}

判断页面滚动方向：

<script type="text/javascript"> $(function() { function scroll(fn) { var beforeScrollTop = document.body.scrollTop, fn = fn || function() {}; window.addEventListener("scroll", function() { var afterScrollTop = document.body.scrollTop, delta = afterScrollTop - beforeScrollTop; if(delta === 0) return false; fn(delta > 0 ? "down" : "up"); beforeScrollTop = afterScrollTop; }, false); } scroll(function(direction) { if(direction == "down") { console.log("向下滚"); } else { console.log("向上滚"); } }); }); </script>

 <script type="text/javascript">         var windowHeight = $(window).height();         $("body").css("height", windowHeight);         var startX, startY, moveEndX, moveEndY, X, Y;         $("body").on("touchstart", function(e) {             e.preventDefault();             startX = e.originalEvent.changedTouches[0].pageX, startY = e.originalEvent.changedTouches[0].pageY;         });         $("body").on("touchmove", function(e) {             e.preventDefault();             moveEndX = e.originalEvent.changedTouches[0].pageX, moveEndY = e.originalEvent.changedTouches[0].pageY, X = moveEndX - startX, Y = moveEndY - startY;             if (Math.abs(X) > Math.abs(Y) && X > 0) {                 alert("left to right");             } else if (Math.abs(X) > Math.abs(Y) && X < 0) {                 alert("right to left");             } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {                 alert("top to bottom");             } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {                 alert("bottom to top");             } else {                 alert("just touch");             }         });     </script>

排序

<script type="text/javascript"> var a = [1, 18, 23, 9, 16, 10, 29, 17]; var t = 0; for(var i = 0; i < a.length; i++) { for(var j = i + 1; j < a.length; j++) { if(a[i] > a[j]) { t = a[i]; a[i] = a[j]; a[j] = t; } } } console.log(a); //[1, 9, 10, 16, 17, 18, 23, 29] </script>

倒计时：

 <!Doctype html>
<html>
    <head> <meta charset="utf-8"> <title>下班倒计时</title> <style> * { margin: 0; padding: 0; } body { font-size: 16px; text-align: center; font-family: arial; } .time { margin-top: 10px; border: 1px solid red; height: 30px; padding: 2px; line-height: 30px; } </style> </head> <body> <div class="time"> <span id="t_d">00天</span> <span id="t_h">00时</span> <span id="t_m">00分</span> <span id="t_s">00秒</span> </div> <script> setInterval(function() { var EndTime = new Date('2016/06/13 00:00:00'); var NowTime = new Date(); var t = EndTime.getTime() - NowTime.getTime(); var d = 0; var h = 0; var m = 0; var s = 0; if (t >= 0) { d = Math.floor(t / 1000 / 60 / 60 / 24); h = Math.floor(t / 1000 / 60 / 60 % 24); m = Math.floor(t / 1000 / 60 % 60); s = Math.floor(t / 1000 % 60); } document.getElementById("t_d").innerHTML = d + "天"; document.getElementById("t_h").innerHTML = h + "时"; document.getElementById("t_m").innerHTML = m + "分"; document.getElementById("t_s").innerHTML = s + "秒"; }, 10); </script> </body> </html>

类型判断：

function _typeOf(obj) {
		return Object.prototype.toString.call(obj).toLowerCase().slice(8, -1); // } 判断undefined:  <span style="font-size: small;"> var tmp = undefined;  if (typeof(tmp) == "undefined"){  alert("undefined");  } </span>  判断null:  <span style="font-size: small;"> var tmp = null;  if (!tmp && typeof(tmp)!="undefined" && tmp!=0){  alert("null");  }　 </span>  判断NaN:  var tmp = 0/0;  if(isNaN(tmp)){  alert("NaN");  } 判断undefined和null:  <span style="font-size: small;"> var tmp = undefined;  if (tmp== undefined)  {  alert("null or undefined");  } </span>  <span style="font-size: small;"> var tmp = undefined;  if (tmp== null)  {  alert("null or undefined");  } </span>  判断undefined、null与NaN:  <span style="font-size: small;"> var tmp = null;  if (!tmp)  {  alert("null or undefined or NaN");  } </span>

Ajax

jquery ajax函数

我自己封装了一个ajax的函数，代码如下：

var Ajax = function(url, type success, error) {
    $.ajax({
        url: url,
        type: type,
        dataType: 'json', timeout: 10000, success: function(d) { var data = d.data; success && success(data); }, error: function(e) { error && error(e); } }); }; // 使用方法： Ajax('/data.json', 'get', function(data) { console.log(data); });

jsonp方式

有时候我们为了跨域，要使用jsonp的方法，我也封装了一个函数：

function jsonp(config) {
    var options = config || {}; // 需要配置url, success, time, fail四个属性 var callbackName = ('jsonp_' + Math.random()).replace(".", ""); var oHead = document.getElementsByTagName('head')[0]; var oScript = document.createElement('script'); oHead.appendChild(oScript); window[callbackName] = function(json) { //创建jsonp回调函数 oHead.removeChild(oScript); clearTimeout(oScript.timer); window[callbackName] = null; options.success && options.success(json); //先删除script标签，实际上执行的是success函数 }; oScript.src = options.url + '?' + callbackName; //发送请求 if (options.time) { //设置超时处理 oScript.timer = setTimeout(function () { window[callbackName] = null; oHead.removeChild(oScript); options.fail && options.fail({ message: "超时" }); }, options.time); } }; // 使用方法： jsonp({ url: '/b.com/b.json', success: function(d){ //数据处理 }, time: 5000, fail: function(){ //错误处理 } });

JS生成随机字符串的最佳实践

var random_str = function() {
    var len = 32;     var chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';     var max = chars.length;     var str = '';     for (var i = 0; i < len; i++) { 　　　　str += chars.charAt(Math.floor(Math.random() * max));     }     return str; }; //这样生成一个32位的随机字符串，相同的概率低到不可能。

常用正则表达式

JavaScript过滤Emoji的最佳实践

name = name.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");

手机号验证：

var validate = function(num) {
    var reg = /^1[3-9]\d{9}$/; return reg.test(num); };

身份证号验证：

var reg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;

ip验证：

var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])){3}$/

常用js函数

返回顶部：

$(window).scroll(function() {
    var a = $(window).scrollTop(); if(a > 100) { $('.go-top').fadeIn(); }else { $('.go-top').fadeOut(); } }); $(".go-top").click(function(){ $("html,body").animate({scrollTop:"0px"},'600'); });

阻止冒泡：

function stopBubble(e){
    e = e || window.event; if(e.stopPropagation){ e.stopPropagation(); //W3C阻止冒泡方法 }else { e.cancelBubble = true; //IE阻止冒泡方法 } }

全部替换replaceAll：

var replaceAll = function(bigStr, str1, str2) {  //把bigStr中的所有str1替换为str2 var reg = new RegExp(str1, 'gm'); return bigStr.replace(reg, str2); }

获取浏览器url中的参数值：

var getURLParam = function(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null; };

深度拷贝对象：

function cloneObj(obj) {
    var o = obj.constructor == Object ? new obj.constructor() : new obj.constructor(obj.valueOf()); for(var key in obj){ if(o[key] != obj[key] ){ if(typeof(obj[key]) == 'object' ){ o[key] = mods.cloneObj(obj[key]); }else{ o[key] = obj[key]; } } } return o; }

数组去重：

var unique = function(arr) {
    var result = [], json = {}; for (var i = 0, len = arr.length; i < len; i++){ if (!json[arr[i]]) { json[arr[i]] = 1; result.push(arr[i]); //返回没被删除的元素 } } return result; };

判断数组元素是否重复：

var isRepeat = function(arr) {  //arr是否有重复元素 var hash = {}; for (var i in arr) { if (hash[arr[i]]) return true; hash[arr[i]] = true; } return false; };

生成随机数：

function randombetween(min, max){
    return min + (Math.random() * (max-min +1)); }

操作cookie：

own.setCookie = function(cname, cvalue, exdays){
    var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = 'expires='+d.toUTCString(); document.cookie = cname + '=' + cvalue + '; ' + expires; }; own.getCookie = function(cname) { var name = cname + '='; var ca = document.cookie.split(';'); for(var i=0; i< ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1); if (c.indexOf(name) != -1) return c.substring(name.length, c.length); } return ''; };

数据类型： underfined、null、0、false、NaN、空字符串。他们的逻辑非结果均为true。

闭包格式：好处：避免命名冲突（全局变量污染）。

(function(a, b) {
    console.log(a+b);  //30 })(10, 20);

截取和清空数组：

var arr = [12, 222, 44, 88]; arr.length = 2; //截取，arr = [12, 222]; arr.length = 0; //清空，arr will be equal to [].

获取数组的最大最小值：

var numbers = [5, 45822, 120, -215]; var maxInNumbers = Math.max.apply(Math, numbers); //45822 var minInNumbers = Math.min.apply(Math, numbers); //-215

浮点数计算问题：

0.1 + 0.2 == 0.3   //false

为什么呢？因为0.1+0.2等于0.30000000000000004。JavaScript的数字都遵循IEEE 754标准构建，在内部都是64位浮点小数表示。可以通过使用toFixed()来解决这个问题。

数组排序sort函数：

var arr = [1, 5, 6, 3]; //数字数组 arr.sort(function(a, b) { return a - b; //从小到大排 return b - a; //从大到小排 return Math.random() - 0.5; //数组洗牌 });

var arr = [{   //对象数组
    num: 1,
    text: 'num1'
}, {
    num: 5, text: 'num2' }, { num: 6, text: 'num3' }, { num: 3, text: 'num4' }]; arr.sort(function(a, b) { return a.num - b.num; //从小到大排 return b.num - a.num; //从大到小排 });

对象和字符串的转换：

var obj = {a: 'aaa', b: 'bbb'};
var objStr = JSON.stringify(obj); // "{"a":"aaa","b":"bbb"}" var newObj = JSON.parse(objStr); // {a: "aaa", b: "bbb"}

对象拷贝与赋值

var obj = {
    name: 'xiaoming',
    age: 23
};

var newObj = obj;

newObj.name = 'xiaohua'; console.log(obj.name); // 'xiaohua' console.log(newObj.name); // 'xiaohua'

上方我们将obj对象赋值给了newObj对象，从而改变newObj的name属性，但是obj对象的name属性也被篡改，这是因为实际上newObj对象获得的只是一个内存地址，而不是真正的拷贝，所以obj对象被篡改。

var obj2 = {
    name: 'xiaoming',
    age: 23
};

var newObj2 = Object.assign({}, obj2, {color: 'blue'}); newObj2.name = 'xiaohua'; console.log(obj2.name); // 'xiaoming' console.log(newObj2.name); // 'xiaohua' console.log(newObj2.color); // 'blue'

上方利用Object.assign()方法进行对象的深拷贝可以避免源对象被篡改的可能。因为Object.assign() 方法可以把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。

var obj3 = {
    name: 'xiaoming',
    age: 23
};

var newObj3 = Object.create(obj3); newObj3.name = 'xiaohua'; console.log(obj3.name); // 'xiaoming' console.log(newObj3.name); // 'xiaohua'

我们也可以使用Object.create()方法进行对象的拷贝，Object.create()方法可以创建一个具有指定原型对象和属性的新对象。

git笔记

git使用之前的配置：

1.git config --global user.email xxx@163.com
2.git config --global user.name xxx 3.ssh-keygen -t rsa -C xxx@163.com(邮箱地址) // 生成ssh 4.找到.ssh文件夹打开，使用cat id_rsa.pub //打开公钥ssh串 5.登陆github，settings － SSH keys － add ssh keys （把上面的内容全部添加进去即可）

说明：然后这个邮箱（xxxxx@gmail.com）对应的账号在github上就有权限对仓库进行操作了。可以尽情的进行下面的git命令了。

git常用命令：

1、git config user.name  /  user.email     //查看当前git的用户名称、邮箱
2、git clone https://github.com/jarson7426/javascript.git  project  //clone仓库到本地。
3、修改本地代码，提交到分支:  git add file   /   git commit -m “新增文件”
4、把本地库推送到远程库:  git push origin master
5、查看提交日志：git log -5 6、返回某一个版本：git reset --hard 123 7、分支：git branch / git checkout name / git checkout -b dev 8、合并name分支到当前分支：git merge name / git pull origin 9、删除本地分支：git branch -D name 10、删除远程分支： git push origin :daily/x.x.x 11、git checkout -b mydev origin/daily/1.0.0 //把远程daily分支映射到本地mydev分支进行开发 12、合并远程分支到当前分支 git pull origin daily/1.1.1 13、发布到线上： git tag publish/0.1.5 git push origin publish/0.1.5:publish/0.1.5 14、线上代码覆盖到本地： git checkout --theirs build/scripts/ddos git checkout --theirs src/app/ddos

判断是否有中文：

var reg = /.*[\u4e00-\u9fa5]+.*$/;
reg.test('123792739测试')  //true

判断是对象还是数组：

function isArray = function(o) { return toString.apply(o) === '[object Array]'; } function isObject = function(o) { return toString.apply(o) === '[object Object]'; }

CSS修改滚动条样式：

::-webkit-scrollbar {
	width: 10px;
	background-color: #ccc; } ::-webkit-scrollbar-track { background-color: #ccc; border-radius: 10px; } ::-webkit-scrollbar-thumb { background-color: rgb(255, 255, 255); background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(rgb(77, 156, 65)), color-stop(0.6, rgb(84, 222, 93)), to(rgb(25, 145, 29))); border-radius: 10px; }

单行多行省略号：

       <style type="text/css">               .inaline {                   overflow: hidden;                   white-space: nowrap;                   text-overflow: ellipsis;                   /*clip  修剪文本。*/               }                              .intwoline {                   display: -webkit-box !important;                   overflow: hidden;                   text-overflow: ellipsis;                   word-break: break-all;                   -webkit-box-orient: vertical;                   -webkit-line-clamp: 3;               }           </style>

遮罩：

<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>RGBA 遮罩</title> <style type="text/css"> * { padding: 0px; margin: 0px; } html, body { width: 100%; min-height: 100%; background: white; } div.mask { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); } div.masks-body { width: 300px; height: 300px; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; background: green; margin: auto; } p { position: absolute; width: 30px; height: 30px; background: red; right: 0px; top: -30px; } </style> <script type="text/javascript"> window.onload = function() { document.querySelector("#main").onclick = function() { document.querySelector(".mask").style.display = "block"; } document.querySelector("p#close").onclick=function(){ document.querySelector(".mask").style.display = "none"; } } </script> </head> <body> <button id="main">点我</button> <div class="mask"> <div class="masks-body"> <p id="close"></p> </div> </div> </body> </html>

常见页面flex布局：

<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { padding: 0px; margin: 0px; } html, body { width: 100%; min-height: 100%; min-width: 1200px; overflow-x: hidden; } h1 { color: red; text-align: center; } #main0 { height: 400px; background: black; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: flex-start; } #main0 div:nth-child(2n) { flex: 1; height: 200px; font-size: 100px; line-height: 200px; text-align: center; background: red; } #main0 div:nth-child(2n+1) { flex: 1; height: 200px; line-height: 200px; font-size: 100px; text-align: center; background: blue; } #main1 { height: 400px; background: pink; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; } #main1 div:nth-child(2n) { flex: 1; height: 200px; font-size: 100px; line-height: 200px; text-align: center; background: red; } #main1 div:nth-child(2n+1) { width: 300px; height: 200px; font-size: 100px; line-height: 200px; text-align: center; background: blue; } #main2 { height: 400px; background: yellow; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; } #main2 div:nth-child(2n) { flex: 1; height: 200px; font-size: 100px; line-height: 200px; text-align: center; background: red; } #main2 div:nth-child(2n+1) { width: 300px; height: 200px; font-size: 100px; line-height: 200px; text-align: center; background: blue; } #main3 { height: 400px; background: fuchsia; display: flex; flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; } #main3 div.div1 { flex: 1; height: 200px; font-size: 100px; line-height: 200px; text-align: center; background: blue; } #main3 div.div2 { flex: 2; height: 200px; font-size: 100px; line-height: 200px; text-align: center; background: red; } #main3 div.div3 { flex: 3; height: 200px; font-size: 100px; line-height: 200px; text-align: center; background: orange; } </style> </head> <body> <h1>等分布局</h1> <div id="main0"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> <h1>左边固定右边自适应布局</h1> <div id="main1"> <div>1</div> <div>2</div> </div> <h1>左右固定中间自适应布局</h1> <