Numéros de ligne pour utilisant SVG</h1> <div class="wzctPerson"> <div class="wzctpleft"> <a href="//m.sbmmt.com/fr/member/465014.html" target="_blank"> <img src="https://img.php.cn/upload/avatar/000/465/014/627b58ba8fa6c600.jpg" /></a> <div class="wzctplright"> <div class="wzctpltop"> <div class="name">王林</div> </div> <div class="wzctpldown"> <span style="margin-left:0px; color: #999999;">Libérer： 2024-08-19 18:33:32</span> </div> </div> </div> <div class="wzctpright"> <div class="wzctpr">original</div> <div class="wzctprll">286 Les gens l'ont consulté</div> </div> </div> </div> <div class="wzconLine"></div> <div class="php-article"> <div class="article-list-left detail-content-wrap content"> <p>L'autre jour, je travaillais sur un générateur de schéma JSON et je voulais afficher les numéros de ligne dans une <textarea>. Rien d'extraordinaire, et sans tenir compte des sauts de ligne doux ou de quoi que ce soit de compliqué.</p> <p>J'ai fait quelques recherches et trouvé plusieurs approches :</p> <ol> <li>Utilisation d'une image d'arrière-plan (TinyMCE le fait, en utilisant un PNG)</li> <li>En utilisant un <ol> liste ordonnée. </li> </ol> <p>Je n’ai aimé aucun d’entre eux ! Le premier n'avait pas l'air net et ne correspondait pas aux styles que j'avais déjà en place pour mes éléments <textarea>.</p> <p>Le second nécessitait beaucoup de JavaScript pour maintenir cette liste ordonnée : ajout/suppression d'éléments <li> de manière dynamique, synchronisation des événements de défilement et bien plus encore.</p> <p>J'ai donc fini par créer un hybride. </p> <p>Il s'agit d'un SVG généré dynamiquement, stocké en tant que <em>Propriété personnalisée CSS</em> - et utilisé comme image d'arrière-plan, héritant des styles de son élément <textarea> parent.</p> <p><img src="https://img.php.cn/upload/article/000/000/000/172406361393154.png" alt="Line Numbers for <textarea> en utilisant SVG"></p> <p>Plongeons-nous.</p> <hr> <h2> Javascript </h2> <p>Tout d'abord, la méthode principale :<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">lineNumbers(element, numLines = 50, inline = false) </pre><div class="contentsignin">Copier après la connexion</div></div> <p>l'élément est l'élément <textarea> élément à utiliser, numLines le nombre de lignes à restituer et inline indique s'il faut stocker l'image générée sur element (true) ou sur document.body (false).</p> <p>Ensuite, nous définissons un préfixe pour la propriété personnalisée :<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const prefix = '--linenum-'; </pre><div class="contentsignin">Copier après la connexion</div></div> <p>Avant de continuer, nous vérifions s'il convient de réutiliser une propriété existante :<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">if (!inline) { const styleString = document.body.getAttribute('style') || ''; const regex = new RegExp(`${prefix}[^:]*`, 'g'); const match = styleString.match(regex); if (match) { element.style.backgroundImage = `var(${match[0]})`; return; } } </pre><div class="contentsignin">Copier après la connexion</div></div> <p>Ensuite, nous <strong>extrayons</strong> les styles de l'élément, en rendant le SVG avec la même famille de polices, la même taille de police, la même hauteur de ligne, etc. :<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const bgColor = getComputedStyle(element).borderColor; const fillColor = getComputedStyle(element).color; const fontFamily = getComputedStyle(element).fontFamily; const fontSize = parseFloat(getComputedStyle(element).fontSize); const lineHeight = parseFloat(getComputedStyle(element).lineHeight) / fontSize; const paddingTop = parseFloat(getComputedStyle(element).paddingTop) / 2; const translateY = (fontSize * lineHeight).toFixed(2); </pre><div class="contentsignin">Copier après la connexion</div></div> <p>Nous avons également besoin d'un identifiant aléatoire pour notre propriété :<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const id = `${prefix}${Math.random().toString(36).substr(2, 6)}`; </pre><div class="contentsignin">Copier après la connexion</div></div> <p>Et maintenant il est temps de rendre le SVG :<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const svg = `<svg xmlns="http://www.w3.org/2000/svg"> <style> svg { background: ${bgColor}; } text { fill: hsl(from ${fillColor} h s l / 50%); font-family: ${fontFamily}; font-size: ${fontSize}px; line-height: ${lineHeight}; text-anchor: end; translate: 0 calc((var(--n) * ${translateY}px) + ${paddingTop}px); } </style> ${Array.from({ length: numLines }, (_, i) => `<text x="90%" style="--n:${i + 1};">${i + 1}</text>`).join("")} </svg>`; </pre><div class="contentsignin">Copier après la connexion</div></div> <p><strong>Décomposons-le :</strong></p> <p>Dans la section <style>, nous définissons simplement les styles que nous avons extraits du fichier <textarea> plus tôt. Au lieu d'utiliser les attributs y et dy pour les éléments <text>, nous utilisons simplement une propriété --n pour traduire les éléments de texte en utilisant CSS.</p> <p>La dernière partie parcourt un tableau créé à partir de numLines et ajoute les éléments <text> au SVG principal.</p> <p>Nous y sommes presque !</p> <hr> <p>Pour utiliser le SVG généré comme propriété url(), nous devons le <strong>encoder</strong> :<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const encodedURI = `url("data:image/svg+xml,${encodeURIComponent(svg)}")`; </pre><div class="contentsignin">Copier après la connexion</div></div> <p>Et enfin, nous définissons cette propriété soit sur l'élément, soit sur le corps du document :<br> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">const target = inline ? element : document.body; target.style.setProperty(id, encodedURI); element.style.backgroundImage = `var(${id})`; </pre><div class="contentsignin">Copier après la connexion</div></div> <p><strong>Et c'est tout !</strong></p> <p>Pas trop mal, et seulement 610 octets, minifiés et compressés !</p> <hr> <h2> Démo </h2> <p>Vous pouvez voir une démo ici et télécharger le script complet ici.</p> <p>Vous trouverez ci-dessous un Codepen simplifié, n'utilisant pas la logique de propriété en ligne :</p> <p><iframe height="600" src="https://codepen.io/stoumann/embed/LYKQZKr?height=600&default-tab=result&embed-version=2" scrolling="no" frameborder="no" allowtransparency="true" loading="lazy" style="width: 100%;"> </iframe> </p> <hr> <h2> Avantages et inconvénients </h2> <p>Y a-t-il des avantages et des inconvénients ? Bien sûr qu'il y en a ! </p> <p>Personnellement, pour mon projet actuel, j'avais besoin d'un moyen simple et précis d'ajouter des numéros de ligne à un aperçu JSON dans une <textarea>, et cette méthode fait l'affaire.</p> <h3> Avantages </h3> <h4> Manipulation réduite du DOM </h4> <p>Cette méthode ne repose pas sur la manipulation du DOM. Les numéros de ligne sont générés sous la forme d'un seul SVG, stocké dans une propriété personnalisée CSS.</p> <h4> Synchronisation automatique </h4> <p>Étant donné que les numéros de ligne font partie de l'image d'arrière-plan, ils défilent automatiquement avec le contenu du texte, éliminant ainsi le besoin d'une logique de synchronisation manuelle.</p> <h4> Réutilisabilité entre les éléments </h4> <p>En stockant le SVG généré dans une propriété personnalisée CSS, il peut être réutilisé sur plusieurs éléments. Cela signifie que si plusieurs éléments nécessitent les mêmes numéros de ligne, ils peuvent tous référencer la même propriété personnalisée, évitant ainsi une génération SVG redondante.</p> <h4> Évolutivité </h4> <h2> La nature vectorielle de SVG garantit que les numéros de ligne restent nets et clairs quel que soit le niveau de zoom. </h2> <h3> Inconvénients </h3> <h4> Accessibilité </h4> <p>Les listes ordonnées sont plus accessibles aux lecteurs d'écran et aux technologies d'assistance, tandis que les numéros de ligne basés sur SVG peuvent être ignorés ou mal interprétés.</p> <h4> Complexité de la personnalisation </h4> <p>Styliser et interagir avec des numéros de ligne individuels dans une liste ordonnée est simple. En revanche, l’approche SVG rend plus difficile la personnalisation ou l’ajout d’interactivité à des numéros de ligne spécifiques.</p> <h4> Compatibilité du navigateur </h4> <p>Les propriétés personnalisées SVG et CSS peuvent ne pas s'afficher de manière cohérente dans tous les navigateurs. L'implémentation actuelle présente des problèmes avec Safari, où nous devons déduire (paddingTop / 10) de TranslateY.</p> <h4> Gestion du contenu dynamique </h4> <p>Les listes ordonnées peuvent être plus flexibles pour gérer les mises à jour de contenu dynamique, telles que l'ajout ou la suppression de lignes, alors que l'approche SVG peut nécessiter la régénération et la réapplication de l'intégralité de l'image d'arrière-plan.</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 style="display: inline-flex;float: right; color:#333333;">source：dev.to</div> </div> <div class="wzconOtherwz"> <a href="//m.sbmmt.com/fr/faq/1796574374.html" title="Mon premier projet de développement Web : apprendre le HTML et le CSS"> <span>Article précédent：Mon premier projet de développement Web : apprendre le HTML et le CSS</span> </a> <a href="//m.sbmmt.com/fr/faq/1796575869.html" title="J'aime le déplacer, le déplacer (Partie 2)"> <span>Article suivant：J'aime le déplacer, le déplacer (Partie 2)</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/1796575997.html">Binance to Support Frontier (FRONT) Token Swap and Rebranding to Self Chain (SLF)</a> </div> <div>2024-08-20 00:45:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/fr/faq/1796575991.html">Polychain Capital Leads $6.7M Investment Into New Bitcoin-Centric Yield-Generating Network Corn</a> </div> <div>2024-08-20 00:39:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/fr/faq/1796575990.html">Solana Endured an Underwhelming Week as Fund Flow into Crypto Investment Products Slowed Down</a> </div> <div>2024-08-20 00:38:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/fr/faq/1796575989.html">Coin Center Wins Right to Sue U.S. Treasury, IRS Again Over Controversial Tax Reporting Rule</a> </div> <div>2024-08-20 00:37:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/fr/faq/1796575987.html">Best Crypto to Invest In August 2024: The Top-Picks</a> </div> <div>2024-08-20 00:35:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/fr/faq/1796575984.html">29 Pieces Of Evidence That Prove The Mandela Effect Is Real And We're Living In Alternate Timelines</a> </div> <div>2024-08-20 00:32:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/fr/faq/1796575975.html">Ewan Mitchell Carries the Coin That Symbolizes Daemon's Influence With Him to Get Into Character as Aemond</a> </div> <div>2024-08-20 00:22:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/fr/faq/1796575974.html">Polygon (MATIC) to Migrate to POL Token on September 4</a> </div> <div>2024-08-20 00:21:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/fr/faq/1796575972.html">Solana (SOL) Price Analysis: Consolidating Before Breakout</a> </div> <div>2024-08-20 00:19:17</div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots"></span> <a target="_blank" href="//m.sbmmt.com/fr/faq/1796575970.html">PureWallet+: A Revolutionary Product Transforming Digital Asset Management and Transactions</a> </div> <div>2024-08-20 00:16:17</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>1</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>969</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>9</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>1035</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>947</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>0</div> <div class="wdcdcirwatch flexRow ira"><b class="wdcdcirwatchi"></b>811</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>890</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/qqkjwydbk"><img src="https://img.php.cn/upload/subject/202407/22/2024072214325362151.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Pourquoi la page Web de l'espace QQ ne peut-elle pas être ouverte ?" /> </a> <a target="_blank" href="//m.sbmmt.com/fr/faq/qqkjwydbk" class="title-a-spanl" title="Pourquoi la page Web de l'espace QQ ne peut-elle pas être ouverte ?"><span>Pourquoi la page Web de l'espace QQ ne peut-elle pas être ouverte ?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/fr/faq/rhjlftpzd"><img src="https://img.php.cn/upload/subject/202407/22/2024072213511926628.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment créer un site FTP" /> </a> <a target="_blank" href="//m.sbmmt.com/fr/faq/rhjlftpzd" class="title-a-spanl" title="Comment créer un site FTP"><span>Comment créer un site FTP</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/fr/faq/pgsjdcghdsq"><img src="https://img.php.cn/upload/subject/202407/22/2024072211483834359.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Combien coûte le remplacement d'une batterie de téléphone portable Apple ?" /> </a> <a target="_blank" href="//m.sbmmt.com/fr/faq/pgsjdcghdsq" class="title-a-spanl" title="Combien coûte le remplacement d'une batterie de téléphone portable Apple ?"><span>Combien coûte le remplacement d'une batterie de téléphone portable Apple ?</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/fr/faq/zzbdsbbh"><img src="https://img.php.cn/upload/subject/202407/22/2024072214354427311.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="L'expression régulière ne contient pas" /> </a> <a target="_blank" href="//m.sbmmt.com/fr/faq/zzbdsbbh" class="title-a-spanl" title="L'expression régulière ne contient pas"><span>L'expression régulière ne contient pas</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/fr/faq/oytxff"><img src="https://img.php.cn/upload/subject/202407/22/2024072212254113030.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Méthode de retrait OuYi" /> </a> <a target="_blank" href="//m.sbmmt.com/fr/faq/oytxff" class="title-a-spanl" title="Méthode de retrait OuYi"><span>Méthode de retrait OuYi</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/fr/faq/localstorage"><img src="https://img.php.cn/upload/subject/202407/22/2024072213430426564.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="Comment utiliser le stockage local" /> </a> <a target="_blank" href="//m.sbmmt.com/fr/faq/localstorage" class="title-a-spanl" title="Comment utiliser le stockage local"><span>Comment utiliser le stockage local</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/fr/faq/wxwkljbs"><img src="https://img.php.cn/upload/subject/202407/22/2024072213281376632.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="La carte réseau sans fil ne peut pas se connecter" /> </a> <a target="_blank" href="//m.sbmmt.com/fr/faq/wxwkljbs" class="title-a-spanl" title="La carte réseau sans fil ne peut pas se connecter"><span>La carte réseau sans fil ne peut pas se connecter</span> </a> </li> <li class="ul-li"> <a target="_blank" href="//m.sbmmt.com/fr/faq/csortpxhsyf"><img src="https://img.php.cn/upload/subject/202407/22/2024072214040690427.jpg?x-oss-process=image/resize,m_fill,h_145,w_220" alt="utilisation de la fonction de tri c++sort" /> </a> <a target="_blank" href="//m.sbmmt.com/fr/faq/csortpxhsyf" class="title-a-spanl" title="utilisation de la fonction de tri c++sort"><span>utilisation de la fonction de tri c++sort</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="css怎么设置超出显示省略号" href="//m.sbmmt.com/fr/faq/482865.html">css怎么设置超出显示省略号</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="css怎么设置字体大小" href="//m.sbmmt.com/fr/faq/469426.html">css怎么设置字体大小</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="css中的hover怎么用" href="//m.sbmmt.com/fr/faq/417948.html">css中的hover怎么用</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="css中字间距怎么设置" href="//m.sbmmt.com/fr/faq/482889.html">css中字间距怎么设置</a> </div> </li> <li> <div class="wzczzwzli"> <span class="layui-badge-dots wzrolr"></span> <a style="height: auto;" title="css3新特性有哪些" href="//m.sbmmt.com/fr/faq/415878.html">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="//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>1395103 <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>4207063 <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>2353351 <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>493467 <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>826565 <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 >1395103 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 >2353351 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 >493467 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 >213435 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 >843705 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 >3194 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 >2569 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 >2016 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 >468 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 >11057 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/us.html" rel="nofollow" target="_blank" title="À propos de nous" class="cBlack">À propos de nous</a> <a href="//m.sbmmt.com/fr/about/disclaimer.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?1724088480"></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>