Home-theater-designers
Jūs vēlaties, lai jūsu vietne izskatītos satriecoši, bet jūsu tīmekļa izstrādes prasmju trūkst.
Nekrītiet izmisumā! Jums nav jāzina CSS vai PHP, lai izveidotu izsmalcinātu vietni ar lieliskiem efektiem. Dažiem vienkāršiem HTML tagiem un zināšanām par to, kā kopēt un ielīmēt, derēs.
Lai sāktu darbu ar dažiem lieliskiem HTML efektiem, esam apkopojuši šīs bezmaksas HTML efektu kodu veidnes. Tie uzlabos jūsu vietnes funkcionalitāti un lietotāju pieredzi, vienlaikus nepārkāpjot banku. Lai gan tie galvenokārt ir HTML, šajos kodos var būt arī daži CSS un PHP.
1. Cool Parallax efekts ar HTML
Jūs droši vien esat redzējuši Parallax efektu, kas tiek izmantots vietnēs ar tiešsaistes reklāmām. Ritinot uz leju rakstu, šķiet, ka fona attēls ritinās citā tempā vai parādās reklāma.
Alternatīvi, iespējams, fona attēls mainās, apmeklējot dažādas vietnes daļas. Tas ir foršs efekts, kas saturam piešķir vizuālu dziļumu un ideāls pat tad, ja to nedarāt saprast pamata HTML kodu .
Jūs varat spēlēt ar efektu un kopēt kodu a vienkāršs Parallax ritināšanas efekts no W3Schools .
Sarežģītākajā versijā šis efekts ir HTML, CSS un JS kombinācija.
Iet uz priekšu un iegūstiet iepriekš minēto kodu Galvenes/kājenes paralaksa efekts no CodePen .
2. Ritināms HTML komentāru lodziņa kods
Šis ir vienkāršs, bet noderīgs HTML elements, kas ļauj iepakot garus teksta fragmentus kompaktā formātā. Tādā veidā tas neaizņem visu vietu lapā.
Jūs varat spēlēties ar tekstlodziņa krāsām un izmēru, lai tas atbilstu jūsu vajadzībām.
Ievads:
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! :) Ja vēlaties kaut ko mazliet izdomātāku, varat arī ielādēt kodu pielāgojams komentāru lodziņš no Quackit .
Tie piedāvā vairākas veidnes, taču varat arī izmantot to redaktoru, lai manuāli mainītu un pārbaudītu (palaistu) savu pielāgoto kodu.
3. Foršs HTML triks: izcelts teksts
Ar vienkāršuHTML tagu jūs varat pievienot daudz lielisku efektu jūsu tekstam vai attēliem. Ņemiet vērā, ka ne visi no tiem darbojas dažādās pārlūkprogrammās. Šeit minētie darbojas pārlūkprogrammās Google Chrome, Microsoft Edge un Mozilla Firefox.
Šis HTML teksta efekts izceļ tekstu starptagus.
Ievads:
Your highlighted text here.Izvades demonstrācija:
4. Pievienojiet tekstam fona attēlu
Tāpat jūs varat mainīt teksta krāsu vai pievienot fona attēlu. Šis izskatās lieliski, ja teksta fonta lielums ir lielāks.
Ievads:
MakeUseOf presents...Tāds pats efekts tiek panākts, tekstam pievienojot stila un fonta elementus a tagu.
kā lejupielādēt filmas uz ipad
Izvades demonstrācija:
5. Noderīgs HTML triks virsraksta pievienošanai Rīka padoms
Rīka padoms tiek parādīts, ritinot ar peli virs “manipulēta” teksta vai attēla. Jūs esat redzējis, ka tie tiek izmantoti vietnēs attēlos, saistītā tekstā vai pat izvēlņu vienumos darbvirsmas lietotnēs. Izmantojiet šo HTML kodu, lai tīmekļa lapas vienkāršajam tekstam pievienotu rīka padomu.
Ievads:
Move your mouse over me!Izvades demonstrācija:
6. Stilīgākie HTML triki: teksta ritināšana vai krišana
Meklējot Google tīklā “marquee html”, jūs atradīsit nelielu Lieldienu olu. Vai augšpusē redzat ritinošo meklēšanas rezultātu skaitu? Tas ir efekts, ko radījis tagad novecojušais marķējuma tags. Lai gan šis savulaik foršais HTML teksta efekts ir novecojis, lielākā daļa pārlūkprogrammu to joprojām atbalsta.
Ievads:
I wanna scroll with it, baby!Izvades demonstrācija:
Jūs varat pievienot citus atribūtus lai kontrolētu ritināšanas uzvedību, fona krāsu, virzienu, augstumu un daudz ko citu. Tomēr uzmanieties; šie efekti var kļūt diezgan kairinoši, ja tos pārmērīgi lieto.
Lai iegūtu vēsu krītošu teksta efektu, atkal dodieties uz Quackit un nokopējiet to ļoti pielāgoto marķējuma kodu.
7. Izveidojiet atdzist izvēlni ar HTML
Stilīgākie HTML triki ir dinamiski HTML efekti. Tomēr tie bieži ir balstīti uz skriptiem. Šeit ir viens efekts izvēlnēm, par kurām jūs piekrītat, izskatās ļoti slidens.
Tas ir nedaudz sarežģītāk nekā jūsu vidējais HTML tags, jo tas darbojas ar stila lapu un skriptiem. Priekšrocība ir tāda, ka jums nav jāaugšupielādē CSS vai skripta fails, lai tas darbotos. Tā vietā vienkārši ielīmējiet šo kodu savas vietnes sadaļā.
Ievads:
.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
Izvades demonstrācija:
Diemžēl mēs šeit nevaram demonstrēt šo efektu. Bet sākotnējais avots, Dinamiskā piedziņa , ir šī dinamiskā HTML efekta darba kopija.
8. Iegūstiet HTML izklājlapu ar Tableizer
Ja vēlaties savā vietnē rādīt izklājlapu, ļaujiet Tableizer! pārveidojiet savus datus HTML tabulā. Vienkārši ielīmējiet neapstrādātos datus no Excel, Google Doc vai jebkuras citas izklājlapas konvertētāja rīkā vietnē tableizer.journalistopia.com . Pielāgojiet galda iespējas , pēc tam noklikšķiniet uz Tabulējiet to lai saņemtu HTML izvadi.
Šis, iespējams, ir viens no stilīgākajiem HTML kodiem jūsu vietnei, kā Tableize It! dara visu smago darbu.
Klikšķis Kopēt HTML uz starpliktuvi lai kopētu HTML kodu un pievienotu to savai vietnei. Apsveriet fona krāsu rediģēšanu, lai tā izskatītos daudz vēsāka.
Windows 10 skaņa turpina izslēgties
Lai gan tas nav īsti HTML efekts, tas ir diezgan ērti.
Vairāk foršu HTML kodu un efektu jūsu vietnei
HTML, CSS un JavaScript spējas piedāvā potenciāli neierobežotas iespējas satriecošiem efektiem jūsu vietnē. Vēlas vairāk?
- HTML labumi sniedz jums lieliskutagu idejas.
- Dinamiskā piedziņa ir daudz neticamu dinamisku HTML skriptu.
- Quackit piedāvā lielisku HTML kodu.
Mēs esam parādījuši astoņus lieliskus HTML kodus, kurus varat kopēt, lai uzlabotu savu vietni. Lai gan tie ir atšķirīgi, tos visus ir viegli ieviest, ja vien jūs zināt pamata HTML kodēšanas metodes.
Kopīgot Kopīgot Čivināt E -pasts 17 vienkārši HTML kodu piemēri, kurus varat iemācīties 10 minūtēsVai vēlaties izveidot pamata tīmekļa lapu? Uzziniet šos HTML piemērus un izmēģiniet tos teksta redaktorā, lai redzētu, kā tie izskatās jūsu pārlūkprogrammā.
Lasīt Tālāk Saistītās tēmas- Programmēšana
- HTML
- Web izstrāde
- Tīmekļa pārziņa rīki
Redaktora vietnieks drošības, Linux, DIY, programmēšanas un tehniski izskaidrota jomā un patiešām noderīgs Podcast apraides ražotājs ar lielu pieredzi galddatoru un programmatūras atbalstā. Žurnāla Linux Format līdzstrādnieks Kristiāns ir Raspberry Pi mīļotājs, Lego cienītājs un retro spēļu cienītājs.
Vairāk no Kristiāna KaulijaAbonējiet mūsu biļetenu
Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!
Noklikšķiniet šeit, lai abonētu