Home-theater-designers
Želite, da vaše spletno mesto izgleda čudovito --- vendar vaše veščine spletnega razvoja manjkajo.
Ne obupajte! Za izdelavo domišljijskega spletnega mesta s kul učinki vam ni treba poznati CSS ali PHP. Nekaj preprostih oznak HTML in poznavanje kopiranja in lepljenja bo dovolj.
Če želite začeti z nekaterimi kul učinki HTML, smo zbrali te brezplačne predloge kod z učinki HTML. Izboljšali bodo funkcionalnost in uporabniško izkušnjo vašega spletnega mesta, hkrati pa ne bodo zlomili bank. Čeprav so večinoma HTML, lahko te kul kode vsebujejo tudi nekaj CSS in PHP.
1. Cool Parallax Effect z HTML
Verjetno ste videli učinek paralakse, ki se uporablja na spletnih mestih s spletnimi oglasi. Ko se pomikate navzdol po članku, se se prikaže ozadje za pomikanje z drugačnim tempom ali pa se prikaže oglas.
Druga možnost je, da se slika ozadja spremeni, ko obiščete različne dele spletnega mesta. To je kul učinek, ki vsebini doda vizualno globino in je idealen, tudi če tega ne storite razumejo osnovno kodo HTML .
Lahko se igrate z učinkom in kopirate kodo za preprost pomični učinek Parallax iz W3Schools .
V svoji najbolj izpopolnjeni različici je ta učinek kombinacija HTML, CSS in JS.
Pojdite naprej in pridobite kode za zgoraj navedeno Učinek paralakse glave/noge iz CodePena .
2. Koda polja z komentarji HTML, ki jo je mogoče pomikati
To je preprost, a uporaben element HTML, ki vam omogoča, da dolge delčke besedila spakirate v kompaktno obliko. Tako ne zavzame celotnega prostora na strani.
Lahko se igrate z barvami in velikostjo besedilnega polja, da bo ustrezalo vašim potrebam.
Vhod:
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! :) Če želite nekaj bolj domišljijskega, lahko dobite tudi kodo za prilagodljivo polje za komentarje iz Quackita .
Ponujajo več predlog, lahko pa uporabite tudi njihov urejevalnik, da ročno spremenite in preizkusite (zaženete) kodo po meri.
3. Kul HTML trik: označeno besedilo
S preprostimOznako HTML lahko v besedilo ali slike dodate tono kul učinkov. Upoštevajte, da vsi ne delujejo v vseh brskalnikih. Tu omenjeni delujejo v brskalnikih Google Chrome, Microsoft Edge in Mozilla Firefox.
Ta besedilni učinek HTML poudarja besedilo medoznake.
Vhod:
Your highlighted text here.Predstavitev izhoda:
4. Besedilo dodajte sliko ozadja
Podobno lahko spremenite barvo besedila ali dodate sliko za ozadje. Ta izgleda odlično, če je velikost pisave besedila večja.
Vhod:
MakeUseOf presents...Enak učinek je dosežen z dodajanjem sloga in elementov pisave v besedilo v oznaka.
kako izbrisati vsa sporočila na macu
Predstavitev izhoda:
5. Koristni triki HTML za dodajanje naslova
Opomba naslova se prikaže, ko se z miško pomikate po kosu 'manipuliranega' besedila ali slike. Na spletnih mestih ste jih videli na slikah, povezanem besedilu ali celo menijskih elementih v namiznih aplikacijah. Uporabite to kodo HTML, da dodate opis v navadno besedilo na svoji spletni strani.
Vhod:
Move your mouse over me!Predstavitev izhoda:
6. Najbolj kul triki doslej: pomikanje ali padajoče besedilo
Ko iščete »marquee html« v Googlu, boste odkrili malo velikonočnega jajca. Oglejte si število rezultatov iskanja, ki se pomikajo na vrhu? To je učinek, ki ga je ustvarila zastarela oznaka. Čeprav je bil nekdaj kul besedilni učinek HTML zastarel, ga večina brskalnikov še vedno podpira.
Vhod:
I wanna scroll with it, baby!Predstavitev izhoda:
Ti lahko dodajte dodatne atribute za nadzor vedenja drsenja, barve ozadja, smeri, višine in drugega. Pazite vendar; ti učinki lahko postanejo precej dražilni, če jih pretirano uporabljate.
Za hladen padajoč besedilni učinek, pojdite spet v Quackit in kopirajte njihovo zelo prilagojeno kodo označbe.
7. Zgradite kul stikalo Switch s HTML
Najbolj kul triki HTML so dinamični učinki HTML. Vendar pogosto temeljijo na scenarijih. Tu je en učinek menijev, za katerega se strinjate, da je videti zelo gladek.
To je nekoliko bolj zapleteno kot vaša povprečna oznaka HTML, ker deluje s slogovnim listom in skripti. Prednost je, da vam za delovanje ni treba naložiti datoteke CSS ali skripta. Namesto tega preprosto prilepite naslednjo kodo v razdelek svojega spletnega mesta.
Vhod:
.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
Predstavitev izhoda:
Na žalost tega učinka tukaj ne moremo dokazati. Toda prvotni vir, Dinamični pogon , vsebuje delovno kopijo tega dinamičnega učinka HTML.
8. Pridobite preglednico HTML s programom Tableizer
Če želite na svojem spletnem mestu prikazati preglednico, pustite Tableizer! spremenite svoje podatke v tabelo HTML. Neobdelane podatke iz Excela, Google Dokumenta ali katere koli druge preglednice preprosto prilepite v orodje za pretvorbo na naslovu tableizer.journalistopia.com . Prilagodite možnosti mize , nato kliknite Tableize It prejeti izhod HTML.
To je morda ena najbolj kul kod HTML za vaše spletno mesto, saj ga Tableize It! opravlja vse težko delo.
Kliknite Kopirajte HTML v odložišče kopirajte kodo HTML in jo dodajte na svojo spletno stran. Uredite barve ozadja, da bodo videti precej hladnejše.
kako igrati vklopi televizijo
Čeprav to v resnici ni učinek HTML, je zelo priročno.
Več kul kod in učinkov HTML za vaše spletno mesto
Moč HTML, CSS in JavaScript ponuja potencialno neomejene možnosti za osupljive učinke na vašem spletnem mestu. Želijo več?
- HTML dobrote ti daje superideje za oznake.
- Dinamični pogon ima veliko neverjetnih dinamičnih skriptov HTML.
- Quackit ponuja kul kodo HTML.
Pokazali smo vam osem kul kod HTML, ki jih lahko kopirate, da izboljšate svoje spletno mesto. Čeprav so različni, jih je vse enostavno implementirati, če poznate osnovne tehnike kodiranja HTML.
Deliti Deliti Cvrkutati E-naslov 17 preprostih primerov kode HTML, ki se jih lahko naučite v 10 minutahŽelite ustvariti osnovno spletno stran? Naučite se teh primerov HTML in jih preizkusite v urejevalniku besedil, da vidite, kako izgledajo v vašem brskalniku.
Preberite Naprej Sorodne teme- Programiranje
- HTML
- Spletni razvoj
- Orodja za spletne skrbnike
Namestnik urednika za varnost, Linux, DIY, programiranje in razlago tehnologije ter resnično uporaben podcast producent, z bogatimi izkušnjami s podporo za namizne računalnike in programsko opremo. Sodelujoč v reviji Linux Format, Christian je mačkar Raspberry Pi, ljubitelj Lega in ljubitelj retro iger.
Več od Christiana CawleyjaNaročite se na naše novice
Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!
Kliknite tukaj, da se naročite