När du ändrar storleken på sidan faller dessa blockelement under varandra elegant. Jag har installerat några olika instanser av mediefrågor i ett externt stilark. Detta gör det enklare att hålla reda på stilar när du går tillbaka för att redigera något senare.

 
 
 
Jake Rocheleau
 
Freelance Writer & Web Developer
  Hudson, massachusetts, usa  [email protected] Min portfölj • @jakerocheleau 
 
  
 
 

Innan vi hoppar in i detaljerad CSS vill jag förklara mer om användningen av mikrodata. Om du tittar noga har jag skräpt attribut i många olika delar med namnen Objekttyp, itemscope, och itemprop. Alla relaterar till Schmea-projektet som hoppas kunna erbjuda en datastruktur för webben.

Formatering av användbar mikrodata

Alla de stora sökmotorerna, inklusive Google, Yahoo !, och Bing har accepterat Schema som den bästa syntaxen för datapåverkan. Genom att märka detaljer om dig själv hjälper det här sökmotorerna att visa relaterade resultat för ditt innehåll online. Låt oss bryta ner hur man ställer upp dessa.

Objectcope-attributet tillämpas på alla behållare som innehåller information om ett schemaobjekt. Detta följs alltid av attributtypen, som i det här scenariot beskriver en person. Inom denna wrapper div kan jag märka något innehåll genom att använda itemprop tillsammans med någon av de uppgifter som finns på deras dokumentationssida.

Den rekommenderade metoden är att paketera ditt innehåll inuti en span-tagg istället för att lägga direkt på elementet. När du märker något som ett foto bör du bifoga det till img element direkt. Men annars har du mycket renare markup genom att pakka in dina data i spårstaggar.

Hur mycket är för mycket?

Jag skulle argumentera för att det inte finns någon gräns för hur mycket detaljer du kan gå in i. Mikrodata är tillgänglig för att hjälpa datorer att känna igen personer, organisationer, produkter och andra objekt i ett online-sammanhang. Ju mer information du kan erbjuda, desto bättre.

Det är värt att hålla och öppna sinne och se hur du kan använda denna mikrodata i aspekter på din egen webbplats. Om du spenderar 10-15 minuter genom Schema dokumentationen är det mycket lättare än du skulle tro. Vi kan titta på två solida exempel från CV-demo:

 
 
Kompetens
 
 
Utveckling
 
 
HTML5 / CSS3
 
JavaScript & jQuery
 
PHP Backend
 
SQL databaser
 
word~~POS=TRUNC
 
Pligg CMS
 
Några mål-C
 
 
 
 
programvara
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

När jag listar mina olika färdigheter har jag installerat en ny behållare som definierar ItemList-schemat. Det fanns ingen typ av kompetens eller erfarenhet att lista under en person, så det här är ett säkert alternativ. Värdet här är att Google kan förstå var och en itemListElement är relaterad till varandra. I det här fallet har vi en lista över språk och programvara som jag vet hur jag ska arbeta med.

 
 
senaste artiklar
 
  10 Användbara fallbackmetoder för CSS och Javascript • Publicerad i Juli 2012
 
  Skriva om webbadresser i WordPress: Tips och plugin • Publicerad i Juli 2012
 
  JPEG-optimering för webben - Ultimate Guide • Publicerad i Juli 2012
 
  9 tricks för att designa den perfekta HTML-nyhetsbrevet • Publicerad i Maj 2012
 
  Guide till A / B-test med Google Website Optimizer • Publicerad i Mars 2012
 
 

Ett annat bra exempel är artiklarna som finns längst ner. Det finns en schemainställning för artiklar och blogginlägg, alla relaterade till innehåll som hittats online. Jag har angett artikeladressen och publiceringsdatumet som är mer än tillräckligt med information för sökrobotarna.

Tänk bara på att mikrodata handlar om att formatera innehåll som ska organiseras av datorer. Denna enkelsidiga CV är det perfekta exemplet för att definiera egenskaper för en viss person. Dessa kommer inte att vara användbara på alla webbplatser, men det är en spännande metod att förstå.

Relativa CSS-stilar

I det här sista avsnittet får vi titta på hur man utformar hela denna webbsida. Mot toppen av vårt stylesheet definierar jag några initiala återställningar och grundläggande elementegenskaper. Dessa inkluderar rubriker, listobjekt och ankarlänkhöjningseffekter.

* marginal: 0; vaddering: 0;  html höjd: 101%;  kropp bakgrund: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); typsnittstorlek: 62,5%; vadderande botten: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; färg: # 454545; typsnittstorlek: 3.6em; marginalbotten: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; färg: # 484848; typsnittstorlek: 2.5em; marginal-botten: 10px; text-dekoration: understryka;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; färg: # 777; typsnitt: normal; typsnittstorlek: 1,8em; marginal-botten: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; färg: # 656565; font-weight: bold; typsnittstorlek: 1,75em; marginalbotten: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; färg: # 565656; typsnittstorlek: 1,8em; linjehöjd: 1.4em; marginalbotten: 15px; padding-left: 35px;  liten font-family: "Balthazar", serif; färg: # 656565; typsnittstorlek: 1.6em; display: block; marginalbotten: 6px;  ul display: block; listestil: none;  ul li padding-left: 45px; lista-stil-typ: none; vertikaljustering: topp; bakgrund: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; marginal-botten: 5px; font-family: "Balthazar", serif; färg: # 666; typsnittstorlek: 1.6em; linjehöjd: 2.3em;  img border: 0; max bredd: 100%;  en färg: # 5582d6; text-dekoration: ingen;  a: svävar text-decoration: underline;  

Inget för intressant förutom några av de anpassade teckensnittsstackarna. Jag tog också en unik punktikon istället för att använda standardvärdet “skiva”. Du kan försöka söka igenom en katalog som Icon Finder när du försöker hitta en liknande design.

/ ** @group kärnlayout ** / #w margin: 0px 50px; vaddering: 20px 40px; padding-top: 35px; bakgrund: #fff; min bredd: 260px; maxbredd: 900px; gränsbotten-högra radie: 8px; gränsen längst ner till vänster: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-gränsen-radie-bottomleft: 8px; -moz-gräns-radie-bottomright: 8px;  rubrik bredd: 100%;  / ** @group personliga inställningar ** / #info float: left; marginalbotten: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-gränsen-radien: 3px; gränsstråle: 3px; -webkit-box-skugga: 0 2px 4px rgba (0, 0, 0, 0.2); -moz-box-skugga: 0 2px 4px rgba (0, 0, 0, 0.2); boxskugga: 0 2px 4px rgba (0, 0, 0, 0.2); bakgrundsfärg: #fff; gränsen: 1px solid #ccc; vaddering: 5px;  

Det finns bara några viktiga blockområden på sidan som kräver uppmärksamhet. Naturligtvis är wrapper div inställd med extra marginaler och vaddering. Även maxbredden är begränsad till 900px eftersom en större storlek känns som att sidan har för mycket blankutrymme. Jag har också använt avrundade hörn längst ner på sidan för en smidigare effekt på ögonen.

Responsiv design

Den viktigaste aspekten av denna online-CV är möjligen den responsiva funktionaliteten. Jag har fem olika brytpunkter för att uppnå olika effekter när du ändrar webbläsarfönstret.

@media bara skärm och (max bredd: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 display: block; text-align: center;  # info float: none; display: block; text-align: center;  #photo float: none; display: block; text-align: center;  #w vaddering: 20px 15px;  p vaddering: 0;  

Den första 740px ligger rätt där bildbilden kommer att kollidera med vår rubriktext. I stället för att låta bilden falla ned på höger sida, rensar vi båda elementen och centrerar hela layouten. Jag har också ökat rubrikens textstorlek för att ge en mer solid inverkan.

När fönstret blir mindre har jag tagit bort extra extrapolning från wrapper div och stycken. Nästa problem vi stöter på efter rubriken är från kompetensen UL-notering. Jag bryter ner tvåkolonnens tillvägagångssätt och har istället listobjekt som flyter bredvid varandra.

@media bara skärm och (maxbredd: 570px) ul li display: inline-block; stoppning-vänster: 15px; bredd: 140px; bakgrundsställning: -5px 0px; marginal-höger: 6px; linjehöjd: 1,7em;  # färdigheter-vänster, färdigheter-höger margin-bottom: 15px;  

Detta kräver också att man omplacerar många av standardtextegenskaperna. Vi måste uppdatera linjens höjd och omplacera varje listobjektets kollikon. Jag har fastställt en fast bredd så att rutnätet ser mer organiserat fram till nästa brytpunkt.

Kodning för Smartphones

De senaste tre mediefrågorna är små men väldigt viktiga. När du byter mellan landskap och porträttläge, ändrar din iPhone alla mobila webbläsare. Detta är också fallet med de flesta Android-enheter och Windows Mobile-telefoner.

@media bara skärm och (max bredd: 480px) ul li bredd: 120px;  #w marginal: 0 20px;  @media endast skärm och (maxbredd: 320px) #w margin: 0 10px;  / ** Endast iPhone ** / @medias skärm och (max enhetens bredd: 480px) ul li bredd: 150px;  

När vi först slår 480px eller mindre tar vi bort lite mer vadderingar från omslaget och omformar även listobjekten igen. Sedan vid 320px har jag tagit bort något av marginalutrymmet utanför dokumentet. Du kan fortfarande se den texturerade bakgrunden, men det är inte så viktigt med ett så litet vertikalt visningsport.

Till sist använder jag max-anordning-bredd att rikta sig till iPhone-enheten själv, eller nämligen någon annan mobil skärm med en maximal bredd på 480px. I det här fallet vill jag uppdatera listobjekten lite bredare så att de fyller i hela skärmen. Det kommer endast att påverka kompetensförteckningarna i landskapsutsikt, eftersom porträtt är för mager att märka några skillnader.

• demo
• Hämta källkod

Slutgiltiga tankar

Att arbeta via Internet kräver ofta åtminstone någon typ av portfölj på nätet. När du kan länka till en enda sida CV med alla dina detaljer organiserade tillsammans visar det att du menar affärer. Allvarliga arbetsgivare och potentiella kunder kommer att falla över huvudet för en sådan karismatisk visning av professionalism i webbdesign.

Jag hoppas att du kan ta några viktiga punkter bort från denna handledning. Frilansare på alla platser runt om i världen kan marknadsföra sig med lite teknisk insats. Känn dig fri att ladda ned min demokällkod ovan och dela dina tankar om den här artikeln i vårt kommentarer-område.