我们在做项目的时候经常会遇到同头同底的情况。如果每一页都复制，不仅工作量大，而且如果需要修改文章，那就更麻烦了。这时候我们就需要将public部分提取出来，需要的时候再导入页面。在网上找了很久，试了好几次。我觉得前端最好的办法就是使用jQuery的load函数。/*导入页眉和页脚*/$(document).ready(function(){$(".footer").load("page/footer.html");});但注意页脚。html不需要是完整的html（当时我自己就遇到了这个大坑，泪流满面/(ㄒoㄒ)/~~），只需要包含标签内容即可。在这里，小编建了一个前端学习交流按钮群：132667127，自己整理的最新前端资料和进阶开发教程。有需要的可以加群一起学习交流前端开发常用的css动画代码/*移至向左并弹性显示*/@-webkit-keyframesfadeToLeftTan{0%{-webkit-transform:translateX(100%);不透明度：0;}70%{-webkit-transform:translateX(-5%);不透明度:1;}80%{-webkit-transform:translateX(2%);不透明度:1;}90%{-webkit-transform:translateX(-2%);不透明度：1;}100%{-webkit-transform:translateX(0);不透明度：1；}}@keyframesfadeToLeftTan{0%{transform:translateX(100%);不透明度：0;}70%{变换：translateX(-5%);不透明度：1；}80%{变换：translateX(2%);不透明度：1;}90%{变换：translateX(-2%);不透明度：1;}100%{变换：translateX(0);opacity:1;}}/*向右移动并显示*/@-webkit-keyframesfadeToRightTan{0%{-webkit-transform:translateX(-100%);不透明度：0;}70%{-webkit-transform:translateX(5%);不透明度：1;}80%{-webkit-transform:translateX(-2%);不透明度:1;}90%{-webkit-transform:translateX(2%);不透明度：1;}100%{-webkit-transform:translateX(0);不透明度：1；}}@keyframesfadeToRightTan{0%{transform:translateX(-100%);不透明度：0;}70%{变换：translateX(5%);不透明度：1;}80%{变换：translateX(-2%);不透明度：1;}90%{变换：translateX(2%);不透明度：1;}100%{变换：translateX(0);opacity:1;}}/*向上移动并显示*/@-webkit-keyframesfadeToTopTan{0%{-webkit-transform:translateY(100%);不透明度:0;}70%{-webkit-transform:translateY(-5%);不透明度:1;}80%{-webkit-transform:translateY(2%);不透明度:1;}90%{-webkit-transform:translateY(-2%);不透明度:1;}100%{-webkit-transform:translateY(0);不透明度：1；}}@keyframesfadeToTopTan{0%{transform:translateY(100%);不透明度：0；}70%{变换：translateY(-5%);不透明度：1;}80%{变换：translateY(2%);不透明度：1；}90%{变换：translateY(-2%)；不透明度：1;}100%{变换：translateY(0);opacity:1;}}/*向下移动并显示*/@-webkit-keyframesfadeToDownTan{0%{-webkit-transform:translateY(-100%);不透明度:0;}70%{-webkit-transform:translateY(5%);不透明度:1;}80%{-webkit-transform:translateY(-2%);不透明度:1;}90%{-webkit-transform:translateY(2%);不透明度:1;}100%{-webkit-transform:translateY(0);不透明度：1；}}@keyframesfadeToDownTan{0%{transform:translateY(-100%);不透明度：0；}70%{变换：translateY(5%);不透明度：1；}80%{变换：translateY(-2%)；不透明度：1；}90%{变换：translateY(2%)；不透明度：1;}100%{变换：translateY(0);opacity:1;}}/*从大向小变形显示*/@-webkit-keyframesfadeInMaxToMinTan{0%{-webkit-transform:scale(2);不透明度:0;}70%{-webkit-transform:scale(.9);不透明度：1;}85%{-webkit-transform:scale(1.1);不透明度：1;}100%{-webkit-transform:scale(1);不透明度：1；}}@keyframesfadeInMaxToMinTan{0%{transform:scale(2);不透明度：0；}70%{变换：比例（.9）；不透明度：1；}85%{变换：比例（1.1）；不透明度：1；}100%{变换：比例（1）；opacity:1;}}/*从小向大变形显示*/@-webkit-keyframesfadeInMinToMaxTan{0%{-webkit-transform:scale(0);不透明度：0;}70%{-webkit-transform:scale(1.1);不透明度：1;}85%{-webkit-transform:scale(.9);不透明度：1;}100%{-webkit-transform:scale(1);不透明度：1；}}@keyframesfadeInMinToMaxTan{0%{transform:scale(0);不透明度：0；}70%{变换：比例（1.1）；不透明度：1；}85%{变换：比例（.9）；不透明度：1；}100%{变换：比例（1）；opacity:1;}}/************************************//*向左移动显示*/@-webkit-keyframesfadeToLeft{0%{-webkit-transform:translateX(100%);不透明度：0;}100%{-webkit-transform:translateX(0);不透明度：1；}}@keyframesfadeToLeft{0%{transform:translateX(100%);不透明度：0；}100%{变换：translateX(0);opacity:1;}}/*向右移动显示*/@-webkit-keyframesfadeToRight{0%{-webkit-transform:translateX(-100%);不透明度：0；}100%{-webkit-transform:translateX(0);不透明度：1；}}@keyframesfadeToRight{0%{transform:translateX(-100%);不透明度：0；}100%{变换：translateX(0);opacity:1;}}/*向上移动显示*/@-webkit-keyframesfadeToTop{0%{-webkit-transform:translateY(100%);不透明度：0;}100%{-webkit-transform:translateY(0);不透明度：1；}}@keyframesfadeToTop{0%{transform:translateY(100%);不透明度：0；}100%{变换：translateY(0);opacity:1;}}/*向上移动60show*/@-webkit-keyframesfadeToTop60{0%{-webkit-transform:translateY(60px);不透明度：0;}100%{-webkit-transform:translateY(0);不透明度：1；}}@keyframesfadeToTop60{0%{transform:translateY(60px);不透明度：0；}100%{变换：translateY(0);opacity:1;}}/*向下移动显示*/@-webkit-keyframesfadeToDown{0%{-webkit-transform:translateY(-100%);不透明度：0;}100%{-webkit-transform:translateY(0);opacity:1;}}@keyframesfadeToDown{0%{transform:translateY(-100%);不透明度：0；}100%{变换：translateY(0);opacity:1;}}/*向下60移动显示*/@-webkit-keyframesfadeToDown60{0%{-webkit-transform:translateY(-60px);不透明度：0;}100%{-webkit-transform:translateY(0);不透明度：1；}}@keyframesfadeToDown60{0%{transform:translateY(-60px);不透明度：0；}100%{变换：translateY(0);opacity:1;}}/***************************************//*上下微移漂浮*/@-webkit-keyframesflashTopDown{0%{-webkit-transform:translateY(0);不透明度:1;}100%{-webkit-transform:translateY(8px);opacity:.8;}}@keyframesflashTopDown{0%{transform:translateY(0);不透明度：1;}100%{变换：translateY(8px);opacity:.8;}}/************************************//*从大向小变化显示*/@-webkit-keyframesfadeInMaxToMin{0%{-webkit-transform:scale(2);不透明度：0;}100%{-webkit-transform:scale(1);不透明度：1；}}@keyframesfadeInMaxToMin{0%{transform:scale(2);不透明度：0；}100%{变换：比例（1）；操作acity:1;}}/*从小到大显示*/@-webkit-keyframesfadeInMinToMax{0%{-webkit-transform:scale(0);不透明度：0;}100%{-webkit-transform:scale(1);不透明度：1；}}@keyframesfadeInMinToMax{0%{transform:scale(0);不透明度：0；}100%{变换：比例（1）；opacity:1;}}/***************************************//*闪烁的大小变成更小*/@-webkit-keyframesflashMaxMin{0%{-webkit-transform:scale(1);}100%{-webkit-transform:scale(.98);}}@keyframesflashMaxMin{0%{transform:scale(1);}100%{transform:scale(.98);}}/*闪烁尺寸变大*/@-webkit-keyframesflashMax{0%{-webkit-transform:scale(1);}100%{-webkit-transform:scale(1.05);}}@keyframesflashMax{0%{transform:scale(1);}100%{transform:scale(1.05);}}/*********************************//*淡入*/@-webkit-keyframesfadeIn{0%{opacity:0;}100%{opacity:1;}}@keyframesfadeIn{0%{opacity:0;}100%{opacity:1;}}/*淡出*/@-webkit-keyframesfadeOut{0%{opacity:1;}100%{不透明度：0；}}@keyframesfadeOut{0%{不透明度：1；}100%{opacity:0;}}前端开发，移动端公共样式/*禁用iPhone中Safari自动调整字体大小*/html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;/*解决IOS默认滑动很卡的情况*/-webkit-overflow-scrolling:touch;}/*禁止缩放表单*/input[type="submit"],input[type="reset"],input[type="button"],input{resize:none;border:none;}/*取消链接高亮*/body,div,ul,li,ol,h1,h2,h3,h4,h5,h6,input,textarea,select,p,dl,dt,dd,a,img,button,form,table,th,tr,td,tbody,article,aside,details,figcaption,图，页脚，页眉,hgroup,menu,nav,section{-webkit-tap-highlight-color:rgba(0,0,0,0);}/*将HTML5元素设置为块*/article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}/*Imageadaptation*/img{width:100%;height:auto;width:auto9;/*ie8*/display:block;-ms-interpolation-mode:bicubic;/*为了照顾ie图像缩放失真*/}/*初始化*/body,div,ul,li,ol,h1,h2、h3、h4、h5、h6、输入、文本区域、选择、p、dl、dt、dd、a、img、按钮、表单、表格、th、tr、td、tbody,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;}body{font:12px/1.5'微软雅黑','宋体',Tahoma,Arial,sans-serif;color:#fff;background-color:#F7F7F7;}em,i{font-style:normal;}ul,li{list-style-type:none;}strong{字体粗细:正常；}表{边框折叠：折叠；边框间距：0}文本区域{调整大小：无；/*禁用文本拖动，尤其是在谷歌下*/}p{word-wrap:break-word;/*不足的词会自动换行而不被截断*/}.clearfix:after{content:"";display:block;visibility:hidden;height:0;clear:both;}.clearfix{zoom:1;}a{text-decoration:none;color:#fff;font-family:'MicrosoftYaHei',Tahoma,Arial,sans-serif;}a:hover{text-decoration:none;}ul,ol{list-style:none;}h1,h2,h3,h4,h5,h6{font-size:100%;font-family:'MicrosoftYaHei';}img{border:none;}input{font-family:'MicrosoftYaHei';}/*单行溢出*/.one-txt-cut{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}/*多行溢出移动端使用*/.txt-cut{overflow:隐藏zh;text-overflow:ellipsis;display:-webkit-box;/*-webkit-line-clamp:2;*/-webkit-box-orient:vertical;}/*移动端点击链接出现蓝色背景问题resolve*/a:link,a:active,a:visited,a:hover{background:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}.overflow{overflow:hidden;}.w50{宽度：50%；}.w25{宽度：25%；}.w20{宽度：20%；}.w33{宽度：33.333333%；}。fl{float:left;}.fr{float:right;}.db{display:block!important;}.dn{display:none;}/*additional*/
