Modernizr:为HTML5和CSS3而生

10年前,只有最尖端的网站设计师会为网页的布局和修饰使用CSS。那时的浏览器对CSS进行布局的支持即不完善又漏洞百出,所以这些人在坚持WEB标准化的同时,也不得不采用hacks来使得他们的页面在所有浏览器中都能正常显示。其中一个被使用的越来越多的hack技术是浏览器嗅探(browser sniffing),使用Javascript里的navigator.userAgent属性来判断用户使用的是什么品牌哪个版本的浏览器。浏览器嗅探技术可以快捷的将代码进行分支,以便针对不同的浏览器应用不同的指令。

推荐专题:HTML 5 下一代Web开发标准详解

今天,以CSS为基础进行的布局已经非常普遍,浏览器们对它的支持也非常的坚实。但是现在CSS3和HTML5来了,历史转了个圈又回到了原地——各个浏览器对这些新技术的支持又开始变得参差不齐了。我们早都习惯了书写整洁的符合标准的代码,也不会再使用CSS hacks或者浏览器嗅探这些不靠谱又低级的技术。我们也相信越来越多的用户会认同网站不必在所有浏览器里都看起来一样的理念。那面对当下这个熟悉的情形(浏览器支持的不同),我们该怎么做呢?简单:使用特征检测(feature detection),这意味着我们不必通过问浏览器“你是谁?”来做出不靠谱的推测。取而代之,我们问浏览器“你能做这个或那个吗”。这么来检测浏览器的能力是很简便的,但一个个的花时间去手工测试依然令人厌烦。此时Modernizr可以帮助我们。

Modernizr:专为HTML5和CSS3开发的功能检测类库

Modernizr是一个开源的JS库,它使得那些基于访客浏览器的不同(指对新标准支持性的差异)而开发不同级别体验的设计师的工作变得更为简单。它使得设计师可以在支持HTML5和CSS3的浏览器中充分利用HTML5和CSS3的特性进行开发,同时又不会牺牲其他不支持这些新技术的浏览器的控制。

当你在网页中嵌入Modernizr的脚本时,它会检测当前浏览器是否支持CSS3的特性,比如 @font-face、border-radius、 border-image、box-shadow、rgba() 等,同时也会检测是否支持HTML5的特性——比如audio、video、本地储存、和新的 标签的类型和属性等。在获取到这些信息的基础上,你可以在那些支持这些功能的浏览器上使用它们,来决定是否创建一个基于JS的fallback,或者对那些不支持的浏览器进行简单的优雅降级。另外,Modernizr还可以令IE支持对HTML5的元素应用CSS样式,这样开发者就可以立即使用这些更富有语义化的标签了。

Modernizr是基于渐进增强理论来开发的,所以它支持并鼓励开发者一层一层的创建他们的网站。一切从一个应用了Javascript的空闲地基开始,一个接一个的添加增强的应用层。因为使用了Modernizr,所以你容易知道浏览器都支持什么。下面我们来看一个通过应用Modernizr来创建尖端网站的实例。

从应用Modernizr开始

首先从www.modernizr.com下载Modernizr的最新的稳定版(目前国内封了Modernizr的官网,我们可以从github上下载。或者更简单点,可以从堂主这里下载最新的1.7版的脚本文件),在官网上你还可以看到它支持检测的所有特性的清单(本文末位会给出这些清单,以便翻不了墙的童鞋可以知道都支持哪些)。下载完最新版本以后(作者写这篇文章的时候用的是1.5版),把它加入页面的区域:

 
 
 
  1.  
  2.  
  3.  
  4. My Beautiful Sample Page title> </li> <li><script src="modernizr-1.5.min.js"> script> </li> <li> head> </li> <li>… </li> </ol></pre><p>接下来,向元素添加“no-js”的类。</p><p>当Modernizr运行的时候,它会把这个“no-js”的类变为“js”来使你知道它已经运行。Modernizr并不仅仅只做这一件事情,它还会为所有它检测过的特性添加class类,如果浏览器不支持某个特性,它就为该特性对应的类名加上“no-”的前缀。所以,你的元素可能会变得看起来像下面这个样子:</p><p>Modernizr同时还会创建一个JS对象,被命名为“Modernizr”,其内容是为每一个检测完的特性给出的布尔值结果组成的列表。如果浏览器支持新的canvas元素,那么“Modernizr.canvas”的值就是true;如果浏览器不支持这个新元素,那它对应的值就是false。这个JS对象针对某些功能还会包含更为详细的信息,如“Modernizr.video.h264”会告诉你浏览器是否支持这个特殊的编解码器。“Modernizr.inputtypes.search”会告诉你当前浏览器是否支持新的search input类型,等等。</p><p>我们的未加工的简单小页面看起来有点像一个准测试系统了,但它具备更好的语义性和可访问性。让我们为它添加一点基本的样式:一点文字格式、颜色和布局以使它更好看。目前位置,没什么新东西,只是为一个语义化结构的HTML页面添加表现样式,看看添加了样式后的页面。</p><p>下面,我们要增强这个页面使得它更有意思。我想为头部的h1应用一个奇特的文字效果,把关于检测特性的列表分为两栏,然后将带有一张照片的关于Modernizr的部分的一切都弄到右边去。我还要把围绕页面内容的边框变美点。现在,更给力的CSS3使你可以对一条规则添加更多的属性,如果浏览器不支持这些属性,它会忽略它们。配合使用CSS的层叠(继承),你可以不必依赖Modernizr而使用像“border-radius”这样的新属性。不过,使用Modernizr可以为你提供一些既有手段提供不了的功能:根据浏览器对新东西支持的差异动态修改的的类名。我会通过对我们的页面添加2条新的规则来说明这点:</p><pre> <ol> <li>.borderradius #content {  </li> <li>    border: 1px solid #141414;  </li> <li>    -webkit-border-radius: 12px;  </li> <li>    -moz-border-radius: 12px;  </li> <li>    border-radius: 12px;  </li> <li>}  </li> <li>.boxshadow #content {  </li> <li>    border: none;  </li> <li>    -webkit-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;  </li> <li>    -moz-box-shadow: rgba(0,0,0, .5) 3px 3px 6px;  </li> <li>    box-shadow: rgba(0,0,0, .5) 3px 3px 6px;  </li> <li>} </li> </ol></pre><p>第一条规则为“#content ”元素添加了一个12像素的圆角。但在既有的页面里我们已经为“#content ”元素设置了一个属性值为“2px outset #666”的边框,这在box是直角的时候是蛮好看的,但在圆角情况下就不是了。感谢Modernizr,我可以在浏览器支持“border-radius”的情况下给box设置一个1px的实边。</p><p>第二条规则更进步了一点,我们为“#content ”元素添加了一个阴影,并且针对支持“box-shadow”属性的浏览器一并移除了border属性。为什么呢?因为大部分浏览器并不为“边框附带边角”的组合外加阴影这样的效果提供一个好的表现(这是一个应该被注意的浏览器的瑕疵,但我们现在却必须忍受它)。同不使用阴影只使用边框相比,我宁可只使用阴影包围元素。采用这种方式,我可以拥有全世界最好的,准确点的,最好的一种CSS表现:在支持“box-shadow”属性的浏览器里将会呈现一个美妙的阴影;只支持“border-radius”属性的浏览器将会呈现一个好看的圆角薄边框;对于那些这2者都不支持的破烂浏览器,我们会看到一个2像素的直角边框。</p><p>下面我们要为header应用一个自定义的特殊字体,下面的是我们目前针对h1的声明,没改动版的:</p><pre> <ol> <li>h1 {  </li> <li>    color: #e33a89;  </li> <li>    font: 27px/27px Baskerville, Palatino, "Palatino Linotype",  </li> <li>    "Book Antiqua", Georgia, serif;  </li> <li>    margin: 0;  </li> <li>    text-shadow: #aaa 5px 5px 5px;  </li> <li>} </li> </ol></pre><p>这些声明在我们的基础网页里工作良好,27像素的文字大小也很适合我们为h1设置的那些字体的展示。但对于我要用的名叫“Beautiful”的字体来说,27像素就太小了。下面我们要添加其他的规则来使用这个自定义字体:</p><pre> <ol> <li>@font-face {  </li> <li>    src: url(Beautiful-ES.ttf);  </li> <li>    font-family: "Beautiful";  </li> <li>}    </li> <li> </li> <li>.fontface h1 {  </li> <li>    font: 42px/50px Beautiful;  </li> <li>    text-shadow: none;  </li> <li>} </li> </ol></pre><p>首先,我们添加“@font-face”声明,并在其中为我们的自定义字体指定路径、文件名和字体名。之后我们用一条CSS语句为我们的h1选择字体样式。你会看到,我这里选择了一个很大的字号,那是因为“Beautiful”字体本身就比其他字体的文字要小很多,所以我们必须要指示浏览器在展示我们自定义字体的时候,给予h1一个很大的字号。</p><p>此外,我们漂亮的手写体文字在文字阴影方面存在一些渲染问题,所以我们要在浏览器决定使用自定义文字时取消文字的阴影。另外,关于检测特征部分的列表还需要被分为两栏。为了达到目的,我要使用牛叉的CSS columns 属性,这一属性会使浏览器把列表智能分栏而不会打乱它的顺序,而我们的列表,虽然没有数字序号,却也是按照字母顺序排列的。当然,不是所有的浏览器都支持这一属性,对于那些不支持的浏览器,我们使用浮动来达到2栏的目的——使用了浮动后列表在视觉上不会再按照字母顺序排列,但那也好过什么都没有。</p><pre> <ol> <li>.csscolumns ol.features {  </li> <li>    -moz-column-count: 2;  </li> <li>    -webkit-columns: 2;  </li> <li>    -o-columns: 2;  </li> <li>    columns: 2;  </li> <li>  }    </li> <li> </li> <li>.no-csscolumns ol.features {  </li> <li>    float: left;  </li> <li>    margin: 0 0 20px;  </li> <li>  }    </li> <li> </li> <li>.no-csscolumns ol.features li {  </li> <li>    float: left;  </li> <li>    width: 180px;  </li> <li>} </li> </ol></pre><p>我又一次使用了Modernizr来针对不同的情况设置不同的属性。如果浏览器支持CSS columns,它就会把列表完美的分为2栏,如果不支持,通过Modernizr为添加的“no-csscolumns”类我们也可以用浮动的方式使得列表变为两栏,虽然不那么完美,但也比直接来一个长串的单栏列表强。</p><p>这里您可能注意到了我为属性添加了不同的前缀(-moz-、-webkit-、-o-),这是因为不同的浏览器厂商对该功能的实现有不同的定义,所以要实现该功能需要针对不同的浏览器加上它们对应的前缀。</p><p>经过这些改变,我们新的页面看起来更好了。</p><p>我们将为我们的页面添加进更多的渐进式增强效果来结束这篇教程。基于WebKit的浏览器支持一些更牛叉的特效,如CSS变换、动画和三维转换等。并且我想在最后一个阶段的页面中应用一些这类特效。再一次的,这些属性会被添加进我们既有的CSS中并在不支持它们的浏览器中给忽视。所以,针对这种一方面是渐进增强一方面是不被支持的情况,使用Modernizr是恰当的。</p><p>首先设置的:</p><pre> <ol> <li>@-webkit-keyframes spin {  </li> <li>      0% { -webkit-transform: rotateY(0); }  </li> <li>    100% { -webkit-transform: rotateY(360deg); }  </li> <li>}    </li> <li> </li> <li>.csstransforms3d.cssanimations section {  </li> <li>    -webkit-perspective: 1000;  </li> <li>} </li> </ol></pre><p>@keyframes规则是新的CSS animations规范中的一部分,目前只有WebKit支持。它容许你针对任何属性声明一个完整的动画路径,并在你喜欢的任何阶段改变它们。想知道关于animations的更多知识,请阅读 W3C Working Draft specification。</p><p>下面我们添加使得我们一个元素在三维空间里旋转的代码:</p><pre> <ol> <li>.csstransforms3d.cssanimations section h2 {  </li> <li>    background-image: url(modernizr-logo.png);  </li> <li>    overflow: hidden;  </li> <li>    -webkit-animation: spin 2s linear infinite;  </li> <li>} </li> </ol></pre><p>因为logo要转动,且又希望它转的时候和背景相处的融洽些,于是这里用了一个png格式的文件。我还采用了一个“overflow:hidden”属性来隐藏设置了缩进-9999像素的header里的文字。使元素以3D的形式旋转虽然有趣却并不太美观。最终,我们选择使用animation规则,设置它的旋转周期为2秒钟,沿着自身的中轴线旋转,永不停止。</p><p>最终的页面看起来很给力,甚至还针对WebKit浏览器设置了好玩的动画。我希望到现在你能明白使用Modernizr可以使你对网站控制的手腕变得多么牛叉,以及它可以令真正的渐进增强变得多么简单。这还不仅仅是Modernizr的全部好处,它还可以帮你建立基于JS的fallbacks以及可以帮你应用html5那些牛掰的新特性。</p><p><em>原文地址:http://www.mhtml5.com/2011/03/676.html</em></p> <p> 分享文章:<a href="http://www.shufengxianlan.com/qtweb/news7/436807.html">Modernizr:为HTML5和CSS3而生</a> <br> 链接地址:<a href="http://www.shufengxianlan.com/qtweb/news7/436807.html">http://www.shufengxianlan.com/qtweb/news7/436807.html</a> </p> <p> 网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等 </p> <p class="adpic"> <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a> <a href="" target="_blank" class="adimg"><img src=""></a> </p> <p class="copy"> 声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: <a href="https://www.cdcxhl.com/" target="_blank">创新互联</a> </p> </div> <div class="newsmorelb"> <p>猜你还喜欢下面的内容</p> <ul> <li> <a href="/qtweb/news6/436806.html">行业门户网站有哪些</a> </li><li> <a href="/qtweb/news5/436805.html">数据库中如何使用year函数? (数据库中怎么使用year)</a> </li><li> <a href="/qtweb/news4/436804.html">动图演示:如何彻底理解红黑树?</a> </li><li> <a href="/qtweb/news3/436803.html">Linux中查看当前进程ID的方法(linux当前进程id)</a> </li><li> <a href="/qtweb/news2/436802.html">阿里云邮箱网站注册</a> </li><li> <a href="/qtweb/news1/436801.html">Caffe在ARMLinux上的应用探索(caffearmlinux)</a> </li><li> <a href="/qtweb/news0/436800.html">服务器主机适合直播吗?(直播app服务器)</a> </li><li> <a href="/qtweb/news49/436799.html">C++抛出异常技巧讲解</a> </li><li> <a href="/qtweb/news48/436798.html">香港服务器国内cdn租用要注意什么</a> </li> </ul> </div> </div> <div class="col-lg-3 noneb"> <div class="bkright" style="margin-top: 0"> <p><a href="https://www.cdcxhl.com/news/xiangyingshi/">响应式网站知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news26/186676.html">搭建探索Redis集群有哪些搭建方式(redis集群有哪些方式)</a> </li><li> <a class="text_overflow" href="/qtweb/news47/464797.html">独家分享!5个鲜为人知的Pandas技巧</a> </li><li> <a class="text_overflow" href="/qtweb/news10/309660.html">vultr国内怎么买?vultr测试服务器</a> </li><li> <a class="text_overflow" href="/qtweb/news18/98418.html">12123已经备案怎么还显示没有备案?(备案问题(续)-备案平台)</a> </li><li> <a class="text_overflow" href="/qtweb/news7/189807.html">如何去除bom头,java去除bom头_java去除\r\n</a> </li><li> <a class="text_overflow" href="/qtweb/news0/302650.html">Linux下文件压缩与打包:让你的文件管理更加高效便捷</a> </li><li> <a class="text_overflow" href="/qtweb/news2/1502.html">怎么在微信开发小程序上输入用户名和密码显示登录成功</a> </li><li> <a class="text_overflow" href="/qtweb/news40/236590.html">深圳移动服务器租用的利用处景</a> </li><li> <a class="text_overflow" href="/qtweb/news1/332301.html">网站服务器租用价格一般多少钱?广东电信机房服务器托管价格</a> </li><li> <a class="text_overflow" href="/qtweb/news31/189831.html">linux安装mysql数据库以及配置Java项目的图文详解</a> </li><li> <a class="text_overflow" href="/qtweb/news4/437104.html">待定系数法是什么</a> </li><li> <a class="text_overflow" href="/qtweb/news36/83486.html">word里面隶书是什么意思</a> </li><li> <a class="text_overflow" href="/qtweb/news43/204843.html">五大代码异味:你需要提高警惕了!</a> </li><li> <a class="text_overflow" href="/qtweb/news34/67584.html">个人域名怎么备案(个人域名怎么备案过审)</a> </li><li> <a class="text_overflow" href="/qtweb/news22/390872.html">美国服务器性能稳定吗?</a> </li> </ul> </div> <div class="bkright tag"> <p><a href="https://www.cdcxhl.com/hangye/" target="_blank">分类信息网</a></p> <ul> <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/hangkongxiang/" target="_blank">航空箱</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/dibang/" target="_blank">地磅秤</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/hwxxy/" target="_blank">户外休闲椅</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/opp/" target="_blank">OPP胶袋</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/suliaodai/" target="_blank">塑料袋</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/mbzx/" target="_blank">木包装箱</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/chalousj/" target="_blank">茶楼设计</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/muzhiliangting/" target="_blank">木制凉亭</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ggzz/" target="_blank">广告制作</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/shilongwang/" target="_blank">石笼网</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bolixiufu/" target="_blank">汽车玻璃修复</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/sljbc/" target="_blank">生料搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/zbljbc/" target="_blank">自拌料搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/zdfhw/" target="_blank">主动防护网</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/shipindai/" target="_blank">食品包装袋</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/xiaojbc/" target="_blank">小搅拌车</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="https://www.cdxwcx.com/cloud/" target="_blank">云服务器</a>    <a href="https://www.cdcxhl.com/douyin/" target="_blank">短视频拍摄</a>    <a href="https://www.cdcxhl.com/gaiban/chengdu.html" target="_blank">成都网站改版公司</a>    <a href="https://www.djxuejia.com/" target="_blank">长城雪茄</a>    <a href="http://m.cdcxhl.cn/applets/ " target="_blank">成都小程序开发</a>    <a href="http://www.cdhuace.com/zhuangxiu.html" target="_blank">成都工装公司</a>    <a href="http://chengdu.cdcxhl.cn/dingzhi/ " target="_blank">高端定制网站设计</a>    <a href="http://www.cxhlcq.com/mobile/" target="_blank">重庆移动网站建设</a>    <a href="https://www.cdxwcx.com/wangzhan/mbshangcheng.html" target="_blank">模板商城网站</a>    <a href="http://m.xwcx.net/wangzhan/" target="_blank">成都定制高级网站建设</a>    <a href="http://www.cdhuace.com/zhangui.html" target="_blank">成都展柜设计公司</a>    <a href="https://www.cdcxhl.com/ssl/chengdu.html" target="_blank">SSL认证</a>    <a href="http://www.cdxwcx.cn/tuoguan/yidong.html" target="_blank">移动机房服务器托管</a>    <a href="http://www.scpengxi.com/" target="_blank">蓬溪网站建设</a>    <a href="http://seo.cdcxhl.cn/" target="_blank">成都网站推广</a>    <a href="https://www.cdxwcx.com/tuiguang/" target="_blank">成都SEO优化</a>    <a href="http://www.sczjjygc.com/" target="_blank">中建建业环保</a>    <a href="https://www.cdxwcx.com/wangzhan/shop.html" target="_blank">电商网店</a>    <a href="http://www.jinhuajc.com/" target="_blank">橡塑保温管</a>    <a href="http://www.scmtp.cn/" target="_blank">子晨木包装箱</a>     </div> </div> <footer> <div class="carousel-inner footjz"> <div class="container"> <i class="icon iconfont zbw"></i> 高品质定制 <i class="icon iconfont"></i> 跨终端自动兼容 <i class="icon iconfont"></i> 节约开发成本 <i class="icon iconfont"></i> 开发周期短 <i class="icon iconfont"></i> 一体化服务 <button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始2800定制网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</button> </div> </div> <div class="carousel-inner bqsy"> <div class="container"> <div class="lxfs"> <h4 class="yutelnone">028-86922220 13518219792</h4> <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4> <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>:532337155</a> <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>:631063699</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>:532337155</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>:631063699</a> <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ:1683211881</a> <div class="dz">创新互联建站专注: <a href="https://www.cdcxhl.com/" target="_blank">网站设计</a> <a href="https://www.cdcxhl.com/" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" target="_blank">网站建设</a> <address>地址:成都太升南路288号锦天国际A幢10楼</address> </div> </div> <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联"> <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br> Tel:400-028-6601(7x24h)</p></div> </div> </div> </footer> </body> </html> <script> $.getJSON ("../../qtwebpic.txt", function (data) { var jsonContent = { "featured":data } var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)]; $(".adpic .adimg").attr("href",random.link) $(".adpic img").attr("src",random.pic); }) </script>