Home-theater-designers
Azt szeretné, ha webhelye félelmetesnek tűnne --- de a webfejlesztési készségei hiányoznak.
Ne ess kétségbe! Nem kell ismernie a CSS -t vagy a PHP -t ahhoz, hogy divatos oldalt hozzon létre, jó hatásokkal. Néhány egyszerű HTML-címke és a másolás és beillesztés ismerete megteszi.
Az első lépésekhez néhány remek HTML -effektussal összeállítottuk ezeket az ingyenes HTML -effekt kódsablonokat. Növelik webhelye funkcionalitását és felhasználói élményét, miközben nem törik össze a bankot. Jóllehet többnyire HTML -kódok, ezek a klassz kódok CSS -t és PHP -t is tartalmazhatnak.
1. Hűvös Parallax hatás HTML -szel
Valószínűleg látta a Parallax hatást az online hirdetéseket használó webhelyeken. A cikket lefelé görgetve a a háttérkép görgetni látszik más ütemben, vagy megjelenik egy hirdetés.
Alternatív megoldásként előfordulhat, hogy a háttérkép megváltozik, amikor meglátogatja a webhely különböző részeit. Ez egy hűvös hatás, amely vizuális mélységet ad a tartalomnak, és ideális akkor is, ha nem megérti az alapvető HTML kódot .
Játszhat az effektussal, és másolhatja a kódot a egyszerű Parallax görgetési hatás a W3Schools -tól .
A legkifinomultabb verzióban ez a hatás a HTML, a CSS és a JS kombinációja.
Folytassa, és szerezze be a fenti kódokat Fejléc/lábléc Parallax hatás a CodePen -től .
2. Görgethető HTML megjegyzésdoboz kód
Ez egy egyszerű, de hasznos HTML -elem, amely lehetővé teszi hosszú szövegrészletek tömörítését kompakt formátumba. Így nem foglalja el a teljes helyet az oldalon.
Játszhat a szövegdoboz színeivel és méretével, hogy megfeleljen az igényeinek.
Bemenet:
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! :) Ha valami furcsábbra vágyik, akkor lekérheti a kódot is a Quackit személyre szabható megjegyzésmezője .
Több sablont kínálnak, de a szerkesztőjükkel manuálisan is módosíthatja és tesztelheti (futtathatja) egyéni kódját.
3. Egy klassz HTML trükk: kiemelt szöveg
Egy egyszerűvelA HTML -címke rengeteg jó hatást adhat a szöveghez vagy a képekhez. Ne feledje, hogy nem mindegyik működik a böngészőkben. Az itt említettek a Google Chrome -ban, a Microsoft Edge -ben és a Mozilla Firefoxban működnek.
Ez a HTML szöveghatás kiemeli a szöveget acímkék.
Bemenet:
Your highlighted text here.Kimeneti demó:
4. Háttérkép hozzáadása a szöveghez
Hasonlóképpen megváltoztathatja a szöveg színét, vagy háttérképet adhat hozzá. Ez jól néz ki, ha a szöveg betűmérete nagyobb.
Bemenet:
MakeUseOf presents...Ugyanezt a hatást érjük el, ha a stílus és a betűtípus elemeit hozzáadjuk a szöveghez a címke.
különbség usb a és usb c között
Kimeneti demó:
5. Hasznos HTML -trükk a cím hozzáadásához - tipp
Cím -eszköztipp jelenik meg, ha az egérrel görget egy darab „manipulált” szövegre vagy képre. Láthatta, hogy ezeket webhelyeken használják képeken, linkelt szövegen vagy akár asztali alkalmazások menüpontjain. Ezzel a HTML -kóddal adhat hozzá egy eszköztippet a weboldal egyszerű szövegéhez.
Bemenet:
Move your mouse over me!Kimeneti demó:
6. A legmenőbb HTML trükkök: görgetés vagy eső szöveg
Ha a „marquee html” kifejezésre keres a Google -on, egy kis húsvéti tojást talál. Látja a görgetett keresési eredmények számát a tetején? Ezt a hatást a mára elavult sátorcímke hozta létre. Bár ez az egykor hűvös HTML szöveghatás megszűnt, a legtöbb böngésző még mindig támogatja.
Bemenet:
I wanna scroll with it, baby!Kimeneti demó:
tudsz további attribútumok hozzáadása a görgetési viselkedés, a háttérszín, az irány, a magasság és így tovább. Vigyázzon azonban; ezek a hatások túlzottan irritálóak lehetnek.
A hűvös eső szöveghatás érdekében irány újra Quackit és másolja le a személyre szabott sátorkódjukat.
7. Hozzon létre egy menő kapcsoló menüt HTML -szel
A legmenőbb HTML -trükkök a dinamikus HTML -effektusok. Ezek azonban gyakran forgatókönyveken alapulnak. Itt van egy effektus a menükben, amelyekkel egyetért, nagyon simán néz ki.
Ez egy kicsit bonyolultabb, mint az átlagos HTML -címke, mert stíluslappal és szkriptekkel működik. Előnye, hogy nem kell feltöltenie egy CSS vagy script fájlt, hogy működjön. Ehelyett egyszerűen illessze be a következő kódot webhelye szakaszába.
Bemenet:
.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
Kimeneti demó:
Sajnos ezt a hatást itt nem tudjuk bizonyítani. De az eredeti forrás, Dinamikus meghajtó , ennek a dinamikus HTML -effektusnak egy működő példányát tartalmazza.
8. Szerezzen be HTML táblázatot a Tableizer segítségével
Ha táblázatot szeretne megjeleníteni webhelyén, hagyja, hogy Tableizer! alakítsa át adatait HTML táblává. Csak illessze be az Excelből, a Google Dokumentumból vagy bármely más táblázatból származó nyers adatokat a konvertáló eszközbe a címen tableizer.journalistopia.com . Csípje meg a táblázat opciói , majd kattintson Táblázd fel hogy megkapja a HTML kimenetet.
Ez talán az egyik legmenőbb HTML kód a webhelyén, a Tableize It! elvégzi az összes kemény munkát.
Kattintson Másolja a HTML -t a vágólapra másolja a HTML -kódot, és adja hozzá webhelyéhez. Fontolja meg a háttérszínek szerkesztését, hogy sokkal hűvösebb legyen.
kód tv kodi doboz távirányítóval
Bár ez valójában nem HTML -effektus, de nagyon praktikus.
További klassz HTML kódok és effektusok webhelyéhez
A HTML, a CSS és a JavaScript ereje potenciálisan korlátlan lehetőségeket kínál a webhely lenyűgöző hatásaihoz. Többet akar?
- HTML finomságok nagyot ad nekedcímke ötletek.
- Dinamikus meghajtó sok hihetetlen dinamikus HTML szkriptet tartalmaz.
- Quackit klassz HTML kódot kínál.
Mutatottunk nyolc remek HTML -kódot, amelyeket lemásolva javíthatja webhelyét. Bár különböznek, mindegyiket könnyű megvalósítani, amíg ismeri az alapvető HTML kódolási technikákat.
Részvény Részvény Csipog Email 17 egyszerű HTML -példa, amelyet 10 perc alatt megtanulhatAlapvető weboldalt szeretne létrehozni? Ismerje meg ezeket a HTML -példákat, és próbálja ki őket egy szövegszerkesztőben, hogy lássa, hogyan néznek ki a böngészőben.
Olvassa tovább Kapcsolódó témák- Programozás
- HTML
- Webfejlesztés
- Webmestereszközök
Szerkesztőhelyettes a biztonságért, Linuxért, barkácsolásért, programozásért és technikai magyarázatokért, és valóban hasznos podcast -gyártó, nagy tapasztalattal rendelkezik asztali és szoftveres támogatásban. A Linux Format magazin munkatársa, Christian a Raspberry Pi barkácsolója, a Lego szerelmese és a retro játék rajongója.
További részletek Christian Cawley -tőlIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide