Ko spreminjate velikost strani, se ti elementi elementov bloka med seboj dobro podirajo. V zunanji slogu slogov sem nastavil nekaj različnih primerkov medijskih poizvedb. Zaradi tega je lažje slediti slogom, ko se vrnete nazaj in uredite nekaj kasneje.

 
 
 
Jake Rocheleau
 
Freelance Writer & Web Developer
  Hudson, Massachusetts, ZDA  [email protected] Moj portfelj • @jakerocheleau 
 
  
 
 

Preden skočimo v podrobne CSS želim pojasniti več o uporabi mikropodatkov. Če pogledate natančno, sem v številnih različnih elementih z imeni vpisal atribute itemtype, predmetov, in itemprop. Vse to se nanaša na projekt Schmea, ki želi ponuditi podatkovno strukturo za splet.

Oblikovanje uporabnih mikropodatkov

Vsi glavni iskalniki, vključno z Google, Yahoo! in Bing, so shemo sprejeli kot najboljšo skladnjo za označevanje podatkov. Z označevanjem podatkov o sebi pomaga iskalcem prikazati povezane rezultate za vašo vsebino na spletu. Razčistimo, kako jih nastavimo.

Atribut itemscope se uporablja za vsak vsebnik, ki vsebuje informacije o postavki sheme. Temu vedno sledi atribut itemtype, ki v tem scenariju opisuje osebo. V tej ovojnici div lahko označim katero koli vsebino z uporabo itemprop skupaj z vsemi podrobnostmi, ki so navedene na strani z dokumentacijo.

Priporočena metoda je, da vsebino zavijete v oznako za določen čas, namesto da jo dodate neposredno elementu. Ko označujete nekaj podobnega fotografiji, jo morate priložiti img neposredno. V nasprotnem primeru boste imeli veliko čistejšo oznako, tako da boste podatke zavili v oznake razpona.

Koliko je preveč?

Trdim, da ni nobenih omejitev za količino podrobnosti, v katere se lahko obrnete. Mikropodatki so na voljo za pomoč računalnikom pri prepoznavanju ljudi, organizacij, izdelkov in drugih elementov v spletnem kontekstu. Več informacij lahko ponudite bolje.

Pomembno je ohraniti in odpreti um in videti, kako lahko uporabite te mikropodatke v vidikih vaše lastne spletne strani. Če preživite 10-15 minut skozi dokumentacijo sheme, je veliko lažje, kot bi si mislili. Ogledate si lahko dva trdna primera iz ponovnega predstavitve:

 
 
Znanja in spretnosti
 
 
Razvoj
 
 
HTML5 / CSS3
 
JavaScript & jQuery
 
PHP Backend
 
Baze podatkov SQL
 
Wordpress
 
Pligg CMS
 
Nekateri cilji-C
 
 
 
 
Programska oprema
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Pri navajanju mojih različnih veščin sem nastavil nov zabojnik, ki določa shemo ItemList. V seznamu osebe ni bilo nobene vrste znanja ali izkušenj, zato je to varna alternativa. Vrednost tukaj je, da lahko Google razume vsakega itemListElement je med seboj povezana. V tem primeru imamo seznam jezikov in programske opreme, s katero vem, kako delati.

 
 
Nedavni članki
 
  10 Koristne nadomestne metode za CSS in Javascript • Objavljeno v Julij 2012
 
  Prepisovanje URL-jev v WordPress: Nasveti in dodatki • Objavljeno v Julij 2012
 
  JPEG Optimizacija za splet - Ultimate Guide • Objavljeno v Julij 2012
 
  9 trikov za oblikovanje Perfect HTML Newsletter • Objavljeno v Maj 2012
 
  Priročnik za testiranje A / B z orodjem Google Website Optimizer • Objavljeno v Marec 2012
 
 

Še en dober primer je seznam člankov na samem dnu. Obstaja shema za članke in objave v spletnem dnevniku, vse je povezano z vsebino, ki jo najdete na spletu. Navedel sem URL članka in datum objave, ki je več kot dovolj informacij za te pajke iskalnikov.

Ne pozabite, da so mikropodatki vse o oblikovanju vsebine, ki jo organizirajo računalniki. Ta enostranski življenjepis je odličen primer za definiranje lastnosti o določeni osebi. To ne bo koristno na vsaki spletni strani, vendar je to razumljiva metodologija.

Relativni slogi CSS

V tem zadnjem poglavju si poglejmo, kako oblikovati celotno spletno stran. Na vrh našega slogovnega lista definiram nekaj začetnih ponastavitev in osnovne lastnosti elementov. Mednje spadajo glave, elementi seznama in učinki sidrne povezave.

* margin: 0; oblazinjenje: 0;  html višina: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); velikost pisave: 62,5%; padding-bottom: 65px;  h1 družina pisav: "Simonetta", "Trebuchet MS", Arial, sans-serif; barva: # 454545; velikost pisave: 3.6em; margin-bottom: 6px;  h2 družina pisav: "Simonetta", "Trebuchet MS", Arial, sans-serif; barva: # 484848; velikost pisave: 2.5em; margin-bottom: 10px; dekoracija besedila: podčrtaj;  h3 družina pisav: "Trebuchet MS", Verdana, Arial, sans-serif; barva: # 777; font-weight: normalna; velikost pisave: 1.8em; margin-bottom: 10px;  h4 družina pisav: "Trebuchet MS", Verdana, Arial, sans-serif; barva: # 656565; font-weight: krepko; velikost pisave: 1.75em; margin-bottom: 4px;  p družina pisav: "Balthazar", "serif Droid", Times New Roman, serif; barva: # 565656; velikost pisave: 1.8em; line-height: 1.4em; margin-bottom: 15px; padding-left: 35px;  mala družina pisav: "Balthazar", serif; barva: # 656565; velikost pisave: 1.6em; prikaz: blok; margin-bottom: 6px;  ul prikaz: blok; list-style: noben;  ul li padding-left: 45px; list-style-type: ni; navpično poravnavanje: vrh; ozadje: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px brez ponovitve; margin-bottom: 5px; družina pisav: "Balthazar", serif; barva: # 666; velikost pisave: 1.6em; line-height: 2.3em;  img border: 0; največja širina: 100%;  a barva: # 5582d6; dekoracija besedila: nobena;  a: hover text-decoration: underline;  

Nič preveč zanimivega, razen za nekatere pisave po meri. Namesto privzetega sem uporabil tudi edinstveno ikono “disk”. Lahko poskusite iskati po imeniku, kot je Icon Finder, ko poskušate najti podobno zasnovo.

/ ** @ razporeditev jedra ** / #w margin: 0px 50px; oblazinjenje: 20px 40px; oblazinjenje: 35px; ozadje: #fff; min-width: 260px; max-width: 900px; polmer meje-spodaj-desno-8px; polmer robov-spodaj levo: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  header širina: 100%;  / ** @ osebne nastavitve ** / #info float: levo; margin-bottom: 12px;  #photo float: desno;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; obrobni polmer: 3px; -webkit-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); barva ozadja: #fff; obroba: 1px trdna #ccc; oblazinjenje: 5px;  

Na strani je le nekaj pomembnih blokov, ki zahtevajo pozornost. Seveda je ovojni div nastavljen z dodatnimi robovi in ​​oblazinjenjem. Tudi maksimalna širina je omejena na 900 px, ker se zdi, da ima vsaka večja velikost preveč presledka. Uporabil sem tudi zaobljene vogale na dnu strani, da bi bil učinek gladkejši na oči.

Odzivno oblikovanje

Morda je najpomembnejši vidik tega spletnega življenjepisa odzivna funkcionalnost. Imam pet različnih nastavitev prekinitvenih točk za doseganje različnih učinkov pri spreminjanju velikosti okna brskalnika.

@ samo zaslon in (max-width: 740px) h1 velikost pisave: 4.5em;  h3 velikost pisave: 2.2em;  h2 display: block; text-align: center;  #info float: nič; prikaz: blok; text-align: center;  #photo float: nič; prikaz: blok; text-align: center;  #w padding: 20px 15px;  p polnilo: 0;  

Začetni 740px je okrog mesta, kjer se bo slika slika spopadla z našim besedilom v glavi. Namesto da bi fotografijo spustili na desno stran, očistimo oba elementa in centriramo celotno postavitev. Prav tako sem povečal velikost besedila glave in pustil bolj trden vpliv.

Ker je okno manjše, sem odstranil nekaj dodatnega oblazinjenja iz zavihka div in odstavkov. Naslednji problem, s katerim naletimo po glavi, je iz seznama znanj UL. Razčistim pristop z dvema stolpcema in namesto tega imam elemente seznama, ki plavajo drug ob drugem.

@ samo zaslon in (max-width: 570px) ul li prikaz: inline-block; padding-left: 15px; širina: 140px; položaj ozadja: -5px 0px; margin-right: 6px; line-height: 1.7em;  # spretnost-levo, spretnosti-desno margin-bottom: 15px;  

To zahteva tudi ponovno postavitev mnogih privzetih lastnosti besedila. Moramo posodobiti višino vrstice in premakniti ikono za vsako postavko seznama. Nastavil sem fiksno širino, tako da je mreža bolj organizirana do naslednje točke preloma.

Kodiranje za pametne telefone

Zadnje tri medijske poizvedbe so majhne, ​​a zelo pomembne. Ko preklapljate med krajinskim in pokončnim načinom, bo iPhone spremenil velikost katerega koli mobilnega brskalnika. To velja tudi za večino naprav Android in mobilnih telefonov Windows.

@ samo zaslon in (max-width: 480px) ul li širina: 120px;  #w margin: 0 20px;  @media samo zaslon in (max-width: 320px) #w margin: 0 10px;  / ** iPhone samo ** / @ medijski zaslon in (max-device-width: 480px) ul li širina: 150px;  

Ko prvič pritisnete 480px ali manjši, odstranimo še nekaj oblazinjenja iz ovojnice in ponovno spremenimo elemente seznama. Nato na 320px odstranim nekaj prostora za rob zunaj dokumenta. Še vedno lahko vidite teksturirano ozadje, vendar ni tako pomembno na tako tankem vertikalnem prikazu.

Nazadnje uporabljam max-width-device ciljno usmeriti napravo iPhone, in sicer kateri koli mobilni zaslon z največjo širino 480px. V tem primeru želim posodobiti elemente seznama nekoliko širše, tako da izpolnijo celoten zaslon. To bo vplivalo le na spiske o spretnostih v ležečem pogledu, saj je portret preveč suh, da bi opazil razlike.

• Demo
• Prenesite izvorno kodo

Končne misli

Delo prek interneta pogosto zahteva vsaj vrsto portfelja na spletu. Ko lahko povežete z enim samim nadaljevanjem strani z vsemi podrobnostmi, organiziranimi skupaj, to pomeni, da mislite na podjetje. Resni delodajalci in potencialne stranke se bodo za takim karizmatičnim prikazom profesionalnosti v spletnem oblikovanju zleknile.

Upam, da boste lahko vzeli nekaj ključnih točk stran od te vadnice. Samozaposleni na vseh lokacijah po svetu se lahko tržijo s samo malo tehničnih naporov. Vas prosimo, da prenesete moj demo izvorno kodo zgoraj, in delite svoje misli o tem članku v našem področju komentarjev.