web前端开发中各种图片引入方式及其优缺点一路向北√|食谱图片背景图_食谱

前端开发人员在构建网站时需要做的一个决定是引入图片的方式。它可以是标签，或者是通过CSSbackground属性，还可以使用SVG。选择正确的方式是很重要的，它对性能和可访问性有很大的影响。

在本文中，我们会学习引入图像的各种方式，以及每种方式的优点和缺点，以及何时使用和为什么使用它们。

最简单的情况下，img元素必须包含src属性:

1、设置宽度和高度属性

在页面加载时，它们会在页面图像加载时发生一些布局变化。为了避免这种情况，我们可以为它设置width和height属性:

虽然对某些人来说，这可能看起来有点过时，但它是有用的。让我们用图片来清楚地理解这个概念：

你注意到了吗，右边的图片即使还没有加载也会保留其空间吗？这是因为宽度和高度已经设置好了。它有明显的区别！

2、通过CSS隐藏图像

可以用CSS隐藏图片，但是它仍然会被加载到页面中。因此，在执行此操作时请小心，如果一个图片应该被隐藏，那么它可能是出于装饰的目的。

3、可访问性问题

HTML图片应该通过将alt属性设置为有意义的描述来访问，这对屏幕阅读器用户来说是非常有帮助的。

但是，如果不需要alt描述，请不要删除，如果删除了就会读出图片的src！这对可访问性(无障碍)环境是非常不利的。

不仅如此，如果图片因为某种原因没有加载，并且它有一个明确的alt，它将作为一个备用值回退显示。既然有一些有趣的事情我想让大家知道，那我们就从视觉上说说吧。

我们有以下图片：

当src无效，图片没有加载时。第一个没有alt属性，而第二个是空的alt属性，下面是它们的视觉效果：

没有alt的图片仍然保留了它的空间，这很混乱，而且不利于访问。虽然另一个折叠了，以适应其空的alt属性的内容，但由于它的边框，导致了它作为一个小点出现。

但是，当alt属性有值，它看起来是这样的：

这不是一个很好的反馈吗此外，当图像源失败时，可以向它们添加伪元素。

4、响应式图像

的优点在于可以针对特定视口大小将其扩展为具有多个版本的照片。我们有两种不同的方式来生成一组响应式图像：

1)、srcset属性

这很简单。对我来说，srcset可以根据屏幕宽度显示多个图像尺寸，这并不是一种完美的解决方案。它让浏览器选择合适的图像，而我们对此无能为力。

2)、HTMLpicture元素

另一种选择是使用元素。我更喜欢这种方式，因为它更容易预测。

5、调整图像大小

object-fit值有：fill,contain,cover,none,scale-down。例如：

img{object-fit:cover;object-position:50%50%;}CSS背景图片使用CSS背景显示图像时，它需要一个具有内容或特定宽度或高度的元素。通常，背景图像的主要用途应该是用于装饰目的。

1、何使用CSS背景图片

首先，我们需要一个元素

Somecontent

.element{background:url('cool.jpg');}2、多个背景

使用CSS背景图片的好处是可以设置多个背景。考虑以下示例：

.element{background:url('cool-1.jpg'),url('cool-2.jpg');}3、隐藏图像

我们可以在特定的视口上隐藏和显示图片，而不会让图片被下载。如果未使用CSS设置图片，则不会下载该图片。这是比使用更多的好处。

@media(min-width:700px){.element{background:url('cool-1.jpg');}}在上面的示例中，我们有一个背景图像，仅在视口宽度大于700px时显示。

4、可访问性问题

5、非开发人员无法下载

你可能会觉得很有趣，但是普通人知道，如果要保存图像，只需单击鼠标左键，然后选择保存即可。CSS背景图片并非如此，我们必须先检查元素，然后在DevTools中的url中打开链接，然后才能下载随CSS添加的图像。

6、伪元素

可以使用伪元素与CSS背景图片一起使用，例如，在图片的顶部显示一个叠加元素。对于来说，除非我们为覆盖层添加一个单独的元素，否则无法做到这一点。

SVG被认为是一种图像，它最大的功能是在不影响质量的情况下进行缩放。此外，使用SVG，我们可以嵌入JPG、PNG或SVG图像。参见下面的HTML:

你是否注意到了prepareAspectRatio？这样一来，可以使图像占据SVG的整个宽度和高度，而不会被拉伸或压缩。

当宽度较大时，它将填充其父级（SVG）宽度而不会拉伸。

这非常类似于CSS中的object-fit:cover或background-size:cover。

1、可访问性问题

关于SVG的可访问性，这使我想起了元素。例如，我们可以像下面这样添加它：</p><p>在检查元素并复制图像的URL之前，不可能下载嵌入到SVG中的图像。然而，如果我们想要阻止用户下载特定的图像，这可能是一件好事。至少，它将减少下载图像的机会很容易。</p><p>1、HeroSection</p><p>在构建herosection时，有时我们需要在标题和其他内容下方的图像。参见下图：</p><p>注意这里有一个图像。你将如何构建它？好吧，让我先补充一些要求：</p><p>在开始解决方案之前，让我们先问问自己这种背景的性质。这是一些入门问题：</p><p>Hero-解决方案1</p><p>通过使用多个CSS背景，我们可以将一个背景作为叠加层，将另一个背景作为实际图像。请看下面的CSS：</p><p>.hero{background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),var('landscape.jpg');background-repeat:no-repeat;background-size:100%,cover;}虽然此解决方案有效，但可以使用JavaScript动态更改背景图片。见下面：</p><p><sectionclass="hero"style="background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('landscape.jpg');"></section>我添加了一个内联的CSS背景。虽然这是可行的，但它看起来很丑，而且不实用。</p><p>也许我们可以使用CSS变量？让我们来探索一下。</p><p>现在，我们可以轻松地更新--bg-url变量来动态更改背，这比内联的东西好一百万倍。</p><p>解决方案1要点：</p><p>Hero-解决方案2</p><p>该方案是可以使用一个img标签：</p><p><sectionclass="hero"><h2class="hero__title">UsingImagesinCSS</h2><pclass="hero__desc">Anarticleaboutwhichandwhentouse</p><imgsrc="landscape.jpg"alt=""></section>在CSS中，我们需要将图片绝对定位在内容下方，并且还需要使用伪元素作为叠加层。</p><p>.hero{position:relative;}.heroimg{position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;object-fit:cover;}.hero:after{content:"";position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;background:rgba(0,0,0,0.4);}此解决方案的优点在于，可以轻松更改图片的src属性。同样，如果图像很重要，它将会更加有用。</p><p>另外，我喜欢使用HTML<img>的地方是可以在图片没有加载的情况下添加一个回退方法，这个回退至少可以保持内容的可读性。</p><p>好处是，只有在图像源失败的情况下，背景才会起作用。那不是很酷吗？</p><p>2、网站Logo</p><p>网站Logo是很重要的，因为它可以将网站与其他网站区分开。要嵌入Logo，我们有一些选择：</p><p>让我们学习使用哪种技术以及如何选择合适的技术。</p><p>带有很多细节的Logo</p><p>当一个LOGO有很多细节或形状时，用内嵌式SVG可能没有那么多好处。我建议使用<img>，图片类型可以是png、jpg或svg。</p><p>我们有一个简单的logo，其中包含形状和文字。悬停时，形状和文本需要更改颜色。怎么做？对我来说最好的解决方案是使用嵌入式SVG。</p><p>HTML</p><p>响应式Logo</p><p>这让我想起了SmashingMagazine的logo。我喜欢它从一个小图标变成一个完整的Logo。参见下面的模型：</p><p>完美的解决方案是使用<picture>元素，可以在其中添加logo的两个版本。如下所示：</p><p>.logo{display:inline-block;width:45px;}@media(min-width:1350px){.logo{width:180px;}}这是简单而直接的解决方案。</p><p>带有渐变的Logo</p><p>当logo具有渐变时，从Illustrator或Sketch等设计应用程序将其导出的过程可能并不完美，有时会中断。</p><p>使用SVG，我们可以轻松地为logo添加渐变。我添加了<linearGradient>并将其用作文本填充。</p><p>3、用户头像</p><p>对于用户头像，它们具有很多形状，但最常见的是矩形或圆形。在此用例中，会介绍一个对你有用的重要技巧。</p><p>首先，让我们看下面的模型。请注意，我们有一个完美的化身，并且100％清晰。</p><p>但是，当用户上传半白色头像或非常浅的头像时，这个设计就不太好了。</p><p>注意到上面的模拟图中，你要真的聚焦好了才知道里面有一个圆形。这就是一个问题，为了解决这个问题，我们应该在头像内部添加一个边框，这将是在图像太亮的情况下作为备用。</p><p>我们有几个选择</p><p>哪一个最好？我们来探索探索。</p><p>使用HTML<img></p><p>你可能首先想到的是添加一个边框，对吧让我们来探讨一下这个问题。</p><p>我们的目标是使内部边框与图像融合在一起，这种不太实用。</p><p>使用具有<div>的<img></p><p>现在的问题是，要添加内部边框，我们不能使用box-shadow，因为它无法在图像上使用。解决方案用<div>包裹头像中，并添加专用于内部边框的元素。</p><p><divclass="avatar-wrapper"><imgclass="avatar"src="shadeed2.jpg"alt="AphotoofAhmadShadeed"><divclass="avatar-border"></div></div>CSS</p><p>.avatar-wrapper{position:relative;width:150px;height:150px;}.avatar-border{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;border:2pxsolidrgba(0,0,0,0.1);}通过在<div>上设置一个10%的黑色边框，我们可以确保边框与暗色图像融合，只有在图像颜色较浅的情况下，边框才会显现出来。请看下面的模拟图。</p><p>如果我要使用<div>来显示头像，则可能表示该图像具有装饰性。我记得一个用例，它是分散在页面中的随机头像。</p><p><divclass="avatar"style="--img-url:url(shadeed2.jpg)"></div>CSS</p><p>4、带图标的输入框</p><p>通常会看到带有图标的输入框，如何添加？当输入被聚焦时会发生什么？让我们来探索一下。</p><p><p><labelfor="name">Fullname</label><inputtype="text"id="name"></p>对我来说，处理这种情况的最佳解决方案是CSS背景图片。简单，快捷，不需要添加更多元素。</p><p>5、CSS打印</p><p>用户可能需要打印web页面。假设我们有一份食谱，你想把它打印出来，这样你就可以在厨房里看它，而不需要查看你的手机或电脑。</p><p>对于包含说明性步骤的菜谱，重要的是将它们打印出来，否则用户将无法从打印web页面中获得任何好处。</p><p>避免使用图像作为CSS背景</p><p>当一个图像作为CSS背景被包含进来时，它不会被打印出来，取而代之的是一个空白区域。如下图所示：</p><p>就是这样的情况。我们可以通过强制浏览器显示图片来解决这个问题，虽然这对Firefox和IE来说不起作用。</p><p>.element{background:url('cheesecake.png')center/coverno-repeat;-webkit-print-color-adjust:exact;/*强制浏览器以打印模式呈现背景*/}但是，使用HTML<img>会更安全，因为它可以打印而不会出现任何问题。</p> <script src="/wp-content/themes/zibll/ggjs/2.js"></script> </div> <div class="text-center theme-box muted-3-color box-body separator em09">THE END</div> </div> </article> <div class="widget_text zib-widget widget_custom_html"> <div class="textwidget custom-html-widget"> <div class="theme-box" style="height:99px"> <nav class="article-nav"> <div class="main-bg box-body radius8 main-shadow"> <a href="#"> <p class="muted-2-color"><i class="fa fa-angle-left em12"></i><i class="fa fa-angle-left em12 mr6"></i>上一篇</p> <div class="text-ellipsis-2">已是第一篇文章</div> </a> </div> <div class="main-bg box-body radius8 main-shadow"> <a href="https://www.shdbkk.com/html_3/shipu/19968/list/2.html"> <p class="muted-2-color">下一篇<i class="fa fa-angle-right em12 ml6"></i><i class="fa fa-angle-right em12"></i></p> <div class="text-ellipsis-2">幼儿园大班公开课教案三篇</div> </a> </div> </nav> </div> </div> </div> <div class="widget_text zib-widget widget_custom_html"> <div class="textwidget custom-html-widget"> <div class="theme-box"> <div class="box-body posts-mini-lists zib-widget"> <ul class="list-inline scroll-x mini-scrollbar tab-nav-theme"> <li class="active"><a class="post-tab-toggle" data-toggle="tab" href="javascript:;" tab-id="post_mini_0">相关文章</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade active in" tab-id="post_mini_0"> <div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.shdbkk.com/html_3/shipu/19968/list/1.html" rel="noopener">web前端开发中各种图片引入方式及其优缺点一路向北√<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.shdbkk.com/html_3/shipu/19968/list/2.html" rel="noopener">幼儿园大班公开课教案三篇<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.shdbkk.com/html_3/shipu/19968/list/3.html" rel="noopener">必备幼儿园教案模板（通用12篇）<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.shdbkk.com/html_3/shipu/19968/list/4.html" rel="noopener">幼儿园发展规划策划方案（通用11篇）<span class="focus-color"></span></a></h2></div></div><div class="posts-mini "><div class="posts-mini-con flex xx flex1 jsb"><h2 class="item-heading text-ellipsis icon-circle"><a target="_blank" href="https://www.shdbkk.com/html_3/shipu/19968/list/5.html" rel="noopener">活动计划（精选10篇）<span class="focus-color"></span></a></h2></div></div> </div> </div> </div> </div> </div> </div> <div class="theme-box"> <div class="swiper-bulletin c-green radius8"> <div class="new-swiper" data-interval="5000" data-direction="vertical" data-loop="true" data-autoplay="1"> <div class="swiper-wrapper"> <div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>1.菜谱背景菜谱背景图片菜谱背景素材觅知网为您找到479个原创菜谱背景设计图片,包括菜谱背景图片,菜谱背景素材,菜谱背景海报,菜谱背景,菜谱背景模板源文件下载服务,包含PSD、PNG、JPG、AI、CDR等格式素材,更多关于菜谱背景素材、图片、海报、背景、插画、配图、矢量、UI、PS、免抠,模板、艺术字、PPT、https://www.51miz.com/so-sucai/1583809.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>2.好看的菜谱背景图片高清下载菜谱背景图片高清简约风大全熊猫办公精心为您整理了80张适用于各种场景的精品菜谱背景图片,想要下载好看好用的菜谱背景图素材,更多背景壁纸、高清图片、动态背景模板,就到熊猫办公。https://www.tukuppt.com/speciall/caipu4346.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>3.食谱图片图片免费下载食谱图片素材食谱图片海报新图网是专注免费商用设计素材下载的网站,提供食谱图片,食谱图片图片,食谱图片素材, 食谱图片图标,食谱图片海报等免费下载服务!https://ixintu.com/all/shiputupian.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>4.菜谱的背景图片菜谱的背景素材菜谱的背景模板免费下载六图网为您提供1167090张菜谱的背景设计作品免费下载服务,您还可以找到菜谱的背景图片、菜谱的背景素材、菜谱的背景模板等设计素材,我们为您提供菜谱的背景图片下载,菜谱的背景模板下载、菜谱的背景素材下载等服务!https://m.16pic.com/sucai/34544.html?from=singlemessage</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>5.幼儿园食谱背景图片幼儿园食谱展板背景图片幼儿园展板相关设计素材下载,包含食谱、卡通食品、食品背景、食谱挂图,3a图网提供幼儿园食谱背景等资源分享。https://www.aaatu.com/shejisucai/3228669522.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>6.食谱背景图片PPT模板找原创食谱背景图片PPT模板,就来当图网,提供各种风格的食谱背景图片PPT模板下载,更多精美PPT模板,PPT美化服务,尽在当图网!https://www.99ppt.com/ppt/2858994.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>7.饭店菜谱背景背景素材图片饭店菜谱背景背景图片下载觅元素是设计素材的免费下载网站,提供饭店菜谱背景图片,饭店菜谱背景jpg、png素材,饭店菜谱背景素材免费下载就来觅元素。https://www.51yuansu.com/soback/fandiancaipubeijing.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>8.今日食谱背景专题模板今日食谱背景图片素材下载我图网今日食谱背景专题为您整理了2769个原创高质量今日食谱背景图片素材供您在线下载,PSD/JPG/PNG格式今日食谱背景模板下载、高清今日食谱背景图片大全等,下载图片素材就上我图网。https://so.ooopic.com/sousuo/19411642/</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>9.食谱手绘背景图素材ppt食谱手绘背景图素材ppt模板PPT千库网提供精品食谱手绘背景图素材PPT模板免费下载,各类高端大气逼格食谱手绘背景图素材PPT模板,致力于您在商业策划、报告总结、教育培训、公务党建等方面的演示模板和文稿需求。下载精美食谱手绘背景图素材PPT模板图片就来千库网https://588ku.com/ppt/104485550.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>10.幼儿园食谱背景图片免费下载幼儿园食谱背景素材千图网为您找到887张幼儿园食谱背景相关素材,千图网还提供幼儿园食谱背景图片,幼儿园食谱背景素材, 幼儿园食谱背景模板等免费下载服务,千图网是国内专业创意营销服务交易平台,一站式解决企业营销数字化、协同化,实现营销转化效果增长!https://www.58pic.com/tupian/youeryuanshipubeijing.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>11.学校周食谱图片学校周食谱设计素材红动中国素材网提供20个学校周食谱图片、学校周食谱素材、学校周食谱背景、学校周食谱模板、学校周食谱海报等PS素材下载,包含PSD、AI、PNG、JPG、CDR等格式源文件素材,更多精品学校周食谱设计素材下载,就来红动中国,最后更新于2024-11-22 22:38:42。https://so.redocn.com/xuexiao/d1a7d0a3d6dccab3c6d7.htm</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>12.小红书怎么设置主页背景图小红书设置主页背景图方法教程小红书怎么设置主页背景图?小红书里大家可以很轻松的看到各种教程,日常以及食谱 ,穿搭等内容,还可以轻松的交友 ,还可以进行个性化的设置,比如设置背景图,下面就一起来看看具体的操作吧! 1、打开软件,选择下方的我。 2、然后进入个人中心选择编辑资料。 https://g.pconline.com.cn/x/162/16231573.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>13.前端开发中如何将文件夹中的图片变为背景图你可能会觉得很有趣,但是普通人知道,如果要保存图像,只需单击鼠标左键,然后选择保存即可。CSS背景图片并非如此。您必须先检查元素,然后在DevTools中的url中打开链接,然后才能下载随CSS添加的图像。 2.6 伪元素可以使用伪元素与CSS背景图片一起使用,例如,在图片的顶部显示一个叠加元素。对于 https://blog.csdn.net/weixin_39806818/article/details/110934646</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>14.烧菜背景图片烧菜背景素材烧菜底图摄图网烧菜背景图片专题为您提供高质量烧菜背景素材,烧菜背景图片,烧菜底图等背景图下载,所有背景图均有版权可放心下载商用https://699pic.com/beijing/shaocai.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>15.淘宝活动方案卖家可以在店铺首页设置大促承接页大图以及大促承接页的背景图(主要是烘托双十二活动氛围)。而大促承接页的可选模块为:店铺优惠模块、1212预售商品模块、1212促销宝贝模块以及自定义内容区。以上四个模块为商家可以选择是否展示的(即商家可以编辑,修改及删除的模块)。而大促承接页还有热卖商品模块,将自动提取店铺热卖的40https://www.wenshubang.com/fangan/2398856.html</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>16.2018级老年服务与管理专业人才培养方案(一)课程体系结构图 (二)实践教学体系实践教学以学校仿真环境和养老机构真实环境为依托,以职业能力培养为主线构建实践教学体系,遵循老年照护职业岗位能力培养的基本规律,开展课程教学、仿真实训和临床实习。技能训练由简单到复杂、由单项到综合、由仿真实训到养老机构实习,在不断深入的职业实践过程中,培养学生的综合职业https://jwc.wfhlxy.com/info/1023/1358.htm</div><div class="swiper-slide notice-slide"><div class="relative bulletin-icon mr6"><i class="abs-center fa fa-copy"></i></div>17.图片114最新免费素材[2024-11-21]psd户型图 [2024-11-21]复古黄色 [2024-11-21]刻苦钻研 [2024-11-21]粉色会员卡 [2024-11-21]学习报告 [2024-11-21]酒吧酒水单模板 [2024-11-21]酒店首页 [2024-11-21]亮化素材 [2024-11-21]古风背景素材 [2024-11-21]门业公司名片 [2024-11-21]男士图片背景 [2024-11-21]十二生https://www.tupian114.com/remensousuo</div> </div> </div> </div> </div> </div> </div> </main> <div class="container fluid-widget"></div> <footer class="footer"> <div class="container-fluid container-footer"> <ul class="list-inline"> <li class="hidden-xs" style="max-width: 300px;"> <p><a class="footer-logo" href="" title=""> <img src="/wp-content/themes/zibll/img/thumbnail-sm.svg" data-src="/wp-content/themes/zibll/img/logo_dark.png" switch-src="/wp-content/themes/zibll/img/logo.png" alt="生活大百科" class="lazyload" style="height: 40px;"> </a></p> <div class="footer-muted em09">生活大百科仅供用于学习和交流，欢迎您的体验。</div> </li> </ul> </div> </footer> <script type="text/javascript"> window._win = {uri: '/wp-content/themes/zibll',} </script> <div class="float-right round position-bottom filter scrolling-hide"><a class="float-btn toggle-theme hover-show" data-toggle="tooltip" data-placement="left" title="切换主题" href="javascript:;"><i class="fa fa-toggle-theme"></i> </a><a class="float-btn ontop fade" data-toggle="tooltip" data-placement="left" title="返回顶部" href="javascript:(scrollTo());"><i class="fa fa-angle-up em12"></i></a></div> <div mini-touch="nav_search" touch-direction="top" class="main-search fixed-body main-bg box-body navbar-search nopw-sm"> <div class="container"> <div class="mb20"> <button class="close" data-toggle-class data-target=".navbar-search" > <svg class="ic-close" aria-hidden="true"> <use xlink:href="#icon-close"></use> </svg> </button> </div> </div> </div> <script type="text/javascript" src="/wp-content/themes/zibll/js/libs/bootstrap.min.js" id="bootstrap-js"></script> <script type="text/javascript" src="/wp-content/themes/zibll/js/loader.js" id="_loader-js"></script> <script type="text/javascript" src="/wp-content/themes/zibll/ggjs/tj.js"></script> </body> </html>