Quelques conseils sur l'attribut overflow en CSS, introduction à l'attribut overflow-tutoriel CSS-php.cn

Dans ce chapitre, nous vous apporterons quelques conseils sur l'attribut de débordement, qui ont une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

1 : Propriétés de base du débordement

Les propriétés de base du débordement sont : visible, caché, défilement, auto, héritage, débordement-x et débordement-y

Définissez overflow-x et overflow-y sur la même valeur, ce qui équivaut à overflow. S'ils sont différents, l'un d'eux se voit attribuer visible, auto et l'autre se voit attribuer visiblebel, auto, caché. sera réinitialisé sur automatique.

La prémisse du rôle

1. Non-affichage : niveau en ligne !

2. Restrictions de taille correspondant à l'orientation, largeur/hauteur/largeur-max/hauteur-max/étirement absolu

débordement : la merveilleuse utilisation du visibel

Sous le navigateur IE7, plus il y a de texte, plus l'espace de remplissage sera grand de part et d'autre du bouton. Ajouter un débordement de style CSS à tous les boutons : visible

2 : débordement et barre de défilement

Conditions pour que la barre de défilement apparaisse

1.overflow : auto/overflow:scroll Certains éléments ont leurs propres barres de défilement

<p></p>
<p>body/html et barres de défilement <strong></strong></p> quel que soit le navigateur. Les barres de défilement par défaut sont toutes en HTML au lieu de la balise body <p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">ie8+ html{overflow:auto}</pre><div class="contentsignin">Copier après la connexion</div></div>Donc, si nous voulons supprimer la barre de défilement par défaut de la page, nous avons seulement besoin de : <p> </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">html{overflow:hidden}</pre><div class="contentsignin">Copier après la connexion</div></div>body/html et Scroll bar-js et scroll height <p></p> sont compatibles avec la méthode d'écriture <p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"> var st = document.body.scrollTop || document.documentElement.scrollTop
 overflow的padding-bottom缺失现象
.box{width:400px;height:100px;padding:100px 0; overfow:auto;}</pre><div class="contentsignin">Copier après la connexion</div></div> Le bas peut défiler vers le bas dans le navigateur Chrome. <p></p><p>Largeur de la barre de défilement<strong></strong></p>Largeur de la boîte (avec barre de défilement) - largeur de la boîte = largeur de la barre de défilement<p></p> IE Firefox Chrome sont tous deux de 17 pixels. <p></p><p>Problème de saut de centre horizontal<strong></strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">修复方法 
1.html{overflow-y:scroll;}
2. .container{padding-left:calc(100vw-100%);}</pre><div class="contentsignin">Copier après la connexion</div></div> 100vw - largeur du navigateur 100% - largeur du contenu disponible<p></p><p> Barre de défilement personnalisée -webkit <strong></strong></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"> 整体部分 ::-webkit-scrollbar 
	两端按钮 ::-webkit-scrollbar-button 
	外层轨道 ::-webkit-scrollbar-track 
	内层轨道 ::-webkit-scrollbar-track-piece 
	滚动滑块 ::-webkit-scrollbar-thumb 
	边角 ::-webkit-scrollbar-corner 
	实际常用 
	::-webkit-scrollbar{//宽度 width:8px; height:8px; } 
	::-webkit-scrollbar-thumb{//拖动条 background-color:rgba(0,0,0,.3); border-radius : 6px; } 
	::-webkit-scrollbar-track{//背景槽 background-color:#ddd; border-radius:6px; }</pre><div class="contentsignin">Copier après la connexion</div></div> Barre de défilement personnalisée -IE<p></p>Vous pouvez utiliser un plug-in de défilement personnalisé<p></p>Effet de rappel de défilement natif IOS<p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">-webkit-overflow-scrolling:touch;</pre><div class="contentsignin">Copier après la connexion</div></div><p>Trois : débordement et BFC<strong></strong></p>Flotteurs clairs, mise en page adaptative, etc. <p></p>Contexte de formatage du bloc BFC Contexte de formatage au niveau du bloc <p></p>L'enchantement de la page, peu importe la façon dont les éléments internes sont lancés, ils n'affecteront pas l'extérieur. <p></p><p>débordement et BFC<strong></strong></p>1. Effacer les effets flottants <p></p>2 Éviter les problèmes de pénétration de marge <p></p>Deux colonnes d'Adapt. à la mise en page <p></p>Le flottement interne n'a aucun effet<p></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">.clearfix{*zoom:1;}
.clearfix:after{centent:&#39;&#39;;display:table;clear:both;}</pre><div class="contentsignin">Copier après la connexion</div></div>Éviter les problèmes de pénétration de la marge<p></p>Définir le débordement : défilement, le débordement : auto, le débordement : caché<p><🎜 > </p>Pourquoi a-t-il cette fonctionnalité ? <p><strong></strong> Disposition adaptative sous caractéristiques fluides </p><p> 1. Flottant à gauche, normal à droite </p><p></p> 2. Flottant à gauche, marge à droite <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.left{float:left;width:128px;}
.right{min-height:190px;background-color:#beceeb}</pre><div class="contentsignin">Copier après la connexion</div></div><p> </p>3. Flottant à gauche, remplissage à droite<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.left{float:left;width:128px;}
.right{min-height:190px;margin-left:150px;background-color:#beceeb}</pre><div class="contentsignin">Copier après la connexion</div></div><p></p>4. Flottant à gauche<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.left{float:left;width:128px;}
.right{min-height:190px;padding-left:150px;background-color:#beceeb}</pre><div class="contentsignin">Copier après la connexion</div></div><p></p> Définir l'attribut de débordement sur le div consiste à BFC l'élément et à utiliser le remplissage pour une adaptation fluide. Lors de la mise en page, ne laissez jamais la couche adaptative devenir BFC. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.left{float:left;width:128px;}
.right{min-height:190px;overflow:hidden;background-color:#beceeb}</pre><div class="contentsignin">Copier après la connexion</div></div><p>Tous les attributs BFC se comportent-ils comme ça ? </p><p> oui En raison de ses propres caractéristiques, les performances spécifiques varient </p><p></p>Mise en page adaptative à deux colonnes<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"> overflow:hidden;      自适应，单溢出不可见 限制应用场景
 float + float 包裹性+破坏性 无法自适应，块状浮动布局
position:absolute 脱离文档流，自娱自乐
display:inline-block 包裹性，无法自适应
display:table-cell 包裹性，但天生无溢出特性，绝对宽度也能自适应。
只有overflow:hidden,display:inline-block,display:table-cell能使元素BFC化</pre><div class="contentsignin">Copier après la connexion</div></div><. 🎜 ><p></p>Quatre : débordement et positionnement absolu<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"> .cell{
  display:table-cell; width:2000px; //2000保证比父元素大
  *display:inline-block;*width:auto; //IE7-伪BFC特性
 }</pre><div class="contentsignin">Copier après la connexion</div></div><p><strong>Panne cachée et correction du défilement</strong></p><p>débordement :panne cachée</p><p><strong> </strong>Raison de l'échec</p>

Les éléments en position absolue ne sont pas toujours tronqués par l'attribut de débordement parent, en particulier lorsque le débordement se situe entre l'élément en position absolue et son bloc contenant <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false">.overflow-hidden{
    width:300px;
    height:200px;
    border:5px solid #333;
    overflow:auto
}
img{postion:absolute;}</pre><div class="contentsignin">Copier après la connexion</div></div>

Le bloc contenant fait référence à l'élément parent déclaré avec "position:relative/absolute/fixed". Sans lui, l'élément body <p><br/>Comment éviter l'invalidation<br/>

1.L'élément de débordement lui-même devient un bloc contenant </p>

2. Les éléments enfants de l'élément de débordement deviennent un bloc conteneur <p> 3. Toute instruction de transformation légale est traitée comme un bloc conteneur <br/><br/>L'effet magique de l'échec du débordement<br/></p><p></p>5 : Styles qui reposent sur les performances de débordement <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">h0{height:0;}
.ovh{overflow:hidden;}
.tr{text-align:right;}
.abs{position:absolute;}
<div class="h0 ovh tr">
    <img src="" class="abs ml10 mt30"></img>
</div></pre><div class="contentsignin">Copier après la connexion</div></div><p><strong></strong> étirement de redimensionnement </p><p><strong> CSS3 a une propriété appelée resize, qui peut étendre la taille de l'élément. </strong></p> .resize: les deux s'étirent horizontalement et verticalement; <p></p> .resize: horizontal s'étire uniquement dans le sens horizontal <p></p> resize: vertical s'étire uniquement dans le sens vertical <p></p> Cependant, pour que cette déclaration fonctionne, la valeur de l'attribut overflow de l'élément ne peut pas être visible ! <p></p><p> Un tel bouton peut obtenir l'effet d'étirement. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:css;toolbar:false"><button style="resize:both;overflow:hidden">按钮</button></pre><div class="contentsignin">Copier après la connexion</div></div>Le champ de texte a son propre attribut de redimensionnement, car le champ de texte déborde par défaut : auto<p></p> La taille de la zone de pêche par traînée de redimensionnement du champ de texte est de 17*17 pixels. Autrement dit, la taille de la barre de défilement <p></p> le texte des points de suspension déborde et est omis <p></p><p></p> Six : technologie de débordement et d'ancrage <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false">text-overflow:ellipsis
<button style="width:200px;white-space:norwrap;text-overflow:ellipsis;overflow:hidden">
  这是一个按钮，宽度仅200像素
</button></pre><div class="contentsignin">Copier après la connexion</div></div><p><strong></strong> Ancre L'essence du positionnement du point : la hauteur de défilement du conteneur variable</p>
<p><strong>déclenchement de l'alignement du point d'ancrage</strong>

1. Chaîne d'ancrage et élément d'ancrage dans l'adresse URL </p>

2. L'élément d'ancrage focalisable est mis au point <p></p>
<p>Le rôle du positionnement du point d'ancrage<br>

1. Positionnement rapide<br>

2. Technologie de positionnement d'ancre et d'onglet de débordement </p>
<p> Scénario d'application : application d'une seule page </p>
<p><br></p><p>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!</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="https://www.php.cn/fr/search?word=overflow属性，滚动条，绝对定位" target="_blank">overflow属性，滚动条，绝对定位</a>                    </div>
                </div>
                                <div style="display: inline-flex;float: right; color:#333333;">source：php.cn</div>
                            </div>
            <div class="wzconOtherwz">
                                    <a href="https://www.php.cn/fr/faq/409643.html" title="Comment l'attribut overflow de CSS définit les barres de défilement">
                        <span>Article précédent：Comment l'attribut overflow de CSS définit les barres de défilement</span>
                    </a>
                                    <a href="https://www.php.cn/fr/faq/409647.html"  title="Utilisez du CSS pur pour implémenter un menu déroulant qui apparaît après le passage de la souris dessus. Exemple d'explication (avec code).">
                        <span>Article suivant：Utilisez du CSS pur pour implémenter un menu déroulant qui apparaît après le passage de la souris dessus. Exemple d'explication (avec code).</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="https://www.php.cn/fr/faq/529366.html">Comprendre la sentinelle dans Redis en profondeur</a>
                            </div>
                            <div>2023-04-26 17:59:18</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/fr/faq/529362.html">[Organisation et partage] 7 outils de gestion d'état React populaires</a>
                            </div>
                            <div>2023-04-26 17:47:48</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/fr/faq/529360.html">Un article discute de la différence entre la clé dans Vue2 et la clé dans Vue3</a>
                            </div>
                            <div>2023-04-26 17:41:42</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/fr/faq/529358.html">Un article pour parler du contrôle de la mémoire dans Node</a>
                            </div>
                            <div>2023-04-26 17:37:05</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/fr/faq/529356.html">Partager des compétences pratiques sur Excel : 4 astuces pour supprimer les valeurs en double !</a>
                            </div>
                            <div>2023-04-26 17:31:25</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/fr/faq/529350.html">Partager des compétences pratiques sur Word : la fonction de conversion simplifié vers traditionnel peut être utilisée de cette manière !</a>
                            </div>
                            <div>2023-04-26 17:27:32</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/fr/faq/528167.html">Comment résoudre les problèmes cross-domaines ? Une brève analyse des solutions courantes</a>
                            </div>
                            <div>2023-04-25 19:57:58</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/fr/faq/528165.html">Un article pour comprendre le modèle singleton en JavaScript</a>
                            </div>
                            <div>2023-04-25 19:53:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/fr/faq/528163.html">En savoir plus sur les tampons dans Node</a>
                            </div>
                            <div>2023-04-25 19:49:11</div>
                        </li>
                                            <li>
                            <div class="wzczzwzli">
                                <span class="layui-badge-dots"></span>
                                <a target="_blank" href="https://www.php.cn/fr/faq/528161.html">Découvrez comment écrire des tests unitaires dans Vue3</a>
                            </div>
                            <div>2023-04-25 19:41:54</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="https://www.php.cn/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="https://www.php.cn/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>1980</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/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="https://www.php.cn/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>2143</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/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="https://www.php.cn/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>1805</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/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="https://www.php.cn/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>1703</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wdsyConLine wdsyConLine2"></div>
                                        <div class="wdsyConDiv flexRow wdsyConDiv1">
                        <div class="wdcdContent flexColumn">
                            <a href="https://www.php.cn/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="https://www.php.cn/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>1716</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="https://www.php.cn/fr/faq/zt" target="_blank">Plus>
                    </a>
                </div>
                <div class="wzcttlist">
                    <ul>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/fr/faq/divgdt"><img src="https://img.php.cn/upload/subject/202407/22/2024072214385242717.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="barre de défilement div" /> </a>
                            <a target="_blank" href="https://www.php.cn/fr/faq/divgdt" class="title-a-spanl" title="barre de défilement div"><span>barre de défilement div</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/fr/faq/htmlgdtys"><img src="https://img.php.cn/upload/subject/202407/22/2024072214004078545.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment définir le style de la barre de défilement HTML" /> </a>
                            <a target="_blank" href="https://www.php.cn/fr/faq/htmlgdtys" class="title-a-spanl" title="Comment définir le style de la barre de défilement HTML"><span>Comment définir le style de la barre de défilement HTML</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/fr/faq/fuwuqi"><img src="https://img.php.cn/upload/subject/202407/22/2024072214193233864.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="qu'est-ce que le serveur" /> </a>
                            <a target="_blank" href="https://www.php.cn/fr/faq/fuwuqi" class="title-a-spanl" title="qu'est-ce que le serveur"><span>qu'est-ce que le serveur</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/fr/faq/exceldkslmdjj"><img src="https://img.php.cn/upload/subject/202407/22/2024072212285785843.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Solution aux caractères tronqués lors de l'ouverture d'Excel" /> </a>
                            <a target="_blank" href="https://www.php.cn/fr/faq/exceldkslmdjj" class="title-a-spanl" title="Solution aux caractères tronqués lors de l'ouverture d'Excel"><span>Solution aux caractères tronqués lors de l'ouverture d'Excel</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/fr/faq/rhckdksfgb"><img src="https://img.php.cn/upload/subject/202407/22/2024072213575956348.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment vérifier si le port 445 est fermé" /> </a>
                            <a target="_blank" href="https://www.php.cn/fr/faq/rhckdksfgb" class="title-a-spanl" title="Comment vérifier si le port 445 est fermé"><span>Comment vérifier si le port 445 est fermé</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/fr/faq/jhjgzyl"><img src="https://img.php.cn/upload/subject/202407/22/2024072213333678382.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment fonctionne un interrupteur ?" /> </a>
                            <a target="_blank" href="https://www.php.cn/fr/faq/jhjgzyl" class="title-a-spanl" title="Comment fonctionne un interrupteur ?"><span>Comment fonctionne un interrupteur ?</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/fr/faq/bqsdcxssmys"><img src="https://img.php.cn/upload/subject/202407/22/2024072213263466698.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Que signifie CX dans le cercle des devises ?" /> </a>
                            <a target="_blank" href="https://www.php.cn/fr/faq/bqsdcxssmys" class="title-a-spanl" title="Que signifie CX dans le cercle des devises ?"><span>Que signifie CX dans le cercle des devises ?</span> </a>
                        </li>
                                                <li class="ul-li">
                            <a target="_blank" href="https://www.php.cn/fr/faq/hdtuneproyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072214075613216.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="utilisation de hdtunepro" /> </a>
                            <a target="_blank" href="https://www.php.cn/fr/faq/hdtuneproyf" class="title-a-spanl" title="utilisation de hdtunepro"><span>utilisation de hdtunepro</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="Comment configurer CSS pour dépasser les ellipses d'affichage" href="https://www.php.cn/fr/faq/482865.html">Comment configurer CSS pour dépasser les ellipses d'affichage</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="Comment définir la taille de la police en CSS" href="https://www.php.cn/fr/faq/469426.html">Comment définir la taille de la police en CSS</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="Comment utiliser le survol en CSS" href="https://www.php.cn/fr/faq/417948.html">Comment utiliser le survol en CSS</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="Comment définir l'espacement des caractères en CSS" href="https://www.php.cn/fr/faq/482889.html">Comment définir l'espacement des caractères en CSS</a>
                                </div>
                            </li>
                                                <li>
                                <div class="wzczzwzli">
                                    <span class="layui-badge-dots wzrolr"></span>
                                    <a style="height: auto;" title="Quelles sont les nouvelles fonctionnalités de CSS3" href="https://www.php.cn/fr/faq/415878.html">Quelles sont les nouvelles fonctionnalités de CSS3</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="https://www.php.cn/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="https://www.php.cn/fr/course/12.html" title="Tutoriel d'introduction de base HTML+CSS" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253de8ca1761701.png" alt="Tutoriel d'introduction de base HTML+CSS"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutoriel d'introduction de base HTML+CSS" href="https://www.php.cn/fr/course/12.html">Tutoriel d'introduction de base HTML+CSS</a>
                                    <div class="wzrthreerb">
                                        <div>524941 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="12">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/fr/course/19.html" title="Tutoriel CSS3 de l'entrée à la maîtrise" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253e3302802a631.png" alt="Tutoriel CSS3 de l'entrée à la maîtrise"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutoriel CSS3 de l'entrée à la maîtrise" href="https://www.php.cn/fr/course/19.html">Tutoriel CSS3 de l'entrée à la maîtrise</a>
                                    <div class="wzrthreerb">
                                        <div>243276 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="19">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/fr/course/21.html" title="Jouez rapidement avec le tutoriel CSS3" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/6253ef5017d08941.png" alt="Jouez rapidement avec le tutoriel CSS3"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Jouez rapidement avec le tutoriel CSS3" href="https://www.php.cn/fr/course/21.html">Jouez rapidement avec le tutoriel CSS3</a>
                                    <div class="wzrthreerb">
                                        <div>53076 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="21">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/fr/course/24.html" title="Tutoriel d'introduction de base CSS 0" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/62566a879336a216.png" alt="Tutoriel d'introduction de base CSS 0"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutoriel d'introduction de base CSS 0" href="https://www.php.cn/fr/course/24.html">Tutoriel d'introduction de base CSS 0</a>
                                    <div class="wzrthreerb">
                                        <div>113615 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="24">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                                <li>
                                <a target="_blank" href="https://www.php.cn/fr/course/107.html" title="Tutoriel de démarrage CSS3" class="wzrthreelaimg">
                                    <img src="https://img.php.cn/upload/course/000/000/068/625fa30404935366.jpg" alt="Tutoriel de démarrage CSS3"/>
                                </a>
                                <div class="wzrthree-right">
                                    <a target="_blank" title="Tutoriel de démarrage CSS3" href="https://www.php.cn/fr/course/107.html">Tutoriel de démarrage CSS3</a>
                                    <div class="wzrthreerb">
                                        <div>41700 <b class="kclbcollectb"></b></div>
                                     
                                                                                    <div class="courseICollection" data-id="107">
                                                <b class="nofollow small-nocollect"></b>
                                            </div>
                                                                            </div>
                                </div>
                            </li>
                                    </ul>
                <ul class="two" style="display: none;">
                                            <li>
                            <a target="_blank" href="https://www.php.cn/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="https://www.php.cn/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 >1420498 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="https://www.php.cn/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="https://www.php.cn/fr/course/286.html">Tutoriel vidéo JAVA pour débutants</a>
                                <div class="wzrthreerb">
                                    <div >2508147 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="https://www.php.cn/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="https://www.php.cn/fr/course/504.html">Tutoriel vidéo d'introduction base zéro à l'apprentissage de Python de Little Turtle</a>
                                <div class="wzrthreerb">
                                    <div >505679 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="https://www.php.cn/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="https://www.php.cn/fr/course/901.html">Introduction rapide au développement web front-end</a>
                                <div class="wzrthreerb">
                                    <div >215567 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="https://www.php.cn/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="https://www.php.cn/fr/course/234.html">Maîtrisez les didacticiels vidéo PS à partir de zéro</a>
                                <div class="wzrthreerb">
                                    <div >884903 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="https://www.php.cn/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="https://www.php.cn/fr/course/1648.html">[Web front-end] Démarrage rapide de Node.js</a>
                                <div class="wzrthreerb">
                                    <div >7085 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="https://www.php.cn/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="https://www.php.cn/fr/course/1647.html">Collection complète de cours full-stack de développement Web étranger</a>
                                <div class="wzrthreerb">
                                    <div >5505 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="https://www.php.cn/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="https://www.php.cn/fr/course/1646.html">Aller au langage pratique GraphQL</a>
                                <div class="wzrthreerb">
                                    <div >4640 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="https://www.php.cn/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="https://www.php.cn/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 >666 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="https://www.php.cn/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="https://www.php.cn/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 >23439 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="https://www.php.cn/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="https://www.php.cn/fr/toolset/js-special-effects/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="https://www.php.cn/fr/toolset/js-special-effects/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="https://www.php.cn/fr/toolset/js-special-effects/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="https://www.php.cn/fr/toolset/js-special-effects/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="https://www.php.cn/fr/toolset/js-special-effects/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="https://www.php.cn/fr/toolset/js-special-effects/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="https://www.php.cn/fr/toolset/js-special-effects/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="https://www.php.cn/fr/toolset/js-special-effects/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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-materials/3078"  target="_blank"  title="Matériau vectoriel d'éléments d'été mignons (EPS+PNG)">[Matériau PNG] Matériau vectoriel d'éléments d'été mignons (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/fr/toolset/website-materials/3077"  target="_blank"  title="Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)">[Matériau PNG] Matériel vectoriel de quatre badges de graduation rouges 2023 (AI+EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/fr/toolset/website-materials/3076"  target="_blank"  title="Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)">[image de bannière] Oiseau chantant et chariot rempli de fleurs design matériel vectoriel de bannière de printemps (AI + EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/fr/toolset/website-materials/3075"  target="_blank"  title="Matériau vectoriel de chapeau de graduation doré (EPS+PNG)">[Matériau PNG] Matériau vectoriel de chapeau de graduation doré (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/fr/toolset/website-materials/3074"  target="_blank"  title="Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)">[Matériau PNG] Matériel vectoriel d'icône de montagne de style noir et blanc (EPS+PNG)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/fr/toolset/website-materials/3073"  target="_blank"  title="Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes">[Matériau PNG] Matériel vectoriel de silhouette de super-héros (EPS+PNG) avec des capes de couleurs différentes et des poses différentes</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/fr/toolset/website-materials/3072"  target="_blank"  title="Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)">[image de bannière] Matériel vectoriel de bannière Arbor Day de style plat (AI + EPS)</a>
                            </div>
                        </li>
                                            <li>
                            <div class="wzrfourli">
                                <span class="layui-badge-dots wzrflr"></span>
                                <a href="https://www.php.cn/fr/toolset/website-materials/3071"  target="_blank"  title="Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (EPS+PNG)">[Matériau PNG] Matériel vectoriel de neuf bulles de discussion explosives de style bande dessinée (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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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="https://www.php.cn/fr/toolset/website-source-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>
<footer>
    <div class="footer">
        <div class="footertop">
            <img src="/static/imghw/logo.png" alt="">
            <p>Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！</p>
        </div>
        <div class="footermid">
            <a href="https://www.php.cn/fr/about/us.html">À propos de nous</a>
            <a href="https://www.php.cn/fr/about/disclaimer.html">Clause de non-responsabilité</a>
            <a href="https://www.php.cn/fr/update/article_0_1.html">Sitemap</a>
        </div>
        <div class="footerbottom">
            <p>
                © php.cn All rights reserved
            </p>
        </div>
    </div>
</footer>

<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>