Τοποθέτηση ενός αντιγράφου στο κουμπί πρόχειρου σε μια ιστοσελίδα: 5 βήματα (με εικόνες)

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:35

Αυτό μπορεί να ακούγεται απλό και μπορεί να φανώ ανόητο για να το βάλω στο Instructables, αλλά στην πραγματικότητα, δεν είναι τόσο εύκολο. Υπάρχει CSS, Jquery, HTML, κάποια φανταχτερή javascript και, ω, καλά, ξέρετε.

Βήμα 1: Δημιουργήστε ένα στυλό

Υπάρχει αυτός ο υπέροχος ιστότοπος που ονομάζεται Codepen. Στο παρελθόν, μόνο για κωδικοποίηση σε HTML, συνήθιζα να το κάνω

1. Εκκινήστε το File Explorer.
2. Μεταβείτε στα έγγραφά μου.
3. Δημιουργήστε ένα αρχείο txt.
4. Μετονομάστε αυτό το αρχείο σε "MyHTMLDoc.html".
5. Πατήστε OK στο παράθυρο προειδοποίησης.
6. Κλείσιμο Εξερεύνησης αρχείων.
7. Ανοίξτε το Visual Studio, το οποίο διαρκεί πέντε λεπτά.
8. Ανοίξτε το αρχείο στο Visual Studio, το οποίο διαρκεί άλλα πέντε λεπτά. Το VS είναι πολύ αργό.
9. Ξεκινήστε.
10. Όταν τελειώσω, πρέπει να ανοίξω το αρχείο στο Edge για να δω την εργασία μου.

Τώρα, το μόνο που χρειάζεται να κάνετε είναι

1. Εκκινήστε το Edge.
2. Μεταβείτε στη διεύθυνση
3. Στην επάνω δεξιά γωνία, πατήστε το νέο Pen.
4. Ξεκινήστε την κωδικοποίηση.

Βλέπεις πόσο πιο εύκολο είναι; Απλώς εισάγετε τα JS, CSS και HTML στα αντίστοιχα πλαίσια. Τα αποτελέσματα εμφανίζονται αυτόματα στα δεξιά.

Στην πραγματικότητα, το Codepen είναι τόσο πολύ καλύτερο, που σας συνιστώ να πάτε να δημιουργήσετε τον λογαριασμό σας τώρα. Ναι, μισώ να είμαι η διαφήμιση, αλλά δεν μπορώ να το βοηθήσω. Είναι πολύ καλύτερο. Δεν μπορώ να κάνω τίποτα γι 'αυτό.

Or, εάν δεν θέλετε να δημιουργήσετε λογαριασμό, μπορείτε να δημιουργήσετε ένα στυλό χωρίς λογαριασμό. Μπορείτε να αποθηκεύσετε την πένα σας με το όνομα χρήστη "Ανώνυμος καπετάνιος".

Βήμα 2: Προσθήκη αναφορών

Δεδομένου ότι θα χρησιμοποιήσουμε το Jquery και αυτό το (πραγματικά) δροσερό πράγμα που ονομάζεται "Balloon.css", πρέπει πρώτα να προσθέσουμε αναφορές. Εάν είστε νέοι, θα σας πω πώς να το κάνετε αυτό στο Codepen.

1. Κάντε κλικ στην επιλογή Ρυθμίσεις.
2. Ανάλογα με το αν η αναφορά είναι φύλλο στυλ ή σενάριο, κάντε κλικ είτε σε CSS είτε σε Javascript.
3. Στην ενότητα Προσθήκη εξωτερικού (Javascript ή CSS) προσθέστε τις αναφορές.

Προσθήκη:

μπλα μπλα μπλα: ΜΠΛΑΑΑΑΑΑΑ !!!!

Τώρα αφαιρέστε το και τοποθετήστε την ετικέτα HTML που συνδέεται με το αγαπημένο σας CDN για Jquery και Balloon.css.

Βήμα 3: Κωδικός

Κάτω από αυτό, προσθέστε αυτόν τον κωδικό.

codepen.io/slate-coding/pen/oepQpX

Αντιγράψτε/επικολλήστε τον κώδικα στο στυλό σας.

Βήμα 4: Αλλαγή αυτού του κώδικα για να ταιριάζει στις ανάγκες σας

Μπορείτε να βιδώσετε όσο θέλετε με το στυλό που ταιριάζει στις ανάγκες σας και, στη συνέχεια, αντιγράψτε-επικολλήστε τον κώδικα όπου θέλετε.

Βήμα 5: Επίδειξη

codepen.io/alexvgs/pen/oepQpX