ερώτηση

Γνώση Υπολογιστών >> ερώτηση >  >> PC Αντιμετώπιση προβλημάτων

Πώς να προσθέσετε κουμπιά 3D CSS στο Weebly;

Προσθήκη κουμπιών 3D CSS στο Weebly περιλαμβάνει μερικά βήματα προσαρμογής κώδικα εντός της προσαρμοσμένης ενότητας CSS. Δείτε πώς μπορείτε να τα προσθέσετε στον ιστότοπό σας στο Weebly:

Βήμα 1:Δημιουργία προσαρμοσμένου CSS

ένα. Στο πρόγραμμα επεξεργασίας Weebly, κάντε κλικ στις "Ρυθμίσεις" στην επάνω δεξιά γωνία.

σι. Επιλέξτε "SEO &Code" από το αριστερό μενού.

ντο. Κάντε κλικ στην καρτέλα "Προσαρμοσμένο CSS".

ρε. Επικολλήστε τον ακόλουθο κώδικα στο πεδίο Προσαρμοσμένο CSS:

```

.btn {

οθόνη:inline-block;

padding:15px 25px;

μέγεθος γραμματοσειράς:16 px;

text-align:κέντρο;

κείμενο-διακόσμηση:κανένα;

χρώμα:#fff;

φόντο:#3498db;

σύνορο:κανένα;

δρομέας:δείκτης;

}

.btn:hover,

.btn:active {

φόντο:#2980b9;

}

.btn:active {

transform:scale(0,95);

}

```

Βήμα 2:Προσθήκη στοιχείου HTML για το κουμπί

ένα. Στο πρόγραμμα επεξεργασίας Weebly, σύρετε και αποθέστε ένα στοιχείο "Ενσωμάτωση κώδικα" στη σελίδα σας όπου θέλετε να εμφανίζεται το κουμπί.

σι. Επικολλήστε τον ακόλουθο κώδικα HTML στο πεδίο "Code":

```

Κάντε κλικ σε εμένα

```

Βήμα 3:Προσαρμόστε το κουμπί

Μπορείτε να προσαρμόσετε το κουμπί τροποποιώντας τις ακόλουθες ιδιότητες στον κώδικα CSS:

ένα. `.btn {color:#fff; φόντο:#3498db;}` - Αλλάξτε το χρώμα κειμένου και το χρώμα φόντου του κουμπιού.

σι. `.btn:hover, .btn:active { background:#2980b9;}` - Αλλάξτε το χρώμα αιώρησης και ενεργής κατάστασης του κουμπιού.

Βήμα 4:Προεπισκόπηση και δημοσίευση

ένα. Κάντε κλικ στο κουμπί "Προεπισκόπηση" για να δείτε πώς φαίνεται το κουμπί στον ιστότοπό σας.

σι. Εάν είστε ικανοποιημένοι με τα αποτελέσματα, κάντε κλικ στο "Δημοσίευση" για να πραγματοποιήσετε τις αλλαγές ζωντανά στον ιστότοπό σας.

Σημείωση :Ο παρεχόμενος κώδικας CSS χρησιμοποιεί το κείμενο του κουμπιού "Κάντε κλικ σε εμένα". Μπορείτε να το αντικαταστήσετε με το επιθυμητό κείμενο εντός του κώδικα HTML.

Ακολουθώντας αυτά τα βήματα, μπορείτε να προσθέσετε κουμπιά 3D CSS στον ιστότοπό σας Weebly για να βελτιώσετε την εμπειρία χρήστη και την οπτική του ελκυστικότητα.

Συναφής σύστασή

Πνευματικά δικαιώματα © Γνώση Υπολογιστών Όλα τα δικαιώματα κατοχυρωμένα