Home-theater-designers
Θέλετε ο ιστότοπός σας να φαίνεται εκπληκτικός --- αλλά οι δεξιότητές σας ανάπτυξης ιστού λείπουν.
Μην απελπίζεστε! Δεν χρειάζεται να γνωρίζετε CSS ή PHP για να δημιουργήσετε έναν φανταχτερό ιστότοπο με υπέροχα εφέ. Μερικές απλές ετικέτες HTML και η γνώση του τρόπου αντιγραφής και επικόλλησης θα κάνει.
Για να ξεκινήσετε με μερικά υπέροχα εφέ HTML, έχουμε συγκεντρώσει αυτά τα δωρεάν πρότυπα κώδικα εφέ HTML. Θα ενισχύσουν τη λειτουργικότητα και την εμπειρία χρήστη του ιστότοπού σας, ενώ δεν θα σπάσουν την τράπεζα. Ενώ είναι ως επί το πλείστον HTML, αυτοί οι δροσεροί κωδικοί μπορεί επίσης να περιέχουν κάποιο CSS και PHP.
1. Cool Parallax Effect With HTML
Πιθανότατα έχετε δει το εφέ παράλλαξης που χρησιμοποιείται σε ιστότοπους με διαφημίσεις στο διαδίκτυο. Καθώς κάνετε κύλιση προς τα κάτω σε ένα άρθρο, το η εικόνα φόντου φαίνεται να μετακινείται με διαφορετικό ρυθμό, ή εμφανίζεται μια διαφήμιση.
Εναλλακτικά, ίσως η εικόνα φόντου αλλάζει καθώς επισκέπτεστε διαφορετικά μέρη του ιστότοπου. Είναι ένα υπέροχο εφέ που προσθέτει οπτικό βάθος στο περιεχόμενο και ιδανικό ακόμα κι αν δεν το κάνετε κατανοήσει τον βασικό κώδικα HTML Το
Μπορείτε να παίξετε με το εφέ και να αντιγράψετε τον κώδικα για ένα απλό εφέ κύλισης Parallax από το W3Schools Το
Στην πιο εξελιγμένη έκδοσή του, αυτό το εφέ είναι ένας συνδυασμός HTML, CSS και JS.
Προχωρήστε και λάβετε τους κωδικούς για τα παραπάνω Επίδραση κεφαλίδας/υποσέλιδου Parallax από το CodePen Το
2. Μετακινούμενος κώδικας κουτιού σχολιασμού HTML
Αυτό είναι ένα απλό αλλά χρήσιμο στοιχείο HTML που σας επιτρέπει να συσκευάζετε μεγάλα αποσπάσματα κειμένου σε συμπαγή μορφή. Με αυτόν τον τρόπο δεν καταλαμβάνει ολόκληρο το χώρο στη σελίδα.
Μπορείτε να παίξετε με τα χρώματα και το μέγεθος του πλαισίου κειμένου για να ταιριάζει στις ανάγκες σας.
Εισαγωγή:
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :) Εάν επιθυμείτε κάτι λίγο πιο φανταχτερό, μπορείτε επίσης να λάβετε κώδικα ένα προσαρμόσιμο πλαίσιο σχολίων από το Quackit Το
Προσφέρουν πολλά πρότυπα, αλλά μπορείτε επίσης να χρησιμοποιήσετε τον επεξεργαστή τους για να αλλάξετε και να δοκιμάσετε (εκτελέσετε) με μη αυτόματο τρόπο τον προσαρμοσμένο κώδικά σας.
3. Ένα δροσερό κόλπο HTML: Επισημασμένο κείμενο
Με ένα απλόΕτικέτα HTML μπορείτε να προσθέσετε έναν τόνο εντυπωσιακών εφέ στο κείμενο ή τις εικόνες σας. Λάβετε υπόψη ότι δεν λειτουργούν όλοι σε προγράμματα περιήγησης. Αυτά που αναφέρονται εδώ λειτουργούν στο Google Chrome, το Microsoft Edge και το Mozilla Firefox.
Αυτό το εφέ κειμένου HTML επισημαίνει το κείμενο μεταξύ τουετικέτες.
Εισαγωγή:
Your highlighted text here.Επίδειξη εξόδου:
4. Προσθήκη εικόνας φόντου σε κείμενο
Ομοίως, μπορείτε να αλλάξετε το χρώμα του κειμένου σας ή να προσθέσετε μια εικόνα φόντου. Αυτό φαίνεται υπέροχο εάν το μέγεθος γραμματοσειράς του κειμένου είναι μεγαλύτερο.
Εισαγωγή:
MakeUseOf presents...Το ίδιο αποτέλεσμα επιτυγχάνεται με την προσθήκη στοιχείων στυλ και γραμματοσειράς στο κείμενο σε a ετικέτα.
η ενέργεια δεν μπορεί να ολοκληρωθεί επειδή το αρχείο είναι ανοιχτό σε άλλο πρόγραμμα
Επίδειξη εξόδου:
5. Χρήσιμο κόλπο HTML για να προσθέσετε μια Εργαλειοθήκη τίτλου
Μια επεξήγηση τίτλου εμφανίζεται όταν κάνετε κύλιση με το ποντίκι πάνω σε ένα κομμάτι «χειρισμένου» κειμένου ή εικόνας. Θα έχετε δει να χρησιμοποιούνται σε ιστότοπους σε εικόνες, συνδεδεμένο κείμενο ή ακόμη και στοιχεία μενού σε εφαρμογές επιφάνειας εργασίας. Χρησιμοποιήστε αυτόν τον κώδικα HTML για να προσθέσετε μια επεξήγηση εργαλείου σε απλό κείμενο στην ιστοσελίδα σας.
Εισαγωγή:
Move your mouse over me!Επίδειξη εξόδου:
6. Τα πιο cool κόλπα HTML: κύλιση ή πτώση κειμένου
Όταν ψάχνετε για 'marquee html' στο Google, θα ανακαλύψετε ένα μικρό πασχαλινό αυγό. Βλέπετε τον αριθμό κύλισης αποτελεσμάτων αναζήτησης στο επάνω μέρος; Αυτό είναι ένα αποτέλεσμα που δημιουργήθηκε από την παρωχημένη πλέον ετικέτα marquee. Ενώ αυτό το κάποτε δροσερό εφέ κειμένου HTML έχει καταργηθεί, τα περισσότερα προγράμματα περιήγησης εξακολουθούν να το υποστηρίζουν.
Εισαγωγή:
I wanna scroll with it, baby!Επίδειξη εξόδου:
Μπορείς προσθέστε επιπλέον χαρακτηριστικά για τον έλεγχο της συμπεριφοράς κύλισης, του χρώματος του φόντου, της κατεύθυνσης, του ύψους και άλλων. Φροντίστε, όμως? αυτές οι επιδράσεις μπορεί να γίνουν αρκετά ενοχλητικές εάν χρησιμοποιηθούν υπερβολικά.
Για ένα δροσερό πέσιμο εφέ κειμένου, κατευθυνθείτε ξανά στο Quackit και αντιγράψτε τον εξαιρετικά προσαρμοσμένο κώδικα κάλυψης τους.
7. Δημιουργήστε ένα Cool Switchmenu με HTML
Τα πιο ωραία κόλπα HTML είναι δυναμικά εφέ HTML. Ωστόσο, συχνά βασίζονται σε σενάρια. Εδώ είναι ένα αποτέλεσμα για τα μενού που συμφωνείτε ότι φαίνεται πολύ λείο.
Είναι λίγο πιο περίπλοκο από τη μέση ετικέτα HTML επειδή λειτουργεί με ένα φύλλο στυλ και σενάρια. Το πλεονέκτημα είναι ότι δεν χρειάζεται να ανεβάσετε ένα αρχείο CSS ή σεναρίου για να λειτουργήσει. Αντ 'αυτού, απλά επικολλήστε τον ακόλουθο κώδικα στην ενότητα του ιστότοπού σας.
Εισαγωγή:
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu='yes' //'yes' or 'no'. Make sure each SPAN content contains an incrementing ID starting at 1 (id='sub1', id='sub2', etc)
var persisttype='sitewide' //enter 'sitewide' for menu to persist across site, 'local' for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('n')
document.write('.submenu{display: none;}n')
document.write('n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById('masterdiv').getElementsByTagName('span'); //DynamicDrive.com change
if(el.style.display != 'block'){ //DynamicDrive.com change
for (var i=0; i if (ar[i].className=='submenu') //DynamicDrive.com change
ar[i].style.display = 'none';
}
el.style.display = 'block';
}else{
el.style.display = 'none';
}
}
}function get_cookie(Name) {
var search = Name + '='
var returnvalue = '';
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=='yes'){
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!='')
document.getElementById(cookievalue).style.display='block'
}
}function savemenustate(){
var inc=1, blockid=''
while (document.getElementById('sub'+inc)){
if (document.getElementById('sub'+inc).style.display=='block'){
blockid='sub'+inc
break
}
inc++
}
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=(persisttype=='sitewide')? blockid+';path=/' : blockid
document.cookie=cookiename+'='+cookievalue
}if (window.addEventListener)
window.addEventListener('load', onloadfunction, false)
else if (window.attachEvent)
window.attachEvent('onload', onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=='yes' && document.getElementById)
window.onunload=savemenustate
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
Επίδειξη εξόδου:
Δυστυχώς, δεν μπορούμε να αποδείξουμε αυτό το αποτέλεσμα εδώ. Αλλά η αρχική πηγή, Δυναμική κίνηση , διαθέτει ένα λειτουργικό αντίγραφο αυτού του δυναμικού εφέ HTML.
8. Αποκτήστε ένα υπολογιστικό φύλλο HTML με το Tableizer
Εάν θέλετε να εμφανίσετε ένα υπολογιστικό φύλλο στον ιστότοπό σας, αφήστε το Tableizer! μετατρέψτε τα δεδομένα σας σε πίνακα HTML. Απλώς επικολλήστε τα ακατέργαστα δεδομένα από το Excel, το Έγγραφο Google ή οποιοδήποτε άλλο υπολογιστικό φύλλο στο εργαλείο μετατροπής στη διεύθυνση tableizer.journalistopia.com Το Τροποποιήστε το επιλογές πίνακα , στη συνέχεια κάντε κλικ Πινακοποιήστε το για να λάβετε την έξοδο HTML.
Αυτός είναι ίσως ένας από τους πιο cool κώδικες HTML για τον ιστότοπό σας, όπως το Tableize It! κάνει όλη τη σκληρή δουλειά.
Κάντε κλικ Αντιγραφή HTML στο Πρόχειρο για να αντιγράψετε τον κώδικα HTML και να τον προσθέσετε στον ιστότοπό σας. Εξετάστε το ενδεχόμενο να επεξεργαστείτε τα χρώματα φόντου για να φαίνεται πολύ πιο δροσερό.
ενεργοποιήστε τα παράθυρα οθόνης αφής 10
Αν και αυτό δεν είναι πραγματικά ένα αποτέλεσμα HTML, είναι αρκετά βολικό.
Περισσότεροι δροσεροί κώδικες HTML και εφέ για τον ιστότοπό σας
Η δύναμη της HTML, CSS και JavaScript προσφέρει δυνητικά απεριόριστες επιλογές για εκπληκτικά εφέ στον ιστότοπό σας. Θέλουν περισσότερα?
- Καλούδια HTML σου δίνει υπέροχαετικέτες ιδέες.
- Δυναμική κίνηση έχει πολλά απίστευτα δυναμικά scripts HTML.
- Quackit προσφέρει δροσερό κώδικα HTML.
Σας δείξαμε οκτώ υπέροχους κώδικες HTML που μπορείτε να αντιγράψετε για να βελτιώσετε τον ιστότοπό σας. Αν και διαφορετικά, όλα είναι εύκολα στην εφαρμογή τους αρκεί να γνωρίζετε βασικές τεχνικές κωδικοποίησης HTML.
Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ 17 Απλά παραδείγματα κώδικα HTML που μπορείτε να μάθετε σε 10 λεπτάΘέλετε να δημιουργήσετε μια βασική ιστοσελίδα; Μάθετε αυτά τα παραδείγματα HTML και δοκιμάστε τα σε ένα πρόγραμμα επεξεργασίας κειμένου για να δείτε πώς φαίνονται στο πρόγραμμα περιήγησής σας.
Διαβάστε Επόμενο Σχετικά θέματα- Προγραμματισμός
- HTML
- Ανάπτυξη διαδικτύου
- Εργαλεία για Webmasters
Αναπληρωτής συντάκτης για την ασφάλεια, το Linux, το DIY, τον προγραμματισμό και την τεχνολογία που εξηγείται και πραγματικά χρήσιμο παραγωγό Podcast, με μεγάλη εμπειρία στην υποστήριξη επιτραπέζιων υπολογιστών και λογισμικού. Συνεργάτης στο περιοδικό Linux Format, ο Christian είναι Raspberry Pi tinkerer, λάτρης του Lego και retro fan των gaming.
Περισσότερα από τον Christian CawleyΕγγραφείτε στο newsletter μας
Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!
Κάντε κλικ εδώ για εγγραφή