Home-theater-designers
Du vil have dit websted til at se fantastisk ud --- men dine webudviklingsevner mangler.
Fortvivl ikke! Du behøver ikke at kende CSS eller PHP for at bygge et smukt websted med fede effekter. Nogle enkle HTML-tags og at vide, hvordan man kopierer og indsætter, vil gøre.
For at komme i gang med nogle fede HTML -effekter har vi samlet disse gratis HTML -effektkodeskabeloner. De vil forbedre funktionaliteten og brugeroplevelsen af dit websted, mens de ikke bryder penge. Selvom de for det meste er HTML, kan disse seje koder også indeholde nogle CSS og PHP.
1. Cool Parallax -effekt med HTML
Du har sikkert set Parallax Effect brugt på websteder med online annoncer. Når du ruller ned i en artikel, vises baggrundsbillede ser ud til at rulle i et andet tempo, eller der vises en annonce.
Alternativt ændres baggrundsbilledet måske, når du besøger forskellige dele af webstedet. Det er en sej effekt, der tilføjer visuel dybde til indholdet og ideel, selvom du ikke gør det forstå den grundlæggende HTML -kode .
Du kan lege med effekten og kopiere koden til a enkel Parallax -rulleeffekt fra W3Schools .
I sin mest sofistikerede version er denne effekt en kombination af HTML, CSS og JS.
Gå videre og hent koderne til ovenstående Header/Footer Parallax effekt fra CodePen .
2. Rullelig HTML -kommentarfeltkode
Dette er et enkelt, men nyttigt HTML -element, der lader dig pakke lange tekststykker i et kompakt format. På denne måde fylder det ikke hele pladsen på siden.
Du kan lege med farverne og størrelsen på tekstboksen, så den passer til dine behov.
Input:
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! :) Hvis du ønsker noget lidt mere avanceret, kan du også hente kode til en kommentarfelt, der kan tilpasses fra Quackit .
De tilbyder flere skabeloner, men du kan også bruge deres editor til manuelt at ændre og teste (køre) din brugerdefinerede kode.
3. Et sejt HTML -trick: Fremhævet tekst
Med en enkelHTML -tag kan du tilføje masser af fede effekter til din tekst eller billeder. Bemærk, at ikke alle fungerer på tværs af browsere. Dem, der er nævnt her, fungerer i Google Chrome, Microsoft Edge og Mozilla Firefox.
Denne HTML -teksteffekt fremhæver teksten mellemmærker.
Input:
Your highlighted text here.Output demo:
4. Føj baggrundsbillede til tekst
På samme måde kan du ændre farven på din tekst eller tilføje et baggrundsbillede. Denne ser godt ud, hvis tekstens skriftstørrelse er større.
Input:
MakeUseOf presents...Den samme effekt opnås ved at tilføje stil og skrifttypeelementer til tekst i a tag.
hvordan man overfører musik fra ipod til itunes
Output demo:
5. Nyttigt HTML -trick til at tilføje et titelværktøjstip
Et titelværktøjstip kommer frem, når du ruller med musen over et stykke 'manipuleret' tekst eller billede. Du har set disse bruges på websteder på billeder, linket tekst eller endda menupunkter i desktop -apps. Brug denne HTML -kode til at tilføje et værktøjstip til almindelig tekst på din webside.
Input:
Move your mouse over me!Output demo:
6. De fedeste HTML -tricks endnu: Rulning eller faldende tekst
Når du søger efter 'marquee html' på Google, finder du et lille påskeæg. Se antallet af rullende søgeresultater øverst? Det er en effekt skabt af det nu forældede markeringsmærke. Selvom denne engang så fede HTML-teksteffekt er blevet forældet, understøtter de fleste browsere det stadig.
Input:
I wanna scroll with it, baby!Output demo:
Du kan tilføj yderligere attributter for at styre rulleadfærden, baggrundsfarven, retningen, højden og mere. Pas på dog; disse virkninger kan blive ret irriterende, hvis de bruges for meget.
For en sej faldende teksteffekt, gå til Quackit igen og kopier deres meget tilpassede markeringskode.
7. Byg en cool switchmenu med HTML
De sejeste HTML -tricks er dynamiske HTML -effekter. Men de er ofte scriptbaserede. Her er en effekt til menuer, som du er enig i, ser meget glat ud.
Det er lidt mere kompliceret end dit gennemsnitlige HTML -tag, fordi det fungerer med et typografiark og scripts. Fordelen er, at du ikke behøver at uploade en CSS- eller scriptfil for at få det til at fungere. I stedet skal du blot indsætte følgende kode i afsnittet på dit websted.
Input:
.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
Output demo:
Desværre kan vi ikke demonstrere denne effekt her. Men den oprindelige kilde, Dynamisk drev , indeholder en arbejdskopi af denne dynamiske HTML -effekt.
8. Få et HTML -regneark med Tableizer
Hvis du vil vise et regneark på dit websted, skal du lade Tableizer! omdanne dine data til en HTML -tabel. Indsæt bare rådataene fra Excel, Google Doc eller et andet regneark i konverteringsværktøjet på tableizer.journalistopia.com . Juster bord muligheder , og klik derefter på Tabellerer det for at modtage HTML -output.
Dette er måske en af de sejeste HTML -koder til dit websted, som Tableize It! gør alt det hårde arbejde.
Klik på Kopier HTML til udklipsholder for at kopiere HTML -koden og tilføje den til dit websted. Overvej at redigere baggrundsfarverne for at få det til at se meget køligere ud.
bærbar computer opretter forbindelse til wifi uden internet
Selvom dette ikke rigtig er en HTML -effekt, er det ganske praktisk.
Flere seje HTML -koder og effekter til dit websted
Kraften i HTML, CSS og JavaScript tilbyder potentielt ubegrænsede muligheder for fantastiske effekter på dit websted. Ønsker mere?
- HTML godbidder giver dig stortag ideer.
- Dynamisk drev har mange utrolige dynamiske HTML -scripts.
- Quackit tilbyder cool HTML -kode.
Vi har vist dig otte fede HTML -koder, som du kan kopiere for at forbedre dit websted. Selvom de er forskellige, er de alle lette at implementere, så længe du kender grundlæggende HTML -kodningsteknikker.
Del Del Tweet E -mail 17 simple HTML -kodeeksempler, du kan lære på 10 minutterVil du oprette en grundlæggende webside? Lær disse HTML -eksempler, og prøv dem i et tekstredigeringsprogram for at se, hvordan de ser ud i din browser.
Læs Næste Relaterede emner- Programmering
- HTML
- Web-udvikling
- Webmasterværktøjer
Stedfortrædende redaktør for sikkerhed, Linux, gør -det -selv, programmering og teknologi forklaret og virkelig nyttig podcast -producent med stor erfaring inden for desktop- og softwaresupport. Christian er en bidragsyder til Linux Format -magasinet og er en Raspberry Pi -tinkerer, Lego -elsker og retro -spilfan.
Mere fra Christian CawleyAbonner på vores nyhedsbrev
Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!
Klik her for at abonnere