十分钟迁移到Thymeleaf 3
如果你是打算从Thymeleaf2迁移到Thymeleaf3的用户。首先，一个好消息是你当前的Thymeleaf模板与Thymeleaf3完全兼容。所以，如果要进行迁移，你只要做一些配置上的修改。
Thymeleaf 3.0 BETA版本是稳定且完全覆盖2.1版本的特性，所以，推荐你进行升级。因为新版本的性能更好而且有许多新的特性。
唯一的问题是，不是所有的Thymeleaf方言（dialect）都迁移到了Thymeleaf 3中。因此，在迁移前要做好这方面的兼容性检查。
下面来介绍一下Thymeleaf 3中的一些变化和特性。
1. 模板变化
唯一的变化是，推荐你去掉模板中的 th:inline=“text” 属性。因为在HTML或XML模板中，不再需要该属性去支持文本中内联表达式的特性。当然，只是推荐你去去掉该属性，不去掉，你原来模板一样可以工作。去掉的好处是会给你带来执行性能方面的提升。
详细信息可参见下文的 内联机制 部分。
2. 配置变化
看一个thymeleaf-spring4集成的配置文件例子。
首先你需要更新Maven依赖
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.0.BETA02</version></dependency><dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring4</artifactId>
<version>3.0.0.BETA02</version></dependency>
Copier après la connexion
然后是spring 配置
@Configuration@EnableWebMvc@ComponentScan("com.thymeleafexamples")
public class ThymeleafConfig extends WebMvcConfigurerAdapter implements ApplicationContextAware
{
private ApplicationContext applicationContext;
public void setApplicationContext(ApplicationContext applicationContext) {
this.applicationContext = applicationContext;
} @Bean
public ViewResolver viewResolver()
{
ThymeleafViewResolver resolver = new ThymeleafViewResolver();
resolver.setTemplateEngine(templateEngine());
resolver.setCharacterEncoding("UTF-8");
return resolver;
}
private TemplateEngine templateEngine() {
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.setTemplateResolver(templateResolver());
return engine;
}
private ITemplateResolver templateResolver()
{
SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
resolver.setApplicationContext(applicationContext);
resolver.setPrefix("/WEB-INF/templates/");
resolver.setTemplateMode(TemplateMode.HTML);
return resolver;
}}Copier après la connexion
与Thymeleaf 2相比，第一个区别是，现在推荐的模板解析类是 SpringResourceTemplateResolver。该类依赖于 Spring的ApplicationContext 上下文。因此，你的配置类需要实现 ApplicationContextAware 接口。
第二个区别是。提供了TemplateMode.HTML 枚举常量。模板类型的方法参数不再是string类型的。
如果你需要添加其他方言，可以通过engine.addDialect(…)方法，当然你需要先确认Thymeleaf 3是否支持。
你可以到官方下载一些集成配置的例子。
Thymeleaf 3 + Spring 4 + Java config example
Thymeleaf 3 + Spring 4 + XML config example
Thymeleaf 3 + Servlet 3 example
3. 完整的HTML5 标记支持
Thymeleaf 3.0 不再是基于XML结构的。由于引入新的解析引擎，模板的内容格式不再需要严格遵守XML规范。即不在要求标签闭合，属性加引号等等。当然，出于易读性考虑，还是推荐你按找XML的标准去编写模板。
下面的代码在Thymeleaf 3.0里是合法的：
<p><p th:text=${mytext} ng-app>WhateverCopier après la connexion
4. 模板类型
Thymeleaf 3 移除了之前版本的模板类型，新的模板类型为：
HTML
XML
TEXT
JAVASCRIPT
CSS
RAW
2个标记型模板(HTML和XML)，3个文本型模板(TEXT, JAVASCRIPT和CSS) 一个无操作(no-op)模板 (RAW)。
HTML模板支持包括HTML5，HTML4和XHTML在内的所有类型的HTML标记。且不会检查标记是否完整闭合。此时，标记的作用范围按可能的最大化处理。
4.1 文本型模板
文本型模板使得Thymeleaf可以支持输出CSS、Javascript和文本文件。在你想要在CSS或Javascript文件中使用服务端的变量时；或者想要输出纯文本的内容时，比如，在邮件中，该特性是否有用。
在文本模式中使用Thymeleaf的特性，你需要使用一种新的语法，例如：
[# th:each="item : ${items}"] - [# th:utext="${item}" /][/]Copier après la connexion
4.2 增强的内联机制
现在可无需额外的标签，直接在文本中输出数据：
This product is called [[${product.name}]] and it's great!
详见：Inlined output expressions 关于内联机制的讨论： Refactoring of the inlining mechanism
5. 片段（Fragment）表达式
Thymeleaf 3.0 引入了一个新的片段表达式。形如：~{commons::footer}。
该特性十分有用（真的是是否有用，直接解决了一直困扰我的定义通用的header和footer的问题）。直接看例子来理解一下该语法吧：
<head th:replace="base :: common_header(~{::title},~{::link})">
<title>Awesome - Main</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}"></head>Copier après la connexion
这里，将两外另个包含
和<link>标签的片段作为参数传递给了common_header片段，在common_header中使用如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">head th:fragment="common_header(title,links)">
<title th:replace="${title}">The awesome application</title>
<!-- Common styles and scripts -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
<!--/* Per-page placeholder for additional links */-->
<th:block th:replace="${links}" /></head></pre><div class="contentsignin">Copier après la connexion</div></div><p>渲染出结果如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head>
<title>Awesome - Main</title>
<!-- Common styles and scripts -->
<link rel="stylesheet" type="text/css" media="all" href="/awe/css/awesomeapp.css">
<link rel="shortcut icon" href="/awe/images/favicon.ico">
<script type="text/javascript" src="/awe/sh/scripts/codebase.js"></script>
<link rel="stylesheet" href="/awe/css/bootstrap.min.css">
<link rel="stylesheet" href="/awe/themes/smoothness/jquery-ui.css"></head></pre><div class="contentsignin">Copier après la connexion</div></div><p>6. 无操作标记（token）</p><p>Thymeleaf 3.0 另一个新的特性就是无操作（NO-OP no-operation）标记，下划线”_”，代表什么也不做。</p><p>例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><span th:text="${user.name} ?: _">no user authenticated</span></pre><div class="contentsignin">Copier après la connexion</div></div><p>当user.name 为空的时候，直接输出标签体中的内容：no user authenticated。该特性让我们可以直接使用原型模板中的值作为默认值。</p><p>该特性详细资料参考： The NO-OP token</p><p>7 模板逻辑解耦</p><p>Thymeleaf 3.0 允许 HTML和XML模式下的模板内容和控制逻辑完全解耦。</p><p>例如，在3.0版本里，一个“干净”的home.html模板内容如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE html><html>
<body>
<table id="usersTable">
<tr>
<td class="username">Jeremy Grapefruit</td>
<td class="usertype">Normal User</td>
</tr>
<tr>
<td class="username">Alice Watermelon</td>
<td class="usertype">Administrator</td>
</tr>
</table>
</body></html></pre><div class="contentsignin">Copier après la connexion</div></div><p>我们只需额外定义一个home.th.xml文件，就可以把之前的home.html文件当作Thymeleaf模板来使用，内容如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><?xml version="1.0"?><thlogic>
<attr sel="#usersTable" th:remove="all-but-first">
<attr sel="/tr[0]" th:each="user : ${users}">
<attr sel="td.username" th:text="${user.name}" />
<attr sel="td.usertype" th:text="#{|user.type.${user.type}|}" />
</attr>
</attr></thlogic></pre><div class="contentsignin">Copier après la connexion</div></div><p>逻辑解耦时，指定的属性会在模本解析的过程中插入指定的位置。通过sel属性指定选择器。</p><p>逻辑解耦，意味着可以使用纯HTML文件作为设计模板，允许设计人员不再需要具备Thymeleaf的相关知识。 详细介绍： Decoupled Template Logic</p><p>8. 性能提升</p><p>除了之前提到的特性之外，Thymeleaf 3.0 的另外一个重要突破就是有明显的性能提升。</p><p>2.1版本之前采用的基于XML的模板引擎，虽然有助于实现很多的特性，但是在有些情况下也造成了性能的损失。在绝大多数的项目里Thymeleaf的渲染时间是几乎可以忽略不计的，这也就凸显出来了Thymeleaf在某些特定情景下的性能问题。(例如：在高负载的网站中处理成千上万行的表格)。</p><p>Thymeleaf 3 重点关注性能问题并完全重写了引擎。因此与之前版本相比性能有很大的提升。而且，这种提升不仅仅局限于渲染时间，也包括更低的内存占用以及在高并发场景下的低延迟。</p><p>关于Thymeleaf 3 技术架构的讨论可参见： New event-based template processing engine</p><p>值得一提的是，性能提升不仅是架构层面的事，也包括3.0 版本里的一些有助于性能提升的新特性。例如，在3.0版本里使用SpringEL表达式的编译器(从Spring Framework4.2.4版本开始)，在使用Spring的场景下，可进一步的提升性能。具体参见： Configuring the SpringEL compiler</p><p>即使没有使用Spring而是使用OGNL表达式，在3.0版本里也有性能优化。Thymeleaf甚至给OGNL代码库贡献了很多源码，这些代码有助于提升Thymeleaf在新的MVC1.0（JSR371）标准环境下的性能。</p><p>9. 不依赖于Servlet API</p><p>其实Thymeleaf3.0 之前版本在离线执行的情况下已经做到了不依赖于Java Servlet API，就是说在执行模板的过程中不依赖于Web容器。一个实用的场景就是用作邮件模板。</p><p>然而，在Thymeleaf3.0里做到了在Web环境下也完全不依赖Servlet API。这样就使得与那些不依赖Java Servlet框架（如 vert.x, RatPack, Play Framework）的集成更加简单方便。</p><p>更多参见： New extension point: Link Builders和 Generalisation of the IEngineContext mechanism.</p><p>10. 新的方言系统</p><p>Thymeleaf 3 提供了新的方言系统。如果你在早期版本上开发了Thymeleaf的方言，你需要使其与Thymeleaf 3 兼容。</p><p>新的方言接口十分简单</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">public interface IDialect
{
public String getName();
}</pre><div class="contentsignin">Copier après la connexion</div></div><p>可以通过实现IDialect的子类接口，实现更多不同的特性。</p>
<p>列举一下新方言系统增强的点：</p>
<p>除了processors之外，还提供了pre-processors 和 post-processors，模板的内容可以在处理之前和之后被修改。例如，我们可以使用pre-processors来缓存内容或者用post-processors来压缩输出结果。</p>
<p>提出了方言优先级的概念，可以对方言的处理器(processor)进行排序。处理器优先级的排序是跨方言的。</p>
<p>对象表达式方言提供可以模本内任意地方使用的新的表达式对象和工具对象。如：#strings, #numbers, #dates 等。</p>
<p>更多特性，可参见：</p>
<p>New Dialect API</p>
<p>New Pre-Processor and Post-Processor APIs</p>
<p>New Processor API</p>
<p>11 重构了核心API</p>
<p>核心接口进行了深度重构，详见：</p>
<p>Refactoring of the Template Resolution API</p>
<p>Refactoring of the Context API</p>
<p>Refactoring of the Message Resolution API</p>
<p>12 总结</p>
<p>Thymeleaf 3 是Thymeleaf 模板引擎经过4年多不懈的努力和工作后的一个重要的里程碑式的成果。提供了许多令人兴奋的新特性以及许多隐藏的改进。 所以，别再犹豫，赶紧来试试吧。</p> </div>
</div>
<div style="height: 25px;">
<div class="wzconBq" style="display: inline-flex;">
<span>Étiquettes associées：</span>
<div class="wzcbqd">
<a onclick="hits_log(2,'www',this);" href-data="//m.sbmmt.com/fr/search?word=thymeleaf3迁移指南" target="_blank">Thymeleaf 3 迁移指南</a> </div>
</div>
<div style="display: inline-flex;float: right; color:#333333;">source：php.cn</div>
</div>
<div class="wzconOtherwz">
<a href="//m.sbmmt.com/fr/faq/235558.html" title="CSS秘密花园： 挑选合适的光标_html/css_WEB-ITnose">
<span>Article précédent：CSS秘密花园： 挑选合适的光标_html/css_WEB-ITnose</span>
</a>
<a href="//m.sbmmt.com/fr/faq/235569.html" title="ReactNative之Flex布局总结_html/css_WEB-ITnose">
<span>Article suivant：ReactNative之Flex布局总结_html/css_WEB-ITnose</span>
</a>
</div>
<div class="wzconShengming">
<div class="bzsmdiv">Déclaration de ce site Web</div>
<div>Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn</div>
</div>
<div class="wwads-cn wwads-horizontal" data-id="156" style="max-width:955px"></div>
<div class="wzconZzwz">
<div class="wzconZzwztitle">Derniers articles par auteur</div>
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/fr/faq/405592.html">Après la mise à jour de phpstudy2018, le site et phpmyadmin ouvrent la solution 404</a>
</div>
<div>2018-06-30 16:21:47</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/fr/faq/377135.html">Exemples de méthodes permettant à JS d'appeler PHP et à PHP d'appeler JS</a>
</div>
<div>2023-03-15 12:22:02</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/fr/faq/2351.html">Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript</a>
</div>
<div>1970-01-01 08:00:00</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/fr/faq/290508.html">PHP获取当前目录和相对目录的方法_PHP教程</a>
</div>
<div>2023-02-28 17:52:02</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/fr/faq/230336.html">RabbitMQ与PHP</a>
</div>
<div>2023-02-28 15:12:01</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/fr/faq/63397.html">中国省市区数据mysql脚本_MySQL</a>
</div>
<div>1970-01-01 08:00:00</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/fr/faq/134511.html">mysql数据库数据变化实时监控</a>
</div>
<div>2019-02-22 15:16:56</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/fr/faq/257250.html">apache2.4+php5.6 不能加载php5apache2_4.dll</a>
</div>
<div>2023-02-28 16:28:01</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/fr/faq/396215.html">Méthode de débogage du point d'arrêt Phpstorm+Xdebug pour PHP</a>
</div>
<div>2023-03-25 19:14:01</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots"></span>
<a target="_blank" href="//m.sbmmt.com/fr/faq/396214.html">Fonction ajax encapsulée en js pur et exemples d'utilisation</a>
</div>
<div>1970-01-01 08:00:00</div>
</li>
</ul>
</div>
<div class="wzconZzwz">
<div class="wzconZzwztitle">Derniers numéros</div>
<div class="wdsyContent">
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/fr/wenda/176411.html" target="_blank" title="function_exists() ne peut pas déterminer la fonction personnalisée" class="wdcdcTitle">function_exists() ne peut pas déterminer la fonction personnalisée</a>
<a href="//m.sbmmt.com/fr/wenda/176411.html" class="wdcdcCons">Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> Depuis 2024-04-29 11:01:01</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>2</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1739</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/fr/wenda/176410.html" target="_blank" title="Comment afficher la version mobile de Google Chrome" class="wdcdcTitle">Comment afficher la version mobile de Google Chrome</a>
<a href="//m.sbmmt.com/fr/wenda/176410.html" class="wdcdcCons">Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> Depuis 2024-04-23 00:22:19</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>10</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1890</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/fr/wenda/176407.html" target="_blank" title="La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas." class="wdcdcTitle">La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas.</a>
<a href="//m.sbmmt.com/fr/wenda/176407.html" class="wdcdcCons">Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> Depuis 2024-04-19 15:37:47</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1609</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/fr/wenda/176406.html" target="_blank" title="Il n'y a aucune sortie dans la fenêtre parent" class="wdcdcTitle">Il n'y a aucune sortie dans la fenêtre parent</a>
<a href="//m.sbmmt.com/fr/wenda/176406.html" class="wdcdcCons">document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> Depuis 2024-04-18 23:52:34</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>1</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1520</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
<div class="wdsyConDiv flexRow wdsyConDiv1">
<div class="wdcdContent flexColumn">
<a href="//m.sbmmt.com/fr/wenda/176405.html" target="_blank" title="Où sont les didacticiels sur la cartographie mentale CSS ?" class="wdcdcTitle">Où sont les didacticiels sur la cartographie mentale CSS ?</a>
<a href="//m.sbmmt.com/fr/wenda/176405.html" class="wdcdcCons">Didacticiel</a>
<div class="wdcdcInfo flexRow">
<div class="wdcdcileft">
<span class="wdcdciSpan"> Depuis 2024-04-16 10:10:18</span>
</div>
<div class="wdcdciright flexRow">
<div class="wdcdcirdz flexRow ira"> <b class="wdcdcirdzi"></b>0 </div>
<div class="wdcdcirpl flexRow ira"><b class="wdcdcirpli"></b>0</div>
<div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1557</div>
</div>
</div>
</div>
</div>
<div class="wdsyConLine wdsyConLine2"></div>
</div>
</div>
<div class="wzconZt" >
<div class="wzczt-title">
<div>Rubriques connexes</div>
<a href="//m.sbmmt.com/fr/faq/zt" target="_blank">Plus>
</a>
</div>
<div class="wzcttlist">
<ul>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/fr/faq/steamapidll"><img src="https://img.php.cn/upload/subject/202407/22/2024072213555868141.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment résoudre le problème de steam_api.dll manquant" /> </a>
<a target="_blank" href="//m.sbmmt.com/fr/faq/steamapidll" class="title-a-spanl" title="Comment résoudre le problème de steam_api.dll manquant"><span>Comment résoudre le problème de steam_api.dll manquant</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/fr/faq/javapathhjbl"><img src="https://img.php.cn/upload/subject/202407/22/2024072213472157931.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment configurer la variable d'environnement path en Java" /> </a>
<a target="_blank" href="//m.sbmmt.com/fr/faq/javapathhjbl" class="title-a-spanl" title="Comment configurer la variable d'environnement path en Java"><span>Comment configurer la variable d'environnement path en Java</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/fr/faq/windowopen"><img src="https://img.php.cn/upload/subject/202407/22/2024072213395432719.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment fermer la fenêtre ouverte par window.open" /> </a>
<a target="_blank" href="//m.sbmmt.com/fr/faq/windowopen" class="title-a-spanl" title="Comment fermer la fenêtre ouverte par window.open"><span>Comment fermer la fenêtre ouverte par window.open</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/fr/faq/exportdefault"><img src="https://img.php.cn/upload/subject/202407/22/2024072214002430910.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="La différence entre l'exportation et l'exportation par défaut" /> </a>
<a target="_blank" href="//m.sbmmt.com/fr/faq/exportdefault" class="title-a-spanl" title="La différence entre l'exportation et l'exportation par défaut"><span>La différence entre l'exportation et l'exportation par défaut</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/fr/faq/jthspths"><img src="https://img.php.cn/upload/subject/202407/22/2024072214084441640.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="La différence entre les fonctions fléchées et les fonctions ordinaires" /> </a>
<a target="_blank" href="//m.sbmmt.com/fr/faq/jthspths" class="title-a-spanl" title="La différence entre les fonctions fléchées et les fonctions ordinaires"><span>La différence entre les fonctions fléchées et les fonctions ordinaires</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/fr/faq/dyzmszbrsyrkz"><img src="https://img.php.cn/upload/subject/202407/22/2024072212122521294.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment configurer Douyin pour empêcher tout le monde de voir l'œuvre" /> </a>
<a target="_blank" href="//m.sbmmt.com/fr/faq/dyzmszbrsyrkz" class="title-a-spanl" title="Comment configurer Douyin pour empêcher tout le monde de voir l'œuvre"><span>Comment configurer Douyin pour empêcher tout le monde de voir l'œuvre</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/fr/faq/sxjmrj"><img src="https://img.php.cn/upload/subject/202407/22/2024072214385995743.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Logiciel de modélisation mathématique" /> </a>
<a target="_blank" href="//m.sbmmt.com/fr/faq/sxjmrj" class="title-a-spanl" title="Logiciel de modélisation mathématique"><span>Logiciel de modélisation mathématique</span> </a>
</li>
<li class="ul-li">
<a target="_blank" href="//m.sbmmt.com/fr/faq/scripterrorzm"><img src="https://img.php.cn/upload/subject/202407/22/2024072213575066349.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment résoudre une erreur de script" /> </a>
<a target="_blank" href="//m.sbmmt.com/fr/faq/scripterrorzm" class="title-a-spanl" title="Comment résoudre une erreur de script"><span>Comment résoudre une erreur de script</span> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="phpwzright">
<div class="wzrOne">
<div class="wzroTitle">Recommandations populaires</div>
<div class="wzroList">
<ul>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="Que signifie l'URL ?" href="//m.sbmmt.com/fr/faq/418772.html">Que signifie l'URL ?</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="Que signifie DOM ?" href="//m.sbmmt.com/fr/faq/414303.html">Que signifie DOM ?</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="Comment changer la taille de l'image" href="//m.sbmmt.com/fr/faq/414252.html">Comment changer la taille de l'image</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="Comment mettre la police en gras en HTML" href="//m.sbmmt.com/fr/faq/414520.html">Comment mettre la police en gras en HTML</a>
</div>
</li>
<li>
<div class="wzczzwzli">
<span class="layui-badge-dots wzrolr"></span>
<a style="height: auto;" title="Comment définir la taille des images HTML" href="//m.sbmmt.com/fr/faq/475145.html">Comment définir la taille des images HTML</a>
</div>
</li>
</ul>
</div>
</div>
<script src="https://sw.php.cn/hezuo/cac1399ab368127f9b113b14eb3316d0.js" type="text/javascript"></script>
<div class="wzrThree">
<div class="wzrthree-title">
<div>Tutoriels populaires</div>
<a target="_blank" href="//m.sbmmt.com/fr/course.html">Plus>
</a>
</div>
<div class="wzrthreelist swiper2">
<div class="wzrthreeTab swiper-wrapper">
<div class="check tabdiv swiper-slide" data-id="one">Tutoriels associés <div></div></div>
<div class="tabdiv swiper-slide" data-id="two">Recommandations populaires<div></div></div>
<div class="tabdiv swiper-slide" data-id="three">Derniers cours<div></div></div>
</div>
<ul class="one">
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="//m.sbmmt.com/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a>
<div class="wzrthreerb">
<div>1415858 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="812">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/74.html" title="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/6253d1e28ef5c345.png" alt="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine" href="//m.sbmmt.com/fr/course/74.html">Premier tutoriel d'introduction à PHP : Apprenez PHP en une semaine</a>
<div class="wzrthreerb">
<div>4255147 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="74">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="//m.sbmmt.com/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a>
<div class="wzrthreerb">
<div>2466559 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="286">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="//m.sbmmt.com/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a>
<div class="wzrthreerb">
<div>502941 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="504">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/2.html" title="Tutoriel d'introduction PHP base zéro" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/6253de27bc161468.png" alt="Tutoriel d'introduction PHP base zéro"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Tutoriel d'introduction PHP base zéro" href="//m.sbmmt.com/fr/course/2.html">Tutoriel d'introduction PHP base zéro</a>
<div class="wzrthreerb">
<div>843287 <b class="kclbcollectb"></b></div>
<div class="courseICollection" data-id="2">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
</ul>
<ul class="two" style="display: none;">
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/812.html" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)" href="//m.sbmmt.com/fr/course/812.html">Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)</a>
<div class="wzrthreerb">
<div >1415858 temps d'étude</div>
<div class="courseICollection" data-id="812">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/286.html" title="Tutoriel vidéo JAVA pour débutants" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a2bacfd9379.png" alt="Tutoriel vidéo JAVA pour débutants"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Tutoriel vidéo JAVA pour débutants" href="//m.sbmmt.com/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a>
<div class="wzrthreerb">
<div >2466559 temps d'étude</div>
<div class="courseICollection" data-id="286">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/504.html" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62590a67ce3a6655.png" alt="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle" href="//m.sbmmt.com/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a>
<div class="wzrthreerb">
<div >502941 temps d'étude</div>
<div class="courseICollection" data-id="504">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/901.html" title="Introduction rapide au développement web front-end" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png" alt="Introduction rapide au développement web front-end"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Introduction rapide au développement web front-end" href="//m.sbmmt.com/fr/course/901.html">Introduction rapide au développement web front-end</a>
<div class="wzrthreerb">
<div >215197 temps d'étude</div>
<div class="courseICollection" data-id="901">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/234.html" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/068/62611f57ed0d4840.jpg" alt="Maîtrisez les didacticiels vidéo PS à partir de zéro"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Maîtrisez les didacticiels vidéo PS à partir de zéro" href="//m.sbmmt.com/fr/course/234.html">Maîtrisez les didacticiels vidéo PS à partir de zéro</a>
<div class="wzrthreerb">
<div >874657 temps d'étude</div>
<div class="courseICollection" data-id="234">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
</ul>
<ul class="three" style="display: none;">
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/1648.html" title="[Web front-end] Démarrage rapide de Node.js" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png" alt="[Web front-end] Démarrage rapide de Node.js"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="[Web front-end] Démarrage rapide de Node.js" href="//m.sbmmt.com/fr/course/1648.html">[Web front-end] Démarrage rapide de Node.js</a>
<div class="wzrthreerb">
<div >6219 temps d'étude</div>
<div class="courseICollection" data-id="1648">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/1647.html" title="Collection complète de cours full-stack de développement Web étranger" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/6628cc96e310c937.png" alt="Collection complète de cours full-stack de développement Web étranger"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Collection complète de cours full-stack de développement Web étranger" href="//m.sbmmt.com/fr/course/1647.html">Collection complète de cours full-stack de développement Web étranger</a>
<div class="wzrthreerb">
<div >4852 temps d'étude</div>
<div class="courseICollection" data-id="1647">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/1646.html" title="Aller au langage pratique GraphQL" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/662221173504a436.png" alt="Aller au langage pratique GraphQL"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Aller au langage pratique GraphQL" href="//m.sbmmt.com/fr/course/1646.html">Aller au langage pratique GraphQL</a>
<div class="wzrthreerb">
<div >4080 temps d'étude</div>
<div class="courseICollection" data-id="1646">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/1645.html" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/662077e163124646.png" alt="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape" href="//m.sbmmt.com/fr/course/1645.html">Le maître du ventilateur de 550 W apprend JavaScript à partir de zéro, étape par étape</a>
<div class="wzrthreerb">
<div >605 temps d'étude</div>
<div class="courseICollection" data-id="1645">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
<li>
<a target="_blank" href="//m.sbmmt.com/fr/course/1644.html" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" class="wzrthreelaimg">
<img src="https://img.php.cn/upload/course/000/000/067/6616418ca80b8916.png" alt="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures"/>
</a>
<div class="wzrthree-right">
<a target="_blank" title="Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures" href="//m.sbmmt.com/fr/course/1644.html">Le maître Python Mosh, un débutant sans aucune connaissance de base peut commencer en 6 heures</a>
<div class="wzrthreerb">
<div >20763 temps d'étude</div>
<div class="courseICollection" data-id="1644">
<b class="nofollow small-nocollect"></b>
</div>
</div>
</div>
</li>
</ul>
</div>
<script>
var mySwiper = new Swiper('.swiper2', {
autoplay: false,//可选选项，自动滑动
slidesPerView : 'auto',
})
$('.wzrthreeTab>div').click(function(e){
$('.wzrthreeTab>div').removeClass('check')
$(this).addClass('check')
$('.wzrthreelist>ul').css('display','none')
$('.'+e.currentTarget.dataset.id).show()
})
</script>
</div>
<div class="wzrFour">
<div class="wzrfour-title">
<div>Derniers téléchargements</div>
<a href="//m.sbmmt.com/fr/xiazai">Plus>
</a>
</div>
<script>
$(document).ready(function(){
var sjyx_banSwiper = new Swiper(".sjyx_banSwiperwz",{
speed:1000,
autoplay:{
delay:3500,
disableOnInteraction: false,
},
pagination:{
el:'.sjyx_banSwiperwz .swiper-pagination',
clickable :false,
},
loop:true
})
})
</script>
<div class="wzrfourList swiper3">
<div class="wzrfourlTab swiper-wrapper">
<div class="check swiper-slide" data-id="onef">effets Web <div></div></div>
<div class="swiper-slide" data-id="twof">Code source du site Web<div></div></div>
<div class="swiper-slide" data-id="threef">Matériel du site Web<div></div></div>
<div class="swiper-slide" data-id="fourf">Modèle frontal<div></div></div>
</div>
<ul class="onef">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="Code de contact du formulaire de message d'entreprise jQuery" href="//m.sbmmt.com/fr/xiazai/js/8071">[bouton de formulaire] Code de contact du formulaire de message d'entreprise jQuery</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="Effets de lecture de boîte à musique HTML5 MP3" href="//m.sbmmt.com/fr/xiazai/js/8070">[Effets spéciaux du joueur] Effets de lecture de boîte à musique HTML5 MP3</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="Effets spéciaux du menu de navigation d'animation de particules cool HTML5" href="//m.sbmmt.com/fr/xiazai/js/8069">[Navigation dans les menus] Effets spéciaux du menu de navigation d'animation de particules cool HTML5</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="Code d'édition par glisser-déposer du formulaire visuel jQuery" href="//m.sbmmt.com/fr/xiazai/js/8068">[bouton de formulaire] Code d'édition par glisser-déposer du formulaire visuel jQuery</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="Code du lecteur de musique Kugou imitation VUE.JS" href="//m.sbmmt.com/fr/xiazai/js/8067">[Effets spéciaux du joueur] Code du lecteur de musique Kugou imitation VUE.JS</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="Jeu de boîte de poussée HTML5 classique" href="//m.sbmmt.com/fr/xiazai/js/8066">[effets spéciaux HTML5] Jeu de boîte de poussée HTML5 classique</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="défilement jQuery pour ajouter ou réduire des effets d'image" href="//m.sbmmt.com/fr/xiazai/js/8065">[Effets spéciaux d'image] défilement jQuery pour ajouter ou réduire des effets d'image</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a target="_blank" title="Effet de zoom de survol de la couverture de l'album personnel CSS3" href="//m.sbmmt.com/fr/xiazai/js/8064">[Effets d'album photo] Effet de zoom de survol de la couverture de l'album personnel CSS3</a>
</div>
</li>
</ul>
<ul class="twof" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8328" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8327" title="Modèle de page de guide de CV personnel aux couleurs fraîches" target="_blank">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8326" title="Modèle Web de CV de travail créatif de concepteur" target="_blank">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8325" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne" target="_blank">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8324" title="Modèle HTML5 réactif pour les établissements de services éducatifs" target="_blank">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8323" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne" target="_blank">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8322" title="La technologie informatique résout le modèle de site Web d'entreprise Internet" target="_blank">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8321" title="Modèle de site Web de service de trading de devises de style violet" target="_blank">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</a>
</div>
</li>
</ul>
<ul class="threef" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/sucai/3078" target="_blank" title="可爱的夏天元素矢量素材(EPS+PNG)">[PNG素材] 可爱的夏天元素矢量素材(EPS+PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/sucai/3077" target="_blank" title="四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)">[PNG素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/sucai/3076" target="_blank" title="唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)">[banner图] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/sucai/3075" target="_blank" title="金色的毕业帽矢量素材(EPS+PNG)">[PNG素材] 金色的毕业帽矢量素材(EPS+PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/sucai/3074" target="_blank" title="黑白风格的山脉图标矢量素材(EPS+PNG)">[PNG素材] 黑白风格的山脉图标矢量素材(EPS+PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/sucai/3073" target="_blank" title="不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)">[PNG素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/sucai/3072" target="_blank" title="扁平风格的植树节banner矢量素材(AI+EPS)">[banner图] 扁平风格的植树节banner矢量素材(AI+EPS)</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/sucai/3071" target="_blank" title="九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)">[PNG素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG)</a>
</div>
</li>
</ul>
<ul class="fourf" style="display:none">
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8328" target="_blank" title="Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure">[Modèle frontal] Modèle de site Web d'entreprise de services de nettoyage et de réparation de décoration intérieure</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8327" target="_blank" title="Modèle de page de guide de CV personnel aux couleurs fraîches">[Modèle frontal] Modèle de page de guide de CV personnel aux couleurs fraîches</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8326" target="_blank" title="Modèle Web de CV de travail créatif de concepteur">[Modèle frontal] Modèle Web de CV de travail créatif de concepteur</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8325" target="_blank" title="Modèle de site Web d'entreprise de construction d'ingénierie moderne">[Modèle frontal] Modèle de site Web d'entreprise de construction d'ingénierie moderne</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8324" target="_blank" title="Modèle HTML5 réactif pour les établissements de services éducatifs">[Modèle frontal] Modèle HTML5 réactif pour les établissements de services éducatifs</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8323" target="_blank" title="Modèle de site Web de centre commercial de boutique de livres électroniques en ligne">[Modèle frontal] Modèle de site Web de centre commercial de boutique de livres électroniques en ligne</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8322" target="_blank" title="La technologie informatique résout le modèle de site Web d'entreprise Internet">[Modèle frontal] La technologie informatique résout le modèle de site Web d'entreprise Internet</a>
</div>
</li>
<li>
<div class="wzrfourli">
<span class="layui-badge-dots wzrflr"></span>
<a href="//m.sbmmt.com/fr/xiazai/code/8321" target="_blank" title="Modèle de site Web de service de trading de devises de style violet">[Modèle frontal] Modèle de site Web de service de trading de devises de style violet</a>
</div>
</li>
</ul>
</div>
<script>
var mySwiper = new Swiper('.swiper3', {
autoplay: false,//可选选项，自动滑动
slidesPerView : 'auto',
})
$('.wzrfourlTab>div').click(function(e){
$('.wzrfourlTab>div').removeClass('check')
$(this).addClass('check')
$('.wzrfourList>ul').css('display','none')
$('.'+e.currentTarget.dataset.id).show()
})
</script>
</div>
</div>
</div>
<div class="phpFoot">
<div class="phpFootIn">
<div class="phpFootCont">
<div class="phpFootLeft">
<dl>
<dt>
<a href="//m.sbmmt.com/fr/about/xieyi.html" rel="nofollow" target="_blank" title="À propos de nous" class="cBlack">À propos de nous</a>
<a href="//m.sbmmt.com/fr/about/yinsi.html" rel="nofollow" target="_blank" title="Clause de non-responsabilité" class="cBlack">Clause de non-responsabilité</a>
<a href="//m.sbmmt.com/fr/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a>
<div class="clear"></div>
</dt>
<dd class="cont1">Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</dd>
</dl>
</div>
</div>
</div>
</div>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<script src="/static/js/common_new.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js?1730597265"></script>
<script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script>
<link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/>
<script type='text/javascript' src='/static/js/viewer.min.js?1'></script>
<script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script>
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
</body>
</html> 
