Home-theater-designers
Soovite, et teie veebisait näeks välja vinge ---, kuid teie veebiarendusoskused on puudulikud.
Ärge heitke meelt! Laheda efektiga väljamõeldud saidi loomiseks ei pea te teadma CSS -i või PHP -d. Mõned lihtsad HTML-sildid ja kopeerimise ja kleepimise teadmine sobivad.
Lahedate HTML -efektidega alustamiseks oleme koostanud need tasuta HTML -efektide koodimallid. Need parandavad teie saidi funktsionaalsust ja kasutuskogemust, rikkumata samal ajal panka. Kuigi need on enamasti HTML -koodid, võivad need lahedad koodid sisaldada ka CSS -i ja PHP -d.
1. Cool Parallax Effect HTML -iga
Olete ilmselt näinud Parallaxi efekti, mida kasutatakse veebireklaamidega veebisaitidel. Artiklit allapoole kerides ilmub taustpilt näib kerivat erinevas tempos või ilmub reklaam.
Teise võimalusena võib -olla muutub taustapilt saidi erinevaid osi külastades. See on lahe efekt, mis lisab sisule visuaalse sügavuse ja on ideaalne isegi siis, kui te seda ei tee mõista põhilist HTML -koodi .
Saate efektiga mängida ja koodi kopeerida lihtne Parallaxi kerimise efekt W3Schoolsilt .
Selle kõige keerukamas versioonis on see efekt kombinatsioon HTML -ist, CSS -ist ja JS -ist.
Jätkake ja tooge ülaltoodud koodid Päise/jalus Parallaxi efekt CodePenist .
2. Keritav HTML -i kommentaarikasti kood
See on lihtne, kuid kasulik HTML -element, mis võimaldab teil pikad tekstilõigud kompaktsesse vormingusse pakkida. Nii ei võta see lehel kogu ruumi.
Saate mängida tekstivälja värvide ja suurusega, et see vastaks teie vajadustele.
Sisend:
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! :) Kui soovite midagi veidramat, võite hankida ka koodi kohandatav kommentaarikast Quackitilt .
Nad pakuvad mitmeid malle, kuid nende redaktori abil saate ka kohandatud koodi käsitsi muuta ja testida (käivitada).
3. Lahe HTML -trikk: esiletõstetud tekst
Koos lihtsaHTML -märgendiga saate oma tekstile või piltidele lisada hulga lahedaid efekte. Pange tähele, et mitte kõik neist ei tööta brauserites. Siin mainitud töötavad Google Chrome'is, Microsoft Edge'is ja Mozilla Firefoxis.
See HTML -tekstiefekt tõstab esile teksti vahelsilte.
Sisend:
Your highlighted text here.Väljunddemo:
4. Lisage tekstile taustpilt
Samuti saate muuta teksti värvi või lisada taustapildi. See näeb hea välja, kui teksti font on suurem.
Sisend:
MakeUseOf presents...Sama efekt saavutatakse, lisades tekstile stiili ja fondi elemendid a silt.
kuidas vaadata vanu tekstsõnumeid
Väljunddemo:
5. Kasulik HTML -trikk pealkirja lisamiseks Kohtspikker
Pealkirja tööriistavihje ilmub, kui kerite hiirega üle manipuleeritud teksti või pildi. Olete näinud, et neid kasutatakse veebisaitidel piltidel, lingitud tekstil või isegi töölauarakenduste menüüelementidel. Kasutage seda HTML -koodi, et lisada oma veebilehel lihttekstile tööriistavihje.
Sisend:
Move your mouse over me!Väljunddemo:
6. Kõige lahedamad HTML -nipid: teksti kerimine või langemine
Kui otsite Google'is sõna „marquee html”, avastate väikese lihavõttemuna. Kas näete ülaosas kerivate otsingutulemuste arvu? See on efekt, mille on loonud nüüdseks vananenud telk. Kuigi see kunagi lahe HTML-tekstiefekt on aegunud, toetab enamik brausereid seda endiselt.
Sisend:
I wanna scroll with it, baby!Väljunddemo:
Sa saad lisada veel atribuute kerimiskäitumise, taustavärvi, suuna, kõrguse ja muu juhtimiseks. Hoolitse siiski; need mõjud võivad liigse kasutamise korral muutuda üsna ärritavaks.
Laheda langeva teksti efekti saavutamiseks suunduge uuesti Quackiti ja kopeerige nende väga kohandatud telgikood.
7. Koostage HTML -iga lahe lülitusmenüü
Kõige lahedamad HTML -nipid on dünaamilised HTML -efektid. Siiski põhinevad need sageli skriptidel. Siin on üks menüüde efekt, millega nõustute, tundub väga libe.
See on pisut keerulisem kui teie keskmine HTML -silt, kuna see töötab stiililehe ja skriptidega. Eeliseks on see, et selle toimimiseks ei pea te CSS- ega skriptifaili üles laadima. Selle asemel kleepige lihtsalt järgmine kood oma veebisaidi sektsiooni.
Sisend:
.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äljunddemo:
Kahjuks ei saa me seda efekti siin näidata. Kuid algne allikas, Dünaamiline ajam , sisaldab selle dünaamilise HTML -efekti töökoopiat.
8. Hankige HTML -arvutustabel Tableizeriga
Kui soovite oma saidil arvutustabelit kuvada, laske Tableizeril! muuda oma andmed HTML -tabeliks. Lihtsalt kleepige töötlemata andmed Excelist, Google Docist või mõnest muust arvutustabelist teisendustööriistale aadressil tableizer.journalistopia.com . Näpistage tabeli valikud , seejärel klõpsake Tabelita see HTML -väljundi vastuvõtmiseks.
See on ehk üks teie veebisaidi lahedamaid HTML -koode, nagu Tableize It! teeb kogu raske töö.
Klõpsake nuppu Kopeerige HTML lõikelauale kopeerida HTML -kood ja lisada see oma veebisaidile. Kaaluge taustavärvide muutmist, et see tunduks palju lahedam.
traadita ühendusel pole kehtivat IP -konfiguratsiooni
Kuigi see pole tegelikult HTML -efekt, on see üsna mugav.
Veel lahedaid HTML -koode ja efekte oma saidile
HTML -i, CSS -i ja JavaScripti võimsus pakub potentsiaalselt piiramatuid võimalusi veebisaidi uimastamiseks. Tahad rohkem?
- HTML -i maiuspalad annab sulle suurepäraseltideid sildistada.
- Dünaamiline ajam on palju uskumatuid dünaamilisi HTML -skripte.
- Viga pakub lahedat HTML -koodi.
Oleme näidanud teile kaheksa lahedat HTML -koodi, mida saate oma veebisaidi täiustamiseks kopeerida. Kuigi need on erinevad, on neid kõiki lihtne rakendada, kui teate põhilisi HTML -kodeerimistehnikaid.
Jaga Jaga Piiksuma E -post 17 lihtsat HTML -koodi näidet, mida saate õppida 10 minutigaKas soovite luua lihtsa veebilehe? Õppige neid HTML -i näiteid ja proovige neid tekstiredaktoris, et näha, kuidas need teie brauseris välja näevad.
Loe edasi Seotud teemad- Programmeerimine
- HTML
- Veebiarendus
- Veebimeistri tööriistad
Turvalisuse, Linuxi, isetegemise, programmeerimise ja tehniliste selgituste redaktori asetäitja ning tõeliselt kasulik podcastide tootja, kellel on laialdased kogemused laua- ja tarkvaratoes. Ajakirja Linux Format kaastööline Christian on Raspberry Pi näpistaja, Lego armastaja ja retromängude fänn.
Veel Christian Cawley'ltTelli meie uudiskiri
Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!
Tellimiseks klõpsake siin