Mainot lapas izmērus, šie bloku elementi krīt zem viena otrā. Esmu izveidojis dažus dažādus multivides vaicājumu gadījumus ārējā stillapā. Tas atvieglo stilu izsekošanu, kad dodaties atpakaļ, lai vēlāk rediģētu kaut ko.

 
 
 
Jake Rocheleau
 
Freelance Writer & Web Developer
  Hudson, Masačūsetsa, ASV  [email protected] Mans portfelis • @jakerocheleau 
 
  
 
 

Pirms mēs pāriet uz detalizētu CSS, es vēlos vairāk paskaidrot par mikrodatu izmantošanu. Ja jūs uzmanīgi paskatījāties, es esmu pamanījuši atribūtus daudzos dažādos elementos ar nosaukumiem itemtype, posteņi, un postenis. Tie visi attiecas uz Schmea projektu, kas cer piedāvāt tīmekļa datu struktūru.

Noderīgu mikrodatu formatēšana

Visas lielākās meklētājprogrammas, tostarp Google, Yahoo! Un Bing, ir akceptējušas shēmu kā labāko sintaksi datu marķēšanai. Marķējot informāciju par sevi, tas palīdz šīm meklētājprogrammām attēlot ar jūsu saturu saistītos rezultātus tiešsaistē. Sadalīsim, kā tos iestatīt.

Atribūtu itemcope piemēro jebkuram konteineram, kurā ir informācija par shēmas elementu. Tam vienmēr seko atribūts itemtype, kas šajā scenārijā apraksta personu. Šajā iesaiņojuma divpusē es varu marķēt jebkuru saturu, izmantojot vienumus ar preci kopā ar jebkuru informāciju, kas norādīta viņu dokumentācijas lapā.

Ieteicamā metode ir ievietot saturu satura tagā, nevis pievienot tieši elementam. Kad jūs marķējat kaut ko līdzīgu fotoattēlam, jums jāpievieno prece img elementu tieši. Bet pretējā gadījumā jums būs daudz tīrāka atzīme, iesaiņojot datus span tagos.

Cik daudz ir pārāk daudz?

Es apgalvoju, ka nav nekādu ierobežojumu detalizācijas apjomam, uz kuru jūs varat doties. Mikrodati ir pieejami, lai palīdzētu datoriem atpazīt cilvēkus, organizācijas, produktus un citus elementus tiešsaistes kontekstā. Jo vairāk informācijas jūs varat piedāvāt, jo labāk.

Ir vērts saglabāt un atklāt prātu un redzēt, kā jūs varat izmantot šos mikrodatus savā tīmekļa vietnē. Ja jūs pavadāt 10-15 minūtes, izmantojot Schema dokumentāciju, tas ir daudz vieglāk, nekā jūs domājat. Mēs varam aplūkot divus cietus piemērus no atsākšanas demonstrācijas:

 
 
Skillset
 
 
Attīstība
 
 
HTML5 / CSS3
 
JavaScript un jQuery
 
PHP Backend
 
SQL datu bāzes
 
WordPress
 
Pligg CMS
 
Daži mērķi C
 
 
 
 
Programmatūra
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Uzskaitot dažādas prasmes, es izveidoju jaunu konteineru, kas definē ItemList shēmu. Personā nebija neviena veida prasmju vai pieredzes, tāpēc šī ir droša alternatīva. Vērtība šeit ir tāda, ka Google var saprast katru itemListElement ir savstarpēji saistīti. Šajā gadījumā mums ir saraksts ar valodām un programmatūru, ar ko es varu strādāt.

 
 
Jaunākie raksti
 
  10 Noderīgas atmaksas metodes CSS un Javascript • Publicēts 2012. gada jūlijs
 
  URL pārrakstīšana programmā WordPress: padomi un spraudņi • Publicēts 2012. gada jūlijs
 
  JPEG optimizācija tīmeklī - galīgais ceļvedis • Publicēts 2012. gada jūlijs
 
  9 triki, lai izstrādātu perfektu HTML biļetenu • Publicēts 2012. gada maijs
 
  A / B testēšanas rokasgrāmata Izmantojot Google vietnes optimizētāju • Publicēts 2012. gada marts
 
 

Vēl viens labs piemērs ir raksti, kas atrodami pašā apakšējā daļā. Rakstiem un emuāra ziņojumiem ir shēmas iestatījums, kas saistīts ar tiešsaistē atrasto saturu. Esmu norādījis raksta URL un publicēšanas datumu, kas ir vairāk nekā pietiekami daudz informācijas par šiem meklētājprogrammu robotajiem.

Vienkārši paturiet prātā, ka mikrodati ir visu par datorā organizējamā satura formatēšanu. Šis vienas lapas atsākums ir ideāls piemērs, lai noteiktu iezīmes par konkrētu personu. Tās nebūs noderīgas katrā tīmekļa vietnē, bet tā ir aizraujoša metodika, lai saprastu.

Relatīvie CSS stili

Šajā pēdējā sadaļā aplūkosim, kā veidot visu šo tīmekļa lapu. Mūsu stila lapas augšdaļā es definēju dažas sākotnējās atiestatīšanas un pamata elementu īpašības. Tie ietver galvenes, saraksta vienumus un enkura saites hover efektus.

* starpība: 0; polsterējums: 0;  html augstums: 101%;  ķermenis fons: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); fonta lielums: 62,5%; polsterējums-apakšā: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serifs; krāsa: # 454545; fonta lielums: 3.6em; margas apakšā: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serifs; krāsa: # 484848; fonta lielums: 2.5em; margas apakšā: 10px; teksta apdare: pasvītrojums;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serifs; krāsa: # 777; fontu svars: normāls; fonta lielums: 1.8em; margas apakšā: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serifs; krāsa: # 656565; font-weight: bold; fonta lielums: 1.75em; margas apakšā: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serifs; krāsa: # 565656; fonta lielums: 1.8em; līnijas augstums: 1.4em; margas apakšējā daļa: 15px; polsterējums pa kreisi: 35px;  mazs font-family: "Balthazar", serifs; krāsa: # 656565; fonta lielums: 1.6em; displejs: bloks; margas apakšā: 6px;  ul displejs: bloks; saraksta stils: nav;  ul li kreisajā pusē: 45px; list-style-type: nav; vertikāli līdzīgs: augšā; fons: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px bez atkārtot; margas apakšā: 5px; font-family: "Balthazar", serifs; krāsa: # 666; fonta lielums: 1.6em; līnijas augstums: 2.3em;  img border: 0; maksimālais platums: 100%;  a krāsa: # 5582d6; teksta apdare: nav;  a: lidmašīna tekstizstrādājums: pasvītrojums;  

Nekas nav pārāk interesants, izņemot dažus pielāgotus fontus. Es izmantoju arī unikālu aizzīmju ikonu, nevis noklusējuma iestatījumu “disku”. Jūs varat mēģināt meklēt, izmantojot direktoriju, piemēram, Icon Finder, mēģinot atrast līdzīgu dizainu.

/ ** @grupas koda izkārtojums ** / #w starpība: 0px 50px; polsterējums: 20px 40px; polsterējums: 35px; fons: #fff; min-platums: 260px; maksimālais platums: 900px; robežu apakšējā labajā stūrī: 8px; robežu apakšējā kreisā rādiuss: 8px; -webkit-robežas-apakšējā kreisā rādiuss: 8px; -webkit-robežu apakšējā labajā stūrī: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  galvene platums: 100%;  / ** @grupas personas iestatījumi ** / #info float: pa kreisi; margas apakšējā daļa: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-rādiuss: 3px; robežu rādiuss: 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); kastes ēna: 0 2px 4px rgba (0, 0, 0, 0,2); fona krāsa: #fff; robeža: 1px cietais #ccc; polsterējums: 5px;  

Lapā ir tikai dažas svarīgas bloku zonas, kurām nepieciešama uzmanība. Protams, iesaiņojuma divgrupa ir uzstādīta ar papildu margām un polsterējumu. Arī maksimālais platums ir ierobežots 900px, jo jebkurš lielāks izmērs jūt, ka lapai ir pārāk daudz vietas. Lapas apakšā esmu izmantojis noapaļotus stūri, lai padarītu acīm vieglāku efektu.

Reaģējošs dizains

Iespējams, ka svarīgākais šī tiešsaistes atsākšanas aspekts ir atsaucīgā funkcionalitāte. Man ir pieci dažādi pārtraukuma punkti, lai panāktu dažādus efektus pārlūkprogrammas loga izmēru maiņas laikā.

@ media only screen un (max-width: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 displejs: bloks; teksta saskaņošana: centrs;  #info float: nav; displejs: bloks; teksta saskaņošana: centrs;  #photo float: nav; displejs: bloks; teksta saskaņošana: centrs;  #w polsterējums: 20px 15px;  p polsterējums: 0;  

Sākotnējais 740px ir taisnība, kur fotoattēla attēls būs pretrunā ar mūsu galvenes tekstu. Tā vietā, lai fotoattēlu noliktu labajā pusē, izdzēsīsim abus elementus un centrējam visu izkārtojumu. Es arī palielināju virsraksta teksta izmēru, lai atstātu spēcīgāku ietekmi.

Tā kā logs kļūst mazāks, esmu noņēmis dažus papildu polsterējumus no iesaiņojuma divpunktiem un punktiem. Nākamā problēma, ar kuru mēs nonākam pēc galvenes, ir no UL saraksta. Es salauju divu kolonnu pieeju un tā vietā esiet saraksta elementi, kas peldoši viens otram.

@ media only screen un (max-width: 570px) ul li displejs: inline-block; polsterējums pa kreisi: 15px; platums: 140px; fona pozīcija: -5px 0px; labās malas: 6px; līnijas augstums: 1.7em;  # prasmes pa kreisi, prasmes-labi margin-bottom: 15px;  

Tas prasa arī daudzu noklusējuma teksta rekvizītu pārvietošanu. Mums ir jāatjaunina līnijas augstums un jāpārvieto katra saraksta vienības aizzīmju ikona. Esmu iestatījis fiksētu platumu, lai režģis būtu vairāk organizēts līdz nākamajam pārtraukumam.

Viedtālruņu kodēšana

Pēdējie trīs mediju vaicājumi ir mazi, bet ļoti svarīgi. Pārslēdzoties starp ainavu un portreta režīmu, iPhone mainīs jebkuru mobilo pārlūkprogrammu. Tas attiecas arī uz lielāko daļu Android ierīču un Windows Mobile tālruņu.

@ media only screen un (max-width: 480px) ul li platums: 120px;  #w starpība: 0 20px;  @ media only screen un (max-width: 320px) #w starpība: 0 10px;  / ** Tikai iPhone ** / @ media ekrāns un (max-device-width: 480px) ul li platums: 150px;  

Pirmo reizi nokļūstot 480px vai mazāku, mēs no iesaiņojuma noņemam vēl dažus polsterējumus un vēlreiz izmēra saraksta vienumus. Pēc tam pie 320px es esmu noņēmis daļu no rezerves vietas ārpus dokumenta. Jūs joprojām varat redzēt teksturētu fonu, bet tas nav ļoti svarīgi šādā plānā vertikālā skatā.

Visbeidzot es izmantoju maks. ierīces platums mērķēt uz iPhone ierīci vai arī uz jebkuru citu mobilo ekrānu ar maksimālo platumu 480px. Šādā gadījumā es vēlos atjaunināt saraksta vienumus nedaudz plašāk, lai tie aizpildītu visu ekrānu. Tas ietekmēs tikai prasmju sarakstus ainavas skatījumā, jo portrets ir pārāk vājš, lai pamanītu atšķirības.

• Demo
• Lejupielādēt avota kodu

Galīgās domas

Lai strādātu internetā, bieži nepieciešama vismaz kāda veida portfelis tiešsaistē. Kad jūs varat saiti uz vienu lapu atsākt ar visām jūsu apkopotajām detaļām, tas parāda, ka jūs domājat par uzņēmējdarbību. Nopietni darba devēji un potenciālie klienti pārvarēs tādus karizmātiskus web dizaina profesionalitātes rādītājus.

Es ceru, ka jūs varat veikt dažus galvenos punktus no šīs apmācības. Ārštata darbinieki jebkurā vietā visā pasaulē var sevi tirgot tikai ar nelielu tehnisko piepūli. Jūtieties brīvi, lai lejupielādētu iepriekš minēto demo avota kodu un dalītos savās domās par šo rakstu mūsu komentāru apgabalā.