Lier html, css, javasript
Fermé
K3vin Orton
Messages postés
57
Date d'inscription
vendredi 21 février 2014
Statut
Membre
Dernière intervention
12 juin 2017
-
Modifié le 12 juin 2017 à 03:53
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 12 juin 2017 à 14:14
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 - 12 juin 2017 à 14:14
A voir également:
- Lier html, css, javasript
- Editeur html - Télécharger - HTML
- Espace en html - Astuces et Solutions
- Lier calendrier outlook et gmail - Guide
- Espace html ✓ - Forum Webmastering
- &Nbsp html ✓ - Forum Webmastering
2 réponses
Grandasse_
Messages postés
924
Date d'inscription
jeudi 28 janvier 2010
Statut
Membre
Dernière intervention
27 avril 2023
595
12 juin 2017 à 08:10
12 juin 2017 à 08:10
Bonjour,
Il manque les balises de script, le document doit être structuré comme suit :
Il manque les balises de script, le document doit être structuré comme suit :
<html> <head> <style type="text/css"> //CSS </style> <script type="text/javascript"> //JS </script> </head> <body> </body> </html>
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
12 juin 2017 à 14:14
12 juin 2017 à 14:14
Salut
c est normal tu n a pas mis de lien vers la librairie jquery !!!!!
la je t ai mis un lien vers la librairie heberger sur google app ,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
mais tu peu la telecharger et l heberger toi meme!
https://jquery.com/download/
a+
c est normal tu n a pas mis de lien vers la librairie jquery !!!!!
la je t ai mis un lien vers la librairie heberger sur google app ,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
mais tu peu la telecharger et l heberger toi meme!
https://jquery.com/download/
<!DOCTYPE html> <html> <head> <title> RAD ZONE Webcreation </title> <meta charset="utf-8"> <style type="text/css"> <!-- body { font-family: 'Ubuntu', sans-serif; width: 960px; } p{ color: #525252; font-size: 12px; } .skillbar { position: relative; display: block; margin-bottom: 15px; width: 100%; background: #eee; height: 35px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -ms-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -ms-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; } .skillbar-title { position: absolute; top: 0; left: 0; width: 110px; font-weight: bold; font-size: 13px; color: #ffffff; background: #6adcfa; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .skillbar-title span { display: block; background: rgba(0, 0, 0, 0.1); padding: 0 20px; height: 35px; line-height: 35px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; } .skillbar-bar { height: 35px; width: 0px; background: #6adcfa; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .skill-bar-percent { position: absolute; right: 10px; top: 0; font-size: 11px; height: 35px; line-height: 35px; color: #ffffff; color: rgba(0, 0, 0, 0.4); } --> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> jQuery(document).ready(function() { jQuery('.skillbar').each(function() { jQuery(this).find('.skillbar-bar').animate( { width: jQuery(this).attr('data-percent') }, 6000 ); } ); } ); </script> </head> <body> <h1> jQuery & CSS3 Skills Bar </h1> <div class="skillbar clearfix" data-percent="20%"> <div class="skillbar-title" style="background: #d35400;"> <span>HTML5</span> </div> <div class="skillbar-bar" style="background: #e67e22;"></div> <div class="skill-bar-percent"> 20% </div> </div><!-- End Skill Bar --> <div class="skillbar clearfix" data-percent="25%"> <div class="skillbar-title" style="background: #2980b9;"> <span>CSS3</span> </div> <div class="skillbar-bar" style="background: #3498db;"></div> <div class="skill-bar-percent"> 25% </div> </div><!-- End Skill Bar --> <div class="skillbar clearfix" data-percent="50%"> <div class="skillbar-title" style="background: #2c3e50;"> <span>jQuery</span> </div> <div class="skillbar-bar" style="background: #2c3e50;"></div> <div class="skill-bar-percent"> 50% </div> </div><!-- End Skill Bar --> <div class="skillbar clearfix" data-percent="40%"> <div class="skillbar-title" style="background: #46465e;"> <span>PHP</span> </div> <div class="skillbar-bar" style="background: #5a68a5;"></div> <div class="skill-bar-percent"> 40% </div> </div><!-- End Skill Bar --> <div class="skillbar clearfix" data-percent="75%"> <div class="skillbar-title" style="background: #333333;"> <span>Wordpress</span> </div> <div class="skillbar-bar" style="background: #525252;"></div> <div class="skill-bar-percent"> 75% </div> </div><!-- End Skill Bar --> <div class="skillbar clearfix" data-percent="100%"> <div class="skillbar-title" style="background: #27ae60;"> <span>SEO</span> </div> <div class="skillbar-bar" style="background: #2ecc71;"></div> <div class="skill-bar-percent"> 100% </div> </div><!-- End Skill Bar --> <div class="skillbar clearfix" data-percent="70%"> <div class="skillbar-title" style="background: #124e8c;"> <span>Photoshop</span> </div> <div class="skillbar-bar" style="background: #4288d0;"></div> <div class="skill-bar-percent"> 70% </div> </div><!-- End Skill Bar --> <p> <strong>SOURCE :</strong> http://w3lessons.info/2013/06/04/skill-bar-with-jquery-css3/ </p> </body> </html>
a+
12 juin 2017 à 11:57