Home-theater-designers
Haluat verkkosivustosi näyttävän mahtavalta --- mutta verkkokehitystaitosi puuttuvat.
Älä epätoivo! Sinun ei tarvitse tietää CSS: ää tai PHP: ta rakentaaksesi hienoja sivustoja, joissa on hienoja vaikutuksia. Jotkut yksinkertaiset HTML-tunnisteet ja kopiointi- ja liittämismahdollisuus auttavat.
Aloittaaksesi hienojen HTML -tehosteiden käytön, olemme koonneet nämä ilmaiset HTML -tehosteiden koodimallit. Ne parantavat sivustosi toimivuutta ja käyttäjäkokemusta rikkomatta kuitenkaan pankkia. Vaikka nämä koodit ovat enimmäkseen HTML -koodia, ne voivat sisältää myös joitain CSS- ja PHP -tiedostoja.
1. Cool Parallax Effect HTML: llä
Olet todennäköisesti nähnyt Parallax -tehosteen, jota käytetään verkkosivustoilla, joissa on online -mainoksia. Kun vierität artikkelia alaspäin, taustakuva näyttää vierivältä eri tahdissa, tai mainos tulee näkyviin.
Vaihtoehtoisesti taustakuva muuttuu, kun vierailet sivuston eri osissa. Se on viileä vaikutus, joka lisää sisällön visuaalisen syvyyden ja on ihanteellinen, vaikka et ymmärtää HTML -peruskoodin .
Voit pelata tehosteella ja kopioida koodin a yksinkertainen Parallax -vieritystehoste W3Schoolsilta .
Kehittyneimmässä versiossa tämä efekti on yhdistelmä HTML: ää, CSS: ää ja JS: ää.
Mene eteenpäin ja hae yllä olevien koodit Otsikon/alatunnisteen parallaksi -efekti CodePeniltä .
2. Vieritettävä HTML -kommenttikentän koodi
Tämä on yksinkertainen mutta hyödyllinen HTML -elementti, jonka avulla voit pakata pitkiä tekstinpätkiä pieneen muotoon. Näin se ei vie koko tilaa sivulla.
Voit leikkiä tekstikentän väreillä ja koolla, jotta se sopii tarpeisiisi.
Tulo:
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! :) Jos haluat jotain pienempää, voit myös noutaa koodin muokattavissa oleva kommenttikenttä Quackitilta .
Ne tarjoavat useita malleja, mutta voit myös käyttää niiden editoria manuaalisesti muuttaa ja testata (ajaa) mukautettua koodiasi.
3. Viileä HTML -temppu: Korostettu teksti
Yksinkertaisen kanssaHTML -tunnisteella voit lisätä paljon hienoja tehosteita tekstiin tai kuviin. Huomaa, että kaikki eivät toimi kaikissa selaimissa. Tässä mainitut toimivat Google Chromessa, Microsoft Edgessä ja Mozilla Firefoxissa.
Tämä HTML -tekstitehoste korostaa tekstintunnisteita.
Tulo:
Your highlighted text here.Lähtöesittely:
4. Lisää taustakuva tekstiin
Samoin voit muuttaa tekstin väriä tai lisätä taustakuvan. Tämä näyttää hyvältä, jos tekstin fonttikoko on suurempi.
Tulo:
MakeUseOf presents...Sama vaikutus saavutetaan lisäämällä tyyliin ja fonttiin elementtejä tekstiin a tag.
windows stop code odottamaton myymäläpoikkeus
Lähtöesittely:
5. Hyödyllinen HTML -temppu otsikon lisäämiseen Työvinkki
Otsikkotyökalu tulee näkyviin, kun vierität hiirellä manipuloidun tekstin tai kuvan päälle. Olet nähnyt näitä käytettyinä verkkosivustoilla kuvissa, linkitetyssä tekstissä tai jopa työpöytäsovellusten valikkokohdissa. Tämän HTML -koodin avulla voit lisätä työkaluvinkin verkkosivusi tavalliseen tekstiin.
Tulo:
Move your mouse over me!Lähtöesittely:
6. Kaikkein tyylikkäimmät HTML -temput: tekstin vieritys tai lasku
Kun etsit Googlesta 'marquee html', löydät pienen pääsiäismunan. Näetkö vierityshakutulosten määrän yläreunassa? Tämä on vaikutus, joka on luotu nyt vanhentuneelle teltta -tunnisteelle. Vaikka tämä kerran viileä HTML-tekstitehoste on poistettu käytöstä, useimmat selaimet tukevat sitä edelleen.
Tulo:
I wanna scroll with it, baby!Lähtöesittely:
Sinä pystyt lisää muita määritteitä hallita vierityskäyttäytymistä, taustaväriä, suuntaa, korkeutta ja paljon muuta. Varo kuitenkin; näistä vaikutuksista voi tulla ärsyttäviä, jos niitä käytetään liikaa.
Viileä putoava tekstitehoste, mene taas Quackitiin ja kopioi erittäin räätälöity valintatunnus.
7. Rakenna Cool Switchmenu HTML: llä
Tyylikkäimmät HTML -temput ovat dynaamisia HTML -tehosteita. Ne ovat kuitenkin usein käsikirjoituspohjaisia. Tässä on yksi vaikutus valikoihin, joista olet samaa mieltä, näyttää erittäin liukkaalta.
Se on hieman monimutkaisempi kuin tavallinen HTML -tagi, koska se toimii tyylisivun ja komentosarjojen kanssa. Etuna on, että sinun ei tarvitse ladata CSS- tai komentotiedostoa, jotta se toimisi. Liitä sen sijaan seuraava koodi verkkosivustosi osioon.
Tulo:
.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
Lähtöesittely:
Valitettavasti emme voi osoittaa tätä vaikutusta täällä. Mutta alkuperäinen lähde, Dynaaminen asema , sisältää työkopion tästä dynaamisesta HTML -tehosteesta.
8. Hanki HTML -laskentataulukko Tableizerin avulla
Jos haluat näyttää laskentataulukon sivustossasi, anna Tableizer! muuntaa tietosi HTML -taulukkoksi. Liitä vain raakadata Excelistä, Google Docista tai muusta laskentataulukosta muuntotyökaluun osoitteessa tableizer.journalistopia.com . Säädä taulukon vaihtoehdot ja napsauta sitten Taulukoi se saadaksesi HTML -tulosteen.
Tämä on ehkä yksi tyylikkäimmistä HTML -koodeista verkkosivustollesi, kuten Tableize It! tekee kaiken kovan työn.
Klikkaus Kopioi HTML leikepöydälle kopioidaksesi HTML -koodin ja lisätäksesi sen verkkosivustollesi. Harkitse taustavärien muokkaamista, jotta se näyttää paljon viileämmältä.
miksi latausnopeuteni laskee lataamisen aikana
Vaikka tämä ei ole oikeastaan HTML -tehoste, se on varsin kätevä.
Lisää hienoja HTML -koodeja ja tehosteita sivustollesi
HTML-, CSS- ja JavaScript -valot tarjoavat mahdollisesti rajattomasti vaihtoehtoja upeille tehosteille verkkosivustollasi. Haluta lisää?
- HTML -herkut antaa sinulle hienoamerkitse ideoita.
- Dynaaminen asema on monia uskomattomia dynaamisia HTML -skriptejä.
- Vituttaa tarjoaa viileää HTML -koodia.
Olemme näyttäneet sinulle kahdeksan hienoa HTML -koodia, jotka voit kopioida verkkosivustosi parantamiseksi. Vaikka ne ovat erilaisia, ne on helppo toteuttaa, kunhan tiedät HTML -koodauksen perustekniikat.
Jaa Jaa Tweet Sähköposti 17 yksinkertaista HTML -koodiesimerkkiä, jotka opit 10 minuutissaHaluatko luoda perusverkkosivun? Opi nämä HTML -esimerkit ja kokeile niitä tekstieditorissa nähdäksesi, miltä ne näyttävät selaimessasi.
Lue seuraava Liittyvät aiheet- Ohjelmointi
- HTML
- Verkkokehitys
- Verkkovastaavan työkalut
Varaeditori turvallisuudesta, Linuxista, DIY -ohjelmoinnista ja teknisistä selityksistä sekä todella hyödyllinen podcast -tuottaja, jolla on laaja kokemus työpöytä- ja ohjelmistotuesta. Christian on Linux Format -lehden toimittaja, ja hän on Raspberry Pi -piirtäjä, Lego -ystävä ja retropelien ystävä.
Lisää Christian Cawleyltätilaa uutiskirjeemme
Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!
Klikkaa tästä tilataksesi