网站一般分为前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。
我们网站建设的目的不就是为了让目标人群来访问吗？
所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。
举个例子：就好像，好多人问，男人在找女朋友的时候是不是只看外表，一些智慧的男人给出了这样的回答：脸蛋和身材决定了我是否想去了解她的思想，思想决定了我是否会一票否决她的脸蛋和身材。同理，网站也是这样，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。
不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。所以说，网站和女人一样，都要内外兼修呀”。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？
1、减少http请求，合理设置 HTTP缓存
http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独立的线程去处理。这些通信和服务的开销都很昂贵，减少http请求的数目可有效提高访问性能。
减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。
缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求。假设某网站首页，当浏览器没有缓存的时候访问一共会发出 78个请求，共 600多 K数据，而当第二次访问即浏览器已缓存之后访问则仅有 10个请求，共 20多 K数据。 (这里需要说明的是，如果直接 F5刷新页面的话效果是不一样的，这种情况下请求数还是一样，不过被缓存资源的请求服务器是 304响应，只有 Header没有Body ，可以节省带宽 )
怎样才算合理设置 ?
原则很简单，能缓存越多越好，能缓存越久越好。例如，很少变化的图片资源可以直接通过 HTTP Header中的Expires设置一个很长的过期头 ;变化不频繁而又可能会变的资源可以使用 Last-Modifed来做请求验证。尽可能的让资源能够在缓存中待得更久。关于 HTTP缓存的具体设置和原理此处就不再详述了。
2、使用浏览器缓存
对一个网站而言，CSS、javascript、logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次http请求都需要的，如果将这些文件缓存在浏览器中，可以极好的改善性能。通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。
在某些时候，静态资源文件变化需要及时应用到客户端浏览器，这种情况，可通过改变文件名实现，即更新javascript文件并不是更新javascript文件内容，而是生成一个新的JS文件并更新HTML文件中的引用。
使用浏览器缓存策略的网站在更新静态资源时，应采用逐量更新的方法，比如需要更新10个图标文件，不宜把10个文件一次全部更新，而是应该一个文件一个文件逐步更新，并有一定的间隔时间，以免用户浏览器忽然大量缓存失效，集中更新缓存，造成服务器负载骤增、网络堵塞的情况。
3、启用压缩
在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑
4、Lazy Load Images
这条策略实际上并不一定能减少 HTTP请求数，但是却能在某些条件下或者页面刚加载时减少 HTTP请求数。对于图片而言，在页面刚加载的时候可以只加载第一屏，当用户继续往后滚屏的时候才加载后续的图片。这样一来，假如用户只对第一屏的内容感兴趣时，那剩余的图片请求就都节省了。
5、CSS放在页面最上部，javascript放在页面最下面
浏览器会在下载完成全部CSS之后才对整个页面进行渲染，因此最好的做法是将CSS放在页面最上面，让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕，所以可以考虑将CSS放在HEAD中。
Javascript则相反，浏览器在加载javascript后立即执行，有可能会阻塞整个页面，造成页面显示缓慢，因此javascript最好放在页面最下面。但如果页面解析时就需要用到javascript，这时放到底部就不合适了。
6、合理的ajax请求
对于返回内容相同的请求，没必要每次都直接从服务端拉取，合理使用 AJAX 缓存能加快 AJAX 响应速度并减轻服务器压力。
7、缩小 favicon.ico 并缓存
有利于 favicon.ico 的重复加载，因为一般一个 Web 应用的 favicon.ico 是很少改变的。
8、减少DOM数量和层级数量
HTML 中标签元素越多，标签的层级越深，浏览器解析 DOM 并绘制到浏览器中所花的时间就越长，所以应尽可能保持 DOM 元素简洁和扁平化的层级。
9、HTML标签转换
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
HTML标签的转换主要是指使用短标签替换在网页中有相同效果的长标签，比如b与strong标签两者都是对字体加粗可是strong却比b多了5个字符。假设一个页面出现上百个加粗标签，就会产生不少的冗余代码。
与，如果只是单纯加粗或斜体则用b、i标签；
如果想对seo产生影响则用strong、em，可自行调节样式，在制作html页面的时候。进行优化的选择使用的标签。
头部标签
1.
标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的title标题中不要设置相同的内容。</p>
<p>2.<meta keywords>标签：关键词，列举出几个页面的重要关键字即可，切记过分堆砌。</p>
<p>3.<meta description>标签：网页描述，需要高度概括网页内容，切记不能太长，过分堆砌关键词，每个页面也要有所不同。</p>
<p>表格，ur 等容器形式的标签</p>
<p>浏览器编译器遇到一个标签时，就开始寻找它的结束标签，直到它匹配上,才干显示它的内容，所以当表，ur等容器形式的标签嵌套非常多时,打开页面就会特别慢,这样就减少用户体验了。</p>
<p>解决方法：在编写html的时候：尽量使每一个容器独立。假设要嵌套的时候，一定要使其清楚、简单介绍。</p>
<p><strong>图片img标签</strong></p>
<p><img src="图片地址" alt="图片keyword"/> alt属性一定要写</p>
<p><strong>合理 target="_blank"</strong></p>
<p>合理而不频繁使用target="_blank" 是可以在一定程度上位站点带来回旋流量和点击的。同一时候。在细节上使用 target="_blank" ，可以增强站点总体用户体验。</p>
<p><strong>head头部标签部分</strong></p>
<p><title> 标题: 只强调重点，不要重复出现关键词，各个页面的title不要设置相同的</p>
<p><meta keywords> 关键词： 列举出关键词，不要过分堆砌</p>
<p><meta description> 描述： 同2，不要太长，各个页面的description不要设置相同的</p>
<p><strong>body代码正文</strong></p>
<p>标签语义化，比较以下两部分代码做头部导航：</p><pre><p><p><br/><span>课程1</span><br/><span>|</span><br/><span>课程2</span><br/><span>|</span><br/><span>课程3</span><br/><span>我的课程</span><br/></p><br/></p></pre><p><strong>以上代码没有一点语义化，可以优化成如下：</strong></p><pre><p><ul><br/><li>课程1</li><br/><li>课程2</li><br/><li>课程3</li><br/><span>我的课程</span><br/></ul><br/>……<br/>li {<br/>border-right: 1px solid #000;<br/>}<br/></p></pre><p><strong><a> 对于a标签，要加title，同时加属性rel=‘nofollow’</strong></p>
<p>nofollow: 告诉爬虫不要去该链接去爬了，因为爬过去可能爬不回来了，不利于seo优化</p>
<p><strong><h1> 对于标题尽量用h标签，而且是h1标签，因为爬虫认为h1标签是本文最重要的标题，副标题用h2，其他不重要的标题就不要用h标签了</strong></p>
<p>h1、h2 标题太大的话，自行用css去修饰</p>
<p><strong><br>\ 表示换行，如果内容是纯文本内容，可以br换行，示例如下，如果是<span>之间换行则不用，利用盒模型来调整</strong></p><pre><p><p> //正确示例，注意p表示 文本段落,不用p<br/>这是文本内容啊<br><br/>这是文本内容啊<br><br/>这是文本内容啊<br/></p><br/><p> //错误示例<br/><span>这是文本内容啊</span><br><br/><span>这是文本内容啊</span><br><br/><span>这是文本内容啊</span><br/></p><br/></p></pre><p><strong>table，定义table标题，以下为正确示例</strong></p><pre><p><table><br/><caption>表格标题</caption><br/>……<br/></table><br/></p></pre><p><strong>注意</strong></p>
<p>重要的html代码放在文件最前边，爬虫是由上之下抓取html代码的</p>
<p>重要的内容不要用js输出，爬虫是看不懂js的，所以我们常用的vue框架是不利于seo优化的。</p>
<p>尽量少用iframe标签，爬虫是不会读取iframe的内容的</p>
<p>谨慎使用display：none ，理由同3</p>
<p>精简代码，若用一个标签完成的布局，不要用两个</p> <p> </div>
<div class="article-end">
<div class="tag">
<p>标签：</p> <a>性能</a>
</div>
</div>
<div class="mzsm">
<p><strong>免责声明：</strong></p>
<p>本站提供的资源，都来自网络，版权争议与本站无关，所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。侵删请致信E-mail：
123456@qq.com </p>
</div>
<div class="c-title">
同类推荐
</div>
<ul class="list_1">
<li><i class="iconfont icon-dot"></i><a href="/seozs/22196.html"
title="谷歌搜索优化：Google SEO优化之网站性能指标及优化技巧">谷歌搜索优化：Google SEO优化之网站性能指标及优化技巧</a><span class="date">11-23</span></li>
<li><i class="iconfont icon-dot"></i><a href="/seozs/21955.html"
title="百度SEO：网站页面性能优化指南">百度SEO：网站页面性能优化指南</a><span class="date">11-22</span></li>
<li><i class="iconfont icon-dot"></i><a href="/seozs/21954.html"
title="百度SEO：网站页面性能优化指南">百度SEO：网站页面性能优化指南</a><span class="date">11-22</span></li>
<li><i class="iconfont icon-dot"></i><a href="/seozs/21939.html"
title="SEO优化：网站页面性能优化指南">SEO优化：网站页面性能优化指南</a><span class="date">11-22</span></li>
<li><i class="iconfont icon-dot"></i><a href="/seozs/14311.html"
title="高端网站Html 5前端性能优化指南">高端网站Html 5前端性能优化指南</a><span class="date">10-27</span></li>
<li><i class="iconfont icon-dot"></i><a href="/jz/4165.html"
title="网站性能优化提升的30个方法策略">网站性能优化提升的30个方法策略</a><span class="date">03-16</span></li>
</ul>
</div>
<div class="right">
<div class="list-right nav">
<section class="_135editor" data-tools="135编辑器" data-id="102361">
<section style="background:#fff;margin:10px auto;">
<section style="margin:0px auto;text-align:center;">
<section style="display:inline-block;">
<section
style="display:flex;justify-content:center;align-items:flex-end;transform:rotate(0deg);">
<section style="display:flex;justify-content:center;align-items:center;">
<section style="box-sizing:border-box;width:50px;margin-right:-5px;">
<img class="assistant"
style="vertical-align:inherit;box-sizing:border-box;width:100%;display:block;"
src="/class/newapptheme/static/images/laba_zuo.gif" data-ratio="0.68" data-w="252"
data-width="100%"
_src="/class/newapptheme/static/images/laba_zuo.gif"
draggable="false">
</section>
<section class="135brush" data-brushtype="text"
style="font-size:16px;letter-spacing:1.5px;padding:7px 1em;color:#fff;background:#fc6238;">
<strong>关注我们</strong>
</section>
<section style="box-sizing:border-box;width:50px;margin-left:-5px;">
<img class="assistant"
style="vertical-align:inherit;box-sizing:border-box;width:100%;display:block;"
src="/class/newapptheme/static/images/laba_you.gif" data-ratio="0.68" data-w="252"
data-width="100%"
_src="/class/newapptheme/static/images/laba_you.gif"
draggable="false">
</section>
</section>
</section>
</section>
</section>
<section style="background:#ffefeb;padding:2em 0px 1em 0px;margin-top:-20px;">
<section style="display:flex;justify-content:space-around;align-items:center;"
hm_fix="381:483">
<section style="box-sizing:border-box;width:130px;"><img
style="vertical-align:inherit;box-sizing:border-box;width:100%;display:block;"
src="/class/newapptheme/static/images/gzh.jpg" data-ratio="1" data-width="100%"
_src="/class/newapptheme/static/images/gzh.jpg" draggable="false"
data-op="change" title="维亿CMS资源网" alt="" data-w="156"></section>
<section style="display:inline-block;">
<section
style="display:flex;justify-content:flex-start;align-items:center;">
<section>
<section class="135brush" data-brushtype="text"
style="font-size:14px;color:#fc6238;word-break:break-all;margin-top:10px;">
扫码点个关注吧~
</section>
<section class="135brush" data-brushtype="text"
style="font-size:14px;color:#fc6238;word-break:break-all;margin-top:4px;">
维亿CMS资源网 </section>
<section class="135brush" data-brushtype="text"
style="font-size:14px;color:#fc6238;word-break:break-all;margin-top:4px;">
关注获取更多精彩资讯
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</section>
</div>
<div class="list-right nav">
<div class="c-title">
栏目分类
</div>
<ul>
<ol class=""><a href="/jz" class="target">CMS建站</a></ol>
</ul>
</div>
<div class="article-right">
<div class="c-title">
热门文章
</div>
<ul class="list">
<li><a href="/seozs/13823.html" target="_blank"><i>1</i>网站URL结构错误的解决方法</a></li>
<li><a href="/jz/1.html" target="_blank"><i>2</i>网站建设需要的3个思维 ，仅少数建站人员知道</a></li>
<li><a href="/jz/18.html" target="_blank"><i>3</i>深圳网站建设哪家设计好？深圳网站建设品牌;深圳网站建设方案策划</a></li>
<li><a href="/cjjc/3.html" target="_blank"><i>4</i>老站长教你如何用cms建站</a></li>
<li><a href="/zyjc/4.html" target="_blank"><i>5</i>内容管理系统（CMS）是什么意思？ CMS的含义</a></li>
<li><a href="/jz/5.html" target="_blank"><i>6</i>天津seo怎么优化(天津seo排名优化公司)</a></li>
<li><a href="/jz/7.html" target="_blank"><i>7</i>仪表seo优化(seo高级优化方法)</a></li>
<li><a href="/jz/8.html" target="_blank"><i>8</i>小说seo关键字优化(沈阳seo关键字优化)</a></li>
<li><a href="/jz/9.html" target="_blank"><i>9</i>seo网络优化技术(SEO网络优化)</a></li>
<li><a href="/jz/10.html" target="_blank"><i>10</i>关键词seo优化哪家有(江门抖音SEo关键词优化)</a></li>
</ul>
</div>
<div class="article-right">
<div class="c-title">
随机推荐
</div>
<ul class="list">
<li><a href="/cmscj/107.html" target="_blank"><i>1</i>帝国cms微信扫码关注公众号自动注册登陆插件</a></li>
<li><a href="/qiye/81.html" target="_blank"><i>2</i>SS CMS</a></li>
<li><a href="/caijigj/104.html" target="_blank"><i>3</i>芭奇站群软件</a></li>
<li><a href="/mianfei/77.html" target="_blank"><i>4</i>Z-Blog博客CMS</a></li>
<li><a href="/qiye/95.html" target="_blank"><i>5</i>米拓CMS</a></li>
<li><a href="/qiye/96.html" target="_blank"><i>6</i>人人站CMS</a></li>
<li><a href="/qiye/83.html" target="_blank"><i>7</i>PbootCMS</a></li>
<li><a href="/caijigj/102.html" target="_blank"><i>8</i>水淼软件 </a></li>
<li><a href="/mianfei/78.html" target="_blank"><i>9</i>迅睿CMS</a></li>
<li><a href="/mianfei/89.html" target="_blank"><i>10</i>Typecho</a></li>
</ul>
</div>
</div>
</div>
</div>
<style>
footer {
display: block
}
.row9 {
margin-left: auto;
margin-right: auto;
margin-bottom: 20px
}
.row9:after {
content: "";
display: table;
clear: both
}
.row9 .col {
float: left;
box-sizing: border-box;
padding: 0 0.75rem;
min-height: 1px
}
.row9 .col[class*="push-"],
.row9 .col[class*="pull-"] {
position: relative
}
.row9 .col.s1 {
width: 8.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s2 {
width: 16.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s3 {
width: 25%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s4 {
width: 33.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s5 {
width: 41.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s6 {
width: 50%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s7 {
width: 58.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s8 {
width: 66.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s9 {
width: 75%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s10 {
width: 83.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s11 {
width: 91.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.s12 {
width: 100%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.offset-s1 {
margin-left: 8.33333%
}
.row9 .col.pull-s1 {
right: 8.33333%
}
.row9 .col.push-s1 {
left: 8.33333%
}
.row9 .col.offset-s2 {
margin-left: 16.66667%
}
.row9 .col.pull-s2 {
right: 16.66667%
}
.row9 .col.push-s2 {
left: 16.66667%
}
.row9 .col.offset-s3 {
margin-left: 25%
}
.row9 .col.pull-s3 {
right: 25%
}
.row9 .col.push-s3 {
left: 25%
}
.row9 .col.offset-s4 {
margin-left: 33.33333%
}
.row9 .col.pull-s4 {
right: 33.33333%
}
.row9 .col.push-s4 {
left: 33.33333%
}
.row9 .col.offset-s5 {
margin-left: 41.66667%
}
.row9 .col.pull-s5 {
right: 41.66667%
}
.row9 .col.push-s5 {
left: 41.66667%
}
.row9 .col.offset-s6 {
margin-left: 50%
}
.row9 .col.pull-s6 {
right: 50%
}
.row9 .col.push-s6 {
left: 50%
}
.row9 .col.offset-s7 {
margin-left: 58.33333%
}
.row9 .col.pull-s7 {
right: 58.33333%
}
.row9 .col.push-s7 {
left: 58.33333%
}
.row9 .col.offset-s8 {
margin-left: 66.66667%
}
.row9 .col.pull-s8 {
right: 66.66667%
}
.row9 .col.push-s8 {
left: 66.66667%
}
.row9 .col.offset-s9 {
margin-left: 75%
}
.row9 .col.pull-s9 {
right: 75%
}
.row9 .col.push-s9 {
left: 75%
}
.row9 .col.offset-s10 {
margin-left: 83.33333%
}
.row9 .col.pull-s10 {
right: 83.33333%
}
.row9 .col.push-s10 {
left: 83.33333%
}
.row9 .col.offset-s11 {
margin-left: 91.66667%
}
.row9 .col.pull-s11 {
right: 91.66667%
}
.row9 .col.push-s11 {
left: 91.66667%
}
.row9 .col.offset-s12 {
margin-left: 100%
}
.row9 .col.pull-s12 {
right: 100%
}
.row9 .col.push-s12 {
left: 100%
}
@media only screen and (min-width: 544px) {
.row9 .col.m1 {
width: 8.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m2 {
width: 16.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m3 {
width: 25%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m4 {
width: 33.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m5 {
width: 41.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m6 {
width: 50%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m7 {
width: 58.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m8 {
width: 66.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m9 {
width: 75%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m10 {
width: 83.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m11 {
width: 91.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.m12 {
width: 100%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.offset-m1 {
margin-left: 8.33333%
}
.row9 .col.pull-m1 {
right: 8.33333%
}
.row9 .col.push-m1 {
left: 8.33333%
}
.row9 .col.offset-m2 {
margin-left: 16.66667%
}
.row9 .col.pull-m2 {
right: 16.66667%
}
.row9 .col.push-m2 {
left: 16.66667%
}
.row9 .col.offset-m3 {
margin-left: 25%
}
.row9 .col.pull-m3 {
right: 25%
}
.row9 .col.push-m3 {
left: 25%
}
.row9 .col.offset-m4 {
margin-left: 33.33333%
}
.row9 .col.pull-m4 {
right: 33.33333%
}
.row9 .col.push-m4 {
left: 33.33333%
}
.row9 .col.offset-m5 {
margin-left: 41.66667%
}
.row9 .col.pull-m5 {
right: 41.66667%
}
.row9 .col.push-m5 {
left: 41.66667%
}
.row9 .col.offset-m6 {
margin-left: 50%
}
.row9 .col.pull-m6 {
right: 50%
}
.row9 .col.push-m6 {
left: 50%
}
.row9 .col.offset-m7 {
margin-left: 58.33333%
}
.row9 .col.pull-m7 {
right: 58.33333%
}
.row9 .col.push-m7 {
left: 58.33333%
}
.row9 .col.offset-m8 {
margin-left: 66.66667%
}
.row9 .col.pull-m8 {
right: 66.66667%
}
.row9 .col.push-m8 {
left: 66.66667%
}
.row9 .col.offset-m9 {
margin-left: 75%
}
.row9 .col.pull-m9 {
right: 75%
}
.row9 .col.push-m9 {
left: 75%
}
.row9 .col.offset-m10 {
margin-left: 83.33333%
}
.row9 .col.pull-m10 {
right: 83.33333%
}
.row9 .col.push-m10 {
left: 83.33333%
}
.row9 .col.offset-m11 {
margin-left: 91.66667%
}
.row9 .col.pull-m11 {
right: 91.66667%
}
.row9 .col.push-m11 {
left: 91.66667%
}
.row9 .col.offset-m12 {
margin-left: 100%
}
.row9 .col.pull-m12 {
right: 100%
}
.row9 .col.push-m12 {
left: 100%
}
}
@media only screen and (min-width: 1024px) {
.row9 .col.l1 {
width: 8.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l2 {
width: 16.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l3 {
width: 25%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l4 {
width: 33.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l5 {
width: 41.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l6 {
width: 50%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l7 {
width: 58.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l8 {
width: 66.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l9 {
width: 75%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l10 {
width: 83.33333%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l11 {
width: 91.66667%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.l12 {
width: 100%;
margin-left: auto;
left: auto;
right: auto
}
.row9 .col.offset-l1 {
margin-left: 8.33333%
}
.row9 .col.pull-l1 {
right: 8.33333%
}
.row9 .col.push-l1 {
left: 8.33333%
}
.row9 .col.offset-l2 {
margin-left: 16.66667%
}
.row9 .col.pull-l2 {
right: 16.66667%
}
.row9 .col.push-l2 {
left: 16.66667%
}
.row9 .col.offset-l3 {
margin-left: 25%
}
.row9 .col.pull-l3 {
right: 25%
}
.row9 .col.push-l3 {
left: 25%
}
.row9 .col.offset-l4 {
margin-left: 33.33333%
}
.row9 .col.pull-l4 {
right: 33.33333%
}
.row9 .col.push-l4 {
left: 33.33333%
}
.row9 .col.offset-l5 {
margin-left: 41.66667%
}
.row9 .col.pull-l5 {
right: 41.66667%
}
.row9 .col.push-l5 {
left: 41.66667%
}
.row9 .col.offset-l6 {
margin-left: 50%
}
.row9 .col.pull-l6 {
right: 50%
}
.row9 .col.push-l6 {
left: 50%
}
.row9 .col.offset-l7 {
margin-left: 58.33333%
}
.row9 .col.pull-l7 {
right: 58.33333%
}
.row9 .col.push-l7 {
left: 58.33333%
}
.row9 .col.offset-l8 {
margin-left: 66.66667%
}
.row9 .col.pull-l8 {
right: 66.66667%
}
.row9 .col.push-l8 {
left: 66.66667%
}
.row9 .col.offset-l9 {
margin-left: 75%
}
.row9 .col.pull-l9 {
right: 75%
}
.row9 .col.push-l9 {
left: 75%
}
.row9 .col.offset-l10 {
margin-left: 83.33333%
}
.row9 .col.pull-l10 {
right: 83.33333%
}
.row9 .col.push-l10 {
left: 83.33333%
}
.row9 .col.offset-l11 {
margin-left: 91.66667%
}
.row9 .col.pull-l11 {
right: 91.66667%
}
.row9 .col.push-l11 {
left: 91.66667%
}
.row9 .col.offset-l12 {
margin-left: 100%
}
.row9 .col.pull-l12 {
right: 100%
}
.row9 .col.push-l12 {
left: 100%
}
}
.container9 {
position: relative;
margin: 0 auto;
padding-right: 15px;
padding-left: 15px;
max-width: 1280px
}
.row9 {
position: relative;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin-right: 0;
margin-left: 0;
width: 100%;
height: auto;
zoom: 1
}
.row9:after,
.row9:before {
display: table;
content: ''
}
.row10 ul li {
float: left;
font-size: 14px;
margin: 0 10px;
overflow: hidden;
}
.footer {
clear: both;
height: 100%;
margin-top: 10px;
padding-bottom: 0px;
/*border-top: 1px solid #eee;*/
}
.footer a {
color: #bbb
}
.footer a:hover {
color: #166df1;
transition: .3s all;
}
.footer h2.logos {
margin: 1rem auto;
max-width: 160px;
color: #ccc;
text-align: center
}
.footer-head {
color: #aaaaaa;
font-size: 14px;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px
}
.cs-footer-links {
margin: 10px 0
}
.cs-footer-links li {
display: block;
padding-bottom: 10px;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
-webkit-transition: all 0.15s ease;
transition: all 0.15s ease
}
.cs-footer-logo img {
max-width: 180px
}
.footer .footer-qrimg {
width: 80px;
height: 80px;
padding: 0;
border: #f5f6f8 3px solid
}
.cs-footer-text {
max-width: 523px;
margin: 20px auto
}
.cs-moble-true,
.cs-moble-false {
padding-top: 30px;
display: block
}
.footer-copyright {
padding-top: 20px;
/*
border-top: 1px solid rgba(172, 172, 172, 0.1);
*/
font-size: 13px;
text-align: center;
color: #acacac
}
@media (min-width: 544px) {
.copyright-links {
text-align: right
}
.copy-text {
text-align: center
}
}
.copyright-links>li {
display: inline-block
}
.copyright-links>li+li {
margin-left: 12px
}
.copyright-links>li>a {
color: #acacac;
letter-spacing: 0.14px
}
@keyframes move {
0% {
transform: translate(-175px, 0px) scale(1, 1)
}
50% {
transform: translate(-87px, 0px) scale(1, 0.5)
}
100% {
transform: translate(0px, 0px) scale(1, 1)
}
}
</style>
<style>
.footer-cus {
padding: 15px 20px;
background: #fff;
overflow: hidden;
margin-bottom: 15px;
}
{
.dingbulan {
display: none;
}
}
.dingbulan {
width: 100%;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #bbb6b6;
line-height: 80px;
letter-spacing: 0.8px;
}
.dingbulan h1 {
font-size: 14px !important;
display: inline;
color: #bbb6b6;
}
.dingbulan span {
padding: 5px 10px;
background: #4387fd;
border-radius: 5px;
color: #ffffff;
margin: 0 5px;
}
</style>
<footer class="footer footer-cus" id="footer">
<div class="footer-copyright">
<div class="container9">
<div class="row9">
<div class="copy-text" style="text-align: center">
<a rel="nofollow" href="/dq" target="_blank">
<font style="color: #A9A9A9;">CMS大全</font>
</a><i>|</i>
<a href="/wz">CMS文章</a><i>|</i>
<a href="/seozs">SEO知识</a><i>|</i>
<a href="#">关于本站</a>
</div>
<div class="copy-text" style="text-align: center">
<p class="tex_cent">CopyRight©2024-2025 <a href="/" target="_blank">维亿CMS资源网</a> All Right Reserved
<img src="/class/newapptheme/static/images/beian.png" style="height:20px;vertical-align:middle;" />
<a href="https://beian.miit.gov.cn/#/Integrated/index" rel="nofollow" target="_blank">互联网ICP备案信息:渝ICP备2022000613号</a>
</p>
</div>
<div class="copy-text" style="text-align: center">
本站收集的信息若侵害到您的利益，请联系我们删除处理,侵权处理邮箱 123456@qq.com
</div>
</div>
</div>
</div>
<div id="toolbar" class="toolbar ">
<div id="totop" class="btn hidden br transition"><i class="iconfont icon-totop"></i></div>
<div class="seting btn active transition">
<i class="layui-icon layui-icon-set-fill" id="openStylePick"></i>
<div class="set-style" id="set-style">
<div class="plant">
<div class="layui-card">
<div class="layui-card-header">风格切换</div>
<div class="layui-card-body">
<div class="layui-form">
<div class="layui-form-item"><label class="layui-form-label">暗夜模式</label><input
type="checkbox" lay-filter="setstyle" name="style" lay-skin="switch"
lay-text="关闭|开启"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script src="/class/newapptheme/static/js/layui.all.js"></script>
<script src="/class/newapptheme/static/js/common.js"></script>
<script src="/class/newapptheme/static/js/index.js"></script>
<script>
if (getCookie('setnight') == '') {
layer.msg('夜深了，您可以打开护眼模式~');
setCookie("setnight", "1", "h12");
}
</script>
<script>
// 添加水印方法
function TpWatermark(CON,H,W,R,C,S,O) {
// 判断水印是否存在，如果存在，那么不执行
if (document.getElementById('tp-watermark') != null) {
return
}
var TpLine = parseInt(document.body.clientWidth/W) * 2; // 一行显示几列
var StrLine = '';
for(var i = 0; i < TpLine; i++){
StrLine += '<span style="display: inline-block; line-height:' + H + 'px; width:' + W + 'px; text-align: center; transform:rotate(' + R + 'deg); color:' + C + '; font-size:'+ S + 'px; opacity:' + O + ';">'+ CON +'</span>'
}
var DivLine = document.createElement("div");
DivLine.innerHTML = StrLine;
var TpColumn = parseInt(document.body.clientHeight/H) * 2; // 一列显示几行
var StrColumn = '';
for(var i = 0; i < TpColumn; i++){
StrColumn += '<div style="white-space: nowrap;">' + DivLine.innerHTML + '</div>';
}
var DivLayer = document.createElement("div");
DivLayer.innerHTML = StrColumn;
DivLayer.id = "tp-watermark"; // 给水印盒子添加类名
DivLayer.style.position = "fixed";
DivLayer.style.top = "10px"; // 整体水印距离顶部距离
DivLayer.style.left = "-100px"; // 改变整体水印的left值
DivLayer.style.zIndex = "99999"; // 水印页面层级
DivLayer.style.pointerEvents = "none";
document.body.appendChild(DivLayer); // 到页面中
}
// 移除水印方法
function RemoveTpWatermark(){
// 判断水印是否存在，如果存在，那么执行
if (document.getElementById('tp-watermark') == null) {
return
}
document.body.removeChild(document.getElementById('tp-watermark'));
}
// 执行添加
TpWatermark('维亿CMS资源网','200','400','-20','red','30','.15');
// TpWatermark(CON,H,W,R,C,S,O); // 值一一对应
// 执行移除
// RemoveTpWatermark();
// 参考文档
// http://sharedblog.cn/post/200.html
</script>
<script>
if (document.getElementsByClassName("article-content").length > 0) {
var newContent = document.getElementsByClassName("article-content")[0].innerHTML.replace(
/<img [^>]*src=['"]([^'"]+)[^>]*>/gi,
function(match, capture) {
//capture,返回每个匹配的字符串
var newStr = '<a class="kuake" href="' + capture +
'" target="_blank" data-fancybox="gallery"> <img src="' + capture + '" alt="" /></a>';
return newStr;
});
document.getElementsByClassName("article-content")[0].innerHTML = newContent;
}
</script>
</body>
</html>
