Home-theater-designers
Chcete, aby váš web vyzeral úžasne --- ale vaše schopnosti v oblasti webového vývoja chýbajú.
Nezúfajte! Na vybudovanie efektnej stránky so skvelými efektmi nemusíte ovládať CSS ani PHP. Niektoré jednoduché značky HTML a znalosť kopírovania a vkladania budú fungovať.
Aby ste mohli začať používať skvelé HTML efekty, zostavili sme tieto bezplatné šablóny kódu HTML efektového efektu. Zlepšia funkčnosť a používateľský zážitok z vašich stránok, pričom neporušia banku. Aj keď sú tieto skvelé kódy väčšinou HTML, môžu obsahovať aj niektoré CSS a PHP.
1. Skvelý efekt paralaxy s HTML
Pravdepodobne ste už videli efekt Paralaxy používaný na webových stránkach s online reklamami. Pri posúvaní nadol v článku sa obrázok na pozadí sa posúva iným tempom alebo sa objaví inzerát.
Alternatívne sa obrázok na pozadí môže pri návšteve rôznych častí webu meniť. Je to úžasný efekt, ktorý dodáva obsahu vizuálnu hĺbku a je ideálny, aj keď nie porozumieť základnému kódu HTML .
Môžete sa hrať s efektom a skopírovať kód pre a jednoduchý efekt posúvania paralaxy od W3Schools .
Vo svojej najsofistikovanejšej verzii je tento efekt kombináciou HTML, CSS a JS.
Pokračujte a načítajte kódy pre vyššie uvedené Efekt paralaxy hlavičky/päty od CodePen .
2. Posúvateľný kód poľa pre komentáre HTML
Jedná sa o jednoduchý, ale užitočný prvok HTML, ktorý vám umožní zabaliť dlhé úryvky textu do kompaktného formátu. Vďaka tomu nezaberie celý priestor na stránke.
Môžete sa pohrať s farbami a veľkosťou textového poľa, aby vyhovovalo vašim potrebám.
Vstup:
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! :) Ak túžite po niečom trochu obľúbenejšom, môžete si tiež načítať kód prispôsobiteľné pole pre komentáre od spoločnosti Quackit .
Ponúkajú niekoľko šablón, ale ich editor môžete použiť aj na ručnú zmenu a testovanie (spustenie) vlastného kódu.
3. Skvelý trik HTML: zvýraznený text
S jednoduchýmHTML tag, do svojho textu alebo obrázkov môžete pridať množstvo skvelých efektov. Upozorňujeme, že nie všetky fungujú v rôznych prehliadačoch. Tu uvedené fungujú v prehliadačoch Google Chrome, Microsoft Edge a Mozilla Firefox.
Tento textový efekt HTML zvýrazňuje text medzi súbormitagy.
Vstup:
Your highlighted text here.Výstupná ukážka:
4. Pridajte do textu obrázok na pozadí
Rovnako tak môžete zmeniť farbu textu alebo pridať obrázok na pozadí. Toto vyzerá skvele, ak je veľkosť písma textu väčšia.
Vstup:
MakeUseOf presents...Rovnaký efekt sa dosiahne pridaním prvkov štýlu a písma do textu vo formáte tag.
čo robiť so starými počítačovými monitormi
Výstupná ukážka:
5. Užitočný trik HTML na pridanie popisu
Tip k názvu vám príde, keď prejdete myšou po kúsku „zmanipulovaného“ textu alebo obrázku. Uvidíte ich použitie na webových stránkach na obrázkoch, prepojenom texte alebo dokonca položkách ponuky v počítačových aplikáciách. Tento HTML kód použite na pridanie popisu k obyčajnému textu na vašu webovú stránku.
Vstup:
Move your mouse over me!Výstupná ukážka:
6. Zatiaľ najchladnejšie triky HTML: posúvanie alebo padanie textu
Keď hľadáte na webe „marquee html“, objavíte malé veľkonočné vajíčko. Chcete vidieť počet výsledkov posúvania v hornej časti? To je efekt, ktorý vytvára teraz zastaraná značka markízy. Aj keď bol tento kedysi skvelý textový efekt HTML zastaraný, väčšina prehliadačov ho stále podporuje.
Vstup:
I wanna scroll with it, baby!Výstupná ukážka:
Môžeš pridať ďalšie atribúty na ovládanie posúvania, farby pozadia, smeru, výšky a ďalších. Dávajte si však pozor; tieto účinky môžu byť pri nadmernom používaní dosť dráždivé.
Ak chcete dosiahnuť efekt chladného padajúceho textu, zamierte znova do Quackitu a skopírujte ich vysoko prispôsobený značkovací kód.
7. Vybudujte si skvelú spínaciu ponuku s HTML
Najlepšie triky HTML sú dynamické efekty HTML. Často sú však založené na scenári. Tu je jeden efekt pre ponuky, s ktorým budete súhlasiť, vyzerá veľmi úhľadne.
Je to o niečo komplikovanejšie ako priemerná značka HTML, pretože funguje so štýlom a skriptmi. Výhodou je, že na to, aby to fungovalo, nemusíte nahrať súbor CSS alebo skript. Namiesto toho jednoducho vložte nasledujúci kód do sekcie vášho webu.
Vstup:
.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
Výstupná ukážka:
Tento efekt tu bohužiaľ nemôžeme predviesť. Pôvodný zdroj však Dynamický pohon , obsahuje funkčnú kópiu tohto dynamického efektu HTML.
8. Získajte tabuľku HTML pomocou Tableizer
Ak chcete na svojom webe zobraziť tabuľku, nechajte aplikáciu Tableizer! transformujte svoje údaje do tabuľky HTML. Jednoducho vložte nespracované údaje z programu Excel, Google Doc alebo z inej tabuľky do nástroja na prevod na adrese tableizer.journalistopia.com . Vyladiť možnosti stola , potom kliknite na Stolovať to prijímať výstup HTML.
Toto je možno jeden z najlepších kódov HTML pre vaše webové stránky, pretože ho Tableize It! robí všetku ťažkú prácu.
Kliknite Skopírujte HTML do schránky skopírujte kód HTML a pridajte ho na svoj web. Zvážte úpravu farieb pozadia, aby vyzeral oveľa chladnejšie.
ako hrať prepínač v televízii
Aj keď to nie je efekt HTML, je to celkom praktické.
Viac skvelých kódov HTML a efektov pre vašu stránku
Sila HTML, CSS a JavaScript ponúka potenciálne neobmedzené možnosti ohromujúcich efektov na vašom webe. Chcieť viac?
- Dobroty HTML dáva ti skvelénápady na tagy.
- Dynamický pohon má veľa neuveriteľných dynamických skriptov HTML.
- Šarlatán ponúka skvelý HTML kód.
Ukázali sme vám osem skvelých kódov HTML, ktoré môžete skopírovať a vylepšiť tak svoj web. Aj keď sú rôzne, všetky sa dajú ľahko implementovať, pokiaľ poznáte základné techniky kódovania HTML.
zdieľam zdieľam Tweet E -mail 17 jednoduchých príkladov kódu HTML, ktoré sa môžete naučiť za 10 minútChcete vytvoriť základnú webovú stránku? Naučte sa tieto príklady HTML a vyskúšajte si ich v textovom editore, aby ste zistili, ako vyzerajú vo vašom prehliadači.
Čítajte ďalej Súvisiace témy- Programovanie
- HTML
- Vývoj webových aplikácií
- Nástroje správcu webu
Zástupca redaktora pre bezpečnosť, Linux, DIY, programovanie a techniku a skutočne užitočného producenta podcastov s rozsiahlymi skúsenosťami s podporou počítačov a softvéru. Christian, prispievateľ do časopisu Linux Format, je drotár Raspberry Pi, milovník Lega a fanúšik retro hier.
Viac od Christiana Cawleyhoprihlásiť sa ku odberu noviniek
Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!
Kliknutím sem sa prihlásite na odber