Les sujets:

Les partenaires publicitaires:

Réponses populaires


Questions connexes

Comment créer un calendrier html interactive

Une ligne de temps est un moyen utile pour afficher une liste d'événements sur une page Web, et une ligne de temps interactive donne aux utilisateurs un certain contrôle sur le contenu de visualisation. Alors que de nombreux moyens existent pour créer une ligne de temps interactive, la plupart exigent plus que le langage de balisage hypertexte juste (HTML). Cependant, il ya une solution très simple HTML. Vous pouvez facilement créer des barres de défilement interactifs pour votre ligne de temps en utilisant HTML de "style" attribuer. En faisant cela, les utilisateurs de votre temps ligne seront en mesure de faire défiler son contenu comme ils aiment.


Sommaire

  • Instructions
  • Conseils & avertissements

    • Choses que vous devez




    • logiciel de l'éditeur de texte

    Instructions

    1. Créer votre fichier HTML. Ouvrez un nouveau document dans un logiciel éditeur de texte et de créer une page HTML de base. Ajoutez ce code dans le code HTML "corps" section:





      L'élément de division ("div") Est un conteneur pour la liste de votre temps en ligne des événements. Le "débordement" valeur de "auto" ajoute une barre de défilement interactif lorsque votre ligne de temps devient plus large ou plus élevé que ce conteneur. Enregistrez la page sous "timeline.html".

    2. Créez votre propre contenu en ligne de temps. Dans l'espace entre l'ouverture et la fermeture "div" balises, ajouter les événements de votre temps en ligne ordre croissant ou décroissant. Ajouter chaque événement intérieur de sa section du HTML bien formé. Gardez enregistrement de la page que vous travaillez.

    3. Testez votre code HTML. Ouvrez le navigateur et la charge de Web de votre ordinateur "timeline.html." Si sa teneur est supérieure à la "div" récipient, vous verrez une barre de défilement interactive. Réglez le "largeur" et "hauteur" les valeurs du conteneur en fonction de votre mise en page verticale ou horizontale.




    Conseils & Avertissements

    • Agencements verticaux sont les plus faciles à code. Enroulez simplement chacun de vos sections de l'événement au sein de sa propre "div" élément. Pour une disposition horizontale, vous pouvez utiliser une table avec une seule rangée et une cellule de colonne pour chaque événement. Si vous faites cela, assurez la hauteur de votre table le même que votre "div" la hauteur de conteneur. Prenez soin de votre table de verticale "marge" et "rembourrage" des valeurs.
    • Cet article crée une barre de défilement interactive en utilisant un "en ligne" feuille de style en cascade (CSS). "En Ligne" feuilles de style vont à l'intérieur du "style" attribut de la balise d'ouverture d'un élément HTML. Vous pouvez utiliser un "interne" ou "externe" feuille de style à la place, cependant. "Interne" feuilles de style vont à l'intérieur du HTML "tête" section. "Externe" feuilles de style sont séparés "Css" fichiers. En utilisant un de ces types vous donne plus de contrôle sur la mise en forme de tout contenu HTML.
    • Vous pouvez étendre l'interactivité de l'exemple en utilisant javascript. Vous pourriez commencer par l'ajout de boutons HTML, puis écrire un javascript afin de déplacer le contenu de votre ligne de temps lorsque les utilisateurs cliquent sur les boutons.

    Questions connexes

    » » » » Comment créer un calendrier html interactive