Når du ændrer størrelsen på siden, falder disse blokelementer under hinanden yndefuldt. Jeg har konfigureret et par forskellige forekomster af medieforespørgsler i et eksternt stilark. Dette gør det nemmere at holde styr på stilarter, når man går tilbage for at redigere noget senere.

 
 
 
Jake Rocheleau
 
Freelance Writer & Web Developer
  Hudson, Massachusetts, USA  [email protected] Min portefølje • @jakerocheleau 
 
  
 
 

Før vi hopper ind i detaljeret CSS vil jeg gerne forklare mere om brugen af ​​mikrodata. Hvis du ser tæt på, har jeg spildt attributter inde i mange forskellige elementer med navnene varetype, itemscope, og itemprop. Disse vedrører hele Schmea-projektet, som håber at tilbyde en datastruktur til internettet.

Formatering Nyttig Microdata

Alle de store søgemaskiner, herunder Google, Yahoo !, og Bing har accepteret Schema som den bedste syntax til datapåmelding. Ved at mærke detaljer om dig selv hjælper disse søgemaskiner med relaterede resultater til dit indhold online. Lad os nedbryde, hvordan man opsætter dem.

Attributtet attributten anvendes til enhver beholder, der indeholder oplysninger om et skemaelement. Dette følges altid af attributten itemtype, som i dette scenario beskriver en person. Inde i denne wrapper div kan jeg mærke ethvert indhold ved at bruge itemprop sammen med nogen af ​​de detaljer, der er angivet på deres dokumentationsside.

Den anbefalede metode er at indpakke dit indhold inde i en span-tag i stedet for at føje direkte til elementet. Når du mærker noget som et billede, skal du vedhæfte det til img element direkte. Men ellers får du meget renere markering ved at indpakke dine data i spændetiketter.

Hvor meget er for meget?

Jeg vil hævde, at der ikke er nogen grænse for mængden af ​​detaljer, du kan gå ind i. Mikrodata er tilgængelig for at hjælpe computere med at genkende personer, organisationer, produkter og andre elementer i en online-kontekst. Jo flere oplysninger du kan tilbyde, jo bedre.

Det er værd at holde og åbne sindet og se, hvordan du kan bruge disse mikrodata i aspekter af din egen hjemmeside. Hvis du bruger 10-15 minutter igennem Schema dokumentationen, er det meget nemmere end du tror. Vi kan se på to solide eksempler fra CV-demoen:

 
 
Færdigheder
 
 
Udvikling
 
 
HTML5 / CSS3
 
JavaScript & jQuery
 
PHP Backend
 
SQL Databaser
 
Wordpress
 
Pligg CMS
 
Nogle mål-C
 
 
 
 
Software
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Når jeg noterer mine forskellige færdigheder, har jeg opsat en ny container, der definerer ItemList-skemaet. Der var ikke nogen form for færdigheder eller erfaring at liste under en person, så dette er et sikkert alternativ. Værdien her er, at Google kan forstå hver itemListElement er relateret til hinanden. I dette tilfælde har vi en liste over sprog og software, jeg ved, hvordan jeg skal arbejde med.

 
 
Seneste artikler
 
  10 Nyttige tilbagekaldelsesmetoder til CSS og Javascript • Udgivet i Juli 2012
 
  Omskrivning af webadresser i WordPress: Tips og plugins • Udgivet i Juli 2012
 
  JPEG-optimering til internettet - Ultimate Guide • Udgivet i Juli 2012
 
  9 tricks til at designe den perfekte HTML-nyhedsbrev • Udgivet i Maj 2012
 
  Guide til A / B-test med Google Website Optimizer • Udgivet i Marts 2012
 
 

Et andet godt eksempel er de artikler, der findes i bunden. Der er en skemaopsætning for artikler og blogindlæg, alt relateret til indhold fundet online. Jeg har angivet artiklen URL og offentliggørelsesdato, som er mere end nok info til disse søgemaskine crawlere.

Bare husk at microdata handler om formatering af indhold, der skal organiseres af computere. Denne enkelt-side CV er det perfekte eksempel til at definere træk om en bestemt person. Disse vil ikke være nyttige på alle hjemmesider, men det er en spændende metode til at forstå.

Relative CSS-stilarter

I dette sidste afsnit får vi se på, hvordan du stiler hele denne webside. Mod toppen af ​​vores stylesheet definerer jeg nogle indledende nulstillinger og grundlæggende elementegenskaber. Disse omfatter overskrifter, listeposter og ankerlink svæveffekter.

* margin: 0; polstring: 0;  html højde: 101%;  krop baggrund: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); fontstørrelse: 62,5%; polstring-bund: 65px;  h1 font-familie: "Simonetta", "Trebuchet MS", Arial, sans-serif; farve: # 454545; skrifttypestørrelse: 3.6em; margin-bund: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; farve: # 484848; skrifttypestørrelse: 2.5em; margin-bund: 10px; tekst-dekoration: understrege;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; farve: # 777; skrifttype-vægt: normal; skrifttypestørrelse: 1,8em; margin-bund: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; farve: # 656565; font-weight: bold; skrifttypestørrelse: 1,75em; margin-bund: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; farve: # 565656; skrifttypestørrelse: 1,8em; linjehøjde: 1.4em; margin-bund: 15px; polstring-venstre: 35px;  lille font-family: "Balthazar", serif; farve: # 656565; skrifttypestørrelse: 1.6em; display: blok; margin-bund: 6px;  ul display: block; listestil: none;  ul li polstring-venstre: 45px; liste-stil-type: none; vertikaljustering: top; baggrund: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bund: 5px; skrifttype-familie: "Balthazar", serif; farve: # 666; skrifttypestørrelse: 1.6em; linjehøjde: 2,3em;  img grænse: 0; maksimal bredde: 100%;  en farve: # 5582d6; tekst dekoration: ingen;  a: svæver text-decoration: understrege;  

Intet for interessant, bortset fra nogle af de brugerdefinerede skrifttypestabler. Jeg greb også en unik kugle ikon i stedet for at bruge standard “disk”. Du kan prøve at søge gennem en mappe som Icon Finder, når du forsøger at finde et lignende design.

/ ** @group kernelayout ** / #w margen: 0px 50px; polstring: 20px 40px; polstring-top: 35px; baggrund: #fff; min bredde: 260px; maksimal bredde: 900px; grænse-bund-højre-radius: 8px; grænse-bund-venstre-radius: 8px; -webkit-grænse-bund-venstre-radius: 8px; -webkit-grænse-bund-højre-radius: 8px; -moz-grænse-radius-bottomleft: 8px; -moz-grænse-radius-bottomright: 8px;  header bredde: 100%;  / ** @group personlige indstillinger ** / #info float: left; margin-bund: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-grænse-radius: 3px; grænse-radius: 3px; -webkit-boks-skygge: 0 2px 4px rgba (0, 0, 0, 0.2); -moz-box-shadow: 0 2px 4px rgba (0, 0, 0, 0.2); box-skygge: 0 2px 4px rgba (0, 0, 0, 0.2); baggrundsfarve: #fff; grænse: 1px solid #ccc; polstring: 5px;  

Der er kun et par vigtige blokområder på siden, som kræver opmærksomhed. Selvfølgelig er wrapper div opsat med ekstra marginer og polstring. Også den maksimale bredde er begrænset til 900px, fordi en større størrelse føles som, at siden har for meget whitespace. Jeg har også brugt afrundede hjørner nederst på siden for en jævnere effekt på øjnene.

Responsive Design

Muligvis er det mest afgørende aspekt af denne online-CV det responsive funktionalitet. Jeg har fem forskellige breakpoints setup for at opnå forskellige effekter, når du ændrer browservinduet.

@media only screen og (maxbredde: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 display: block; tekst-align: center;  #info float: none; display: blok; tekst-align: center;  #photo float: none; display: blok; tekst-align: center;  #w polstring: 20px 15px;  p polstring: 0;  

Den oprindelige 740px er lige rundt hvor billedbilledet kommer i konflikt med vores headertekst. I stedet for at lade billedet falde ned på højre side fjerner vi begge elementer og centrerer hele layoutet. Jeg har også øget teksttekststørrelsen for at give en mere solid indflydelse.

Da vinduet bliver mindre, har jeg fjernet noget ekstra polstring fra wrapper div og afsnit. Det næste problem vi løber ind efter overskriften er fra færdighederne UL notering. Jeg bryder ned to-kolonne tilgangen og i stedet har listeposter flydende ved siden af ​​hinanden.

@media only screen og (maxbredde: 570px) ul li display: inline-block; polstring-venstre: 15px; bredde: 140px; baggrundsstilling: -5px 0px; margen-højre: 6px; linjehøjde: 1,7em;  # færdigheder-venstre, færdigheder-højre margin-bottom: 15px;  

Dette kræver også genplacering af mange af standardtekstegenskaberne. Vi er nødt til at opdatere linjens højde og omplacere hvert punktelementets punktikon. Jeg har sat en fast bredde, så gitteret virker mere organiseret til næste knækpunkt.

Kodning til Smartphones

De sidste tre medieforespørgsler er små, men meget vigtige. Når du skifter mellem landskabs- og portrættilstand, ændrer iPhone størrelsen på enhver mobilbrowser. Dette er også tilfældet med de fleste Android-enheder og Windows Mobile-telefoner.

@media only screen og (maxbredde: 480px) ul li bredde: 120px;  #w margen: 0 20px;  @media only screen og (maxbredde: 320px) #w margin: 0 10px;  / ** Kun iPhone ** / @media-skærm og (maksimal enhedsbredde: 480px) ul li bredde: 150px;  

Når vi først rammer 480 px eller mindre, fjerner vi en del mere polstring fra omslaget og ændrer også listen igen. Derefter ved 320px har jeg fjernet noget af marginrummet uden for dokumentet. Du kan stadig se den strukturerede baggrund, men det er ikke meget vigtigt på en så slank lodret visning.

Endelig bruger jeg max-device-width at målrette mod iPhone-enheden selv, eller en anden mobil skærm med en maksimal bredde på 480px. I dette tilfælde ønsker jeg at opdatere listeposterne lidt bredere, så de udfylder hele skærmen. Det vil kun påvirke færdighedsoversigterne i landskabsvisning, da portræt er for tyndt at bemærke eventuelle forskelle.

• Demo
• Download kildekode

Afsluttende tanker

At arbejde over internettet kræver ofte mindst en slags portefølje online. Når du kan linke til en enkelt side genoptage med alle dine detaljer organiseret sammen, viser det sig, at du mener forretning. Alvorlige arbejdsgivere og potentielle kunder vil falde over hælene for en sådan karismatisk visning af professionalisme i webdesign.

Jeg håber du kan tage nogle nøglepunkter væk fra denne vejledning. Frilansere på ethvert sted rundt om i verden kan markedsføre sig med lidt teknisk indsats. Du er velkommen til at downloade min demo kildekoden ovenfor, og dele dine tanker om denne artikel i vores kommentarer område.