Lehe suuruse muutmisel langevad need plokkelemendid üksteise alla õrnalt. Olen seadistanud mõne erineva meedia päringute eksemplari välises stiilis lehes. See muudab stiilide jälgimise lihtsamaks, kui tahate hiljem midagi muuta.

 
 
 
Jake Rocheleau
 
Vabakutseline kirjanik ja veebiarendaja
  Hudson, Massachusetts, USA  [email protected] Minu portfell • @jakerocheleau 
 
  
 
 

Enne üksikasjalikku CSS-i hüpata- mist tahan ma rohkem selgitada mikroteabe kasutamist. Kui sa vaatad tähelepanelikult, kas ma olen oma nimedega paljude erinevate elementide sees eseme tüüp, artiklid, ja kirje prop. Need kõik on seotud Schmea projektiga, mis loodab pakkuda veebi jaoks andmestruktuuri.

Kasulike mikroandmete vormindamine

Kõik suuremad otsingumootorid, sealhulgas Google, Yahoo! Ja Bing, on heaks kiitnud skeemi kui parimat süntaksi andmete märgistamiseks. Märgistades enda kohta üksikasju, aitab see otsingumootoritel kuvada seotud sisu tulemusi teie veebis. Jaotame, kuidas neid üles seada.

Itemcope atribuuti rakendatakse igale mahutile, mis sisaldab skeemi elemendi andmeid. Sellele järgneb alati atribuudi itemtype, mis selles stsenaariumis kirjeldab inimest. Selle ümbrise sees saan ma märgistada mis tahes sisu, kasutades esemeid koos kõigi dokumentatsioonileheküljel loetletud andmetega.

Soovitatavaks meetodiks on sisu pakendamine sisemärgisesse, selle asemel, et lisada elementi otse. Kui märgistate fotole midagi sellist, siis tuleb lisada punkt img elementi otse. Kuid muidu on teil palju puhtam märgistus, pakkides oma andmed span-sildidesse.

Kui palju on liiga palju?

Ma väidaksin, et ei ole mingit piirangut selle kohta, kui palju detaile saab minna. Mikroandmed on kättesaadavad, et aidata arvutitel inimesi, organisatsioone, tooteid ja muid objekte võrgusiseses kontekstis ära tunda. Mida rohkem teavet saate pakkuda, seda parem.

Tasub meeles pidada ja avada ja mõista, kuidas seda mikroteavet oma veebisaidi aspektides kasutada. Kui veedate skeemi dokumentatsiooni läbi 10-15 minutit, on see palju lihtsam kui arvate. Me võime vaadata jätkamise demo põhjal kahte tahket näidet:

 
 
Skillset
 
 
Areng
 
 
HTML5 / CSS3
 
JavaScript ja jQuery
 
PHP taustaprogramm
 
SQL andmebaasid
 
Wordpress
 
Pligg CMS
 
Mõned eesmärgid C
 
 
 
 
Tarkvara
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Oma erinevate oskuste loetellu koostan uue konteineri, mis määratleb ItemListi skeemi. Isiku all ei olnud mingeid oskusi ega kogemusi, nii et see on ohutu alternatiiv. Siin on väärtuseks see, et Google suudab igaüks neist aru saada itemListElement on omavahel seotud. Sellisel juhul on meil keelte ja tarkvara nimekiri, mida ma tean.

 
 
Viimased artiklid
 
  10 Kasulikud tagastamismeetodid CSS-i ja Javascripti jaoks • Avaldatud Juuli 2012
 
  URL-ide ümberkirjutamine WordPressis: Nõuanded ja pluginad • Avaldatud Juuli 2012
 
  JPEG optimeerimine veebi jaoks - Ultimate Guide • Avaldatud Juuli 2012
 
  9 triki kujundada täiuslik HTML uudiskiri • Avaldatud Mai 2012
 
  A / B-testimise juhend Google'i veebisaidi optimeerijaga • Avaldatud Märts 2012
 
 

Teine hea näide on artiklite loetelu, mis on leitud allosas. Artiklite ja blogipostituste jaoks on olemas skeemi seadistus, mis on seotud veebis leiduva sisuga. Olen näidanud artikli URL-i ja avaldamiskuupäeva, mis on nende otsingumootori indeksoijatele rohkem kui piisavalt infot.

Pea meeles, et mikroandmed on seotud arvuti poolt korraldatava sisu vormindamisega. See ühe lehekülje jätkamine on ideaalne näide konkreetse isiku omaduste määratlemiseks. Need ei ole igal veebilehel kasulikud, kuid see on põnev metoodika.

Suhtelised CSS-stiilid

Selles viimases lõigus uurime, kuidas seda veebilehte kujundada. Meie stiilitabeli ülaosas määratlen mõned algsed lähtestused ja põhielemendi omadused. Nende hulka kuuluvad päised, loendiüksused ja ankurlingi hover-efektid.

* marginaal: 0; polster: 0;  html kõrgus: 101%;  keha taust: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); fondi suurus: 62,5%; polsterdatud: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; värv: # 454545; fondi suurus: 3.6em; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; värv: # 484848; fondi suurus: 2.5em; margin-bottom: 10px; teksti kaunistus: allajoonitud;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; värv: # 777; fondi kaal: normaalne; fondi suurus: 1.8em; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; värv: # 656565; fondi kaal: rasvane; fondi suurus: 1.75em; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; värv: # 565656; fondi suurus: 1.8em; rea kõrgus: 1.4em; margin-bottom: 15px; polsterdatud: 35px;  väike font-family: "Balthazar", serif; värv: # 656565; fondi suurus: 1.6em; kuva: plokk; margin-bottom: 6px;  ul kuva: plokk; list-style: mitte;  ul li padding-left: 45px; list-style-type: puudub; vertikaalne joondus: ülemine; taust: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px kordusteta; margin-bottom: 5px; font-pere: "Balthazar", serif; värv: # 666; fondi suurus: 1.6em; rea kõrgus: 2.3em;  img border: 0; maksimaalne laius: 100%;  a värv: # 5582d6; teksti kaunistus: mitte;  a: hover text-decoration: allajoon;  

Miski pole liiga huvitav, välja arvatud mõned kohandatud fondipakid. Ma võtsin vaikimisi kasutusele ka unikaalse bulleti ikooni “plaat”. Sarnase disaini otsimisel võite proovida otsida kataloogist nagu ikoonide otsing.

/ ** @grupi südamiku paigutus ** / #w varu: 0px 50px; polsterdus: 20px 40px; polsterdus: 35px; taust: #fff; min-laius: 260 pikslit; max-width: 900px; piir-alt-parem raadius: 8 px; piir-alt-vasak-raadius: 8x; -webkit-piiri-alt-vasak-raadius: 8px; -webkit-piiri-alt-parem raadius: 8px; -moz-border-radius-bottomleft: 8x; -moz-border-radius-bottomright: 8x;  päis laius: 100%;  / ** @grupi isiklikud seaded ** / #info float: vasakule; margin-bottom: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; raadius: 3x; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0,2); kasti vari: 0 2px 4px rgba (0, 0, 0, 0,2); taustavärv: #fff; piir: 1px tahke #ccc; polsterdus: 5px;  

Lehel on vaid mõned olulised blokeerimisalad, mis vajavad tähelepanu. Muidugi on mähkija div seadistatud täiendavate marginaalide ja polsterdusega. Ka maksimaalne laius on 900px, sest mis tahes suurem suurus tundub, et lehel on liiga palju tühikut. Ma olen ka lehe allosas kasutanud ümardatud nurkasid, et silma siledamaks muutuda.

Reageeriv disain

Võimalik, et selle online-jätkamise kõige olulisem aspekt on reageeriv funktsionaalsus. Mul on viis erinevat katkestuspunkti, et saavutada brauseri akna suuruse muutmisel erinevaid efekte.

@media only screen ja (max-width: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 kuva: plokk; teksti joondamine: keskus;  #info float: none; kuva: plokk; teksti joondamine: keskus;  #photo float: mitte; kuva: plokk; teksti joondamine: keskus;  #w polster: 20px 15px;  p polster: 0;  

Esialgne 740px on õige, kus foto pilt on vastuolus meie päise tekstiga. Selle asemel, et fotot rippmenüüst paremale küljele lasta, puhastame mõlemad elemendid ja koondame kogu paigutuse. Olen ka suurendanud päise teksti suurust, et jätta tugevam mõju.

Kuna aken muutub väiksemaks, olen eemaldanud mähisdivist ja lõigetest mõned täiendavad polsterdused. Järgmine probleem, mille peame pärast päise sisestamist, on oskuste UL-i loetelust. Jaotan kahe veeru lähenemisviisi ja selle asemel on üksteise kõrval ujuvad nimekirjad.

@media only screen ja (max-width: 570px) ul li kuva: inline-block; polsterdatud vasakule: 15px; laius: 140 px; taustapositsioon: -5px 0px; marginaali paremale: 6px; rea kõrgus: 1.7em;  # oskused-vasakule, oskused-parem margin-bottom: 15px;  

See nõuab ka paljude vaiketekstide omaduste ümberpaigutamist. Peame värskendama joone kõrgust ja paigutama iga loendi elemendi kuuli ikooni. Olen määranud fikseeritud laiuse, nii et võrk on järjest rohkem korraldatud kuni järgmise katkestuspunktini.

Nutitelefonide kodeerimine

Viimased kolm meedia päringut on väikesed, kuid väga tähtsad. Maastiku- ja portreerežiimi vahetamisel muudab iPhone mobiilibrauseri suurust. See kehtib ka enamiku Android-seadmete ja Windows Mobile'i telefonide puhul.

@media only screen ja (max-width: 480px) ul li laius: 120 px;  #w varu: 0 20px;  @ media only screen ja (max-width: 320px) #w marginaal: 0 10px;  / ** ainult iPhone ** / @ media ekraan ja (max-device-width: 480px) ul li laius: 150 px;  

Kui hakkate esmakordselt lööma 480px või vähem, eemaldame pakendist veel mõned polsterdused ja suuruse uuesti ka uuesti objektid. Siis 320px juures olen eemaldanud mõne dokumendivälise marginaali. Te saate siiski näha tekstureeritud tausta, kuid see ei ole niivõrd õhukese vertikaalse vaateava jaoks väga oluline.

Lõpuks ma kasutan max-seadme laius sihtida iPhone'i seadet ise või mis tahes muud mobiiliekraani, mille maksimaalne laius on 480 pikslit. Sellisel juhul tahan värskendada loendiüksusi veidi laiemaks, et nad täidaksid kogu ekraani. See mõjutab ainult oskuste nimekirja maastikuvaates, sest portree on liiga kõhn, et täheldada erinevusi.

• Demo
• Allika lähtekood

Lõplikud mõtted

Internetis töötamine nõuab sageli vähemalt teatud tüüpi portfelli. Kui saate linkida ühele leheküljele, jätkake kõigi teie poolt korraldatud andmete esitamist, mis näitab, et olete äri. Tõsised tööandjad ja potentsiaalsed kliendid langevad peagi üle sellisele karismaatilisele professionaalsuse kuvamisele veebidisainis.

Loodan, et saate selle juhendajast mõned olulised punktid ära võtta. Vabakutselised ükskõik millises asukohas maailmas saavad turustada ennast natuke tehniliste pingutustega. Võite alla laadida ülaltoodud demo lähtekoodi ja jagada oma mõtteid selle artikli kohta meie kommentaaride alal.