Apabila anda mengubah saiz halaman, elemen blok ini jatuh di bawah satu sama lain dengan anggun. Saya telah menyediakan beberapa contoh pertanyaan media yang berbeza dalam lembaran gaya luaran. Ini menjadikannya lebih mudah untuk mengesan gaya ketika kembali mengedit sesuatu kemudian.

 
 
 
Jake Rocheleau
 
Penulis Bebas & Pemaju Web
  Hudson, Massachusetts, USA  [email protected] Portfolio saya • @jakerocheleau 
 
  
 
 

Sebelum kita melompat ke CSS terperinci saya ingin menerangkan lebih lanjut mengenai penggunaan microdata. Jika anda melihat dengan teliti saya telah menyusun sifat di dalam pelbagai elemen yang berlainan dengan nama-nama jenis barang, itemscope, dan itemprop. Ini semua berkaitan dengan projek Schmea yang berharap dapat menawarkan struktur data untuk web.

Memformatkan Microdata berguna

Semua enjin carian utama termasuk Google, Yahoo !, dan Bing telah menerima Skema sebagai sintaks terbaik untuk penanda data. Dengan melabelkan butiran mengenai diri anda, enjin carian ini memaparkan hasil yang berkaitan untuk kandungan anda dalam talian. Mari kita putuskan cara menyusunnya.

Atribut itemscope digunakan untuk mana-mana bekas yang memegang maklumat pada item skema. Ini sentiasa diikuti oleh sifat atribut item, yang dalam senario ini menggambarkan seseorang. Di dalam pembalut div ini, saya boleh melabel apa-apa kandungan dengan menggunakan itemprop bersama-sama dengan mana-mana butiran yang disenaraikan di halaman dokumentasi mereka.

Kaedah yang disyorkan ialah membungkus kandungan anda di dalam teg span dan bukannya memasukkan terus ke elemen. Apabila anda melabel sesuatu seperti foto, anda harus melampirkan itemprop ke img elemen secara langsung. Tetapi jika tidak, anda akan mempunyai markup yang lebih bersih dengan membungkus data anda dalam tag span.

Berapa Banyak Terlalu Banyak?

Saya akan berhujah bahawa tidak ada batasan kepada jumlah terperinci yang anda boleh masuk. Microdata tersedia untuk membantu komputer mengenali orang, organisasi, produk, dan barangan lain dalam konteks dalam talian. Lebih banyak maklumat yang anda boleh tawarkan, lebih baik.

Adalah berbalas untuk menjaga dan membuka minda dan melihat bagaimana anda boleh menggunakan microdata ini dalam aspek laman web anda sendiri. Jika anda menghabiskan 10-15 minit melalui dokumentasi Schema, ia lebih mudah daripada yang anda fikirkan. Kita boleh melihat dua contoh kukuh dari demo resume:

 
 
Set kemahiran
 
 
Pembangunan
 
 
HTML5 / CSS3
 
JavaScript & jQuery
 
PHP Backend
 
Pangkalan data SQL
 
Wordpress
 
Pligg CMS
 
Sesetengah Objektif-C
 
 
 
 
Perisian
 
 
Adobe Photoshop
 
Adobe Dreamweaver
 
MS Office 2007-2010
 
cPanel & phpMyAdmin
 
Xcode 4
 
 
 
 

Apabila menyenaraikan pelbagai kemahiran saya, saya telah menyediakan satu bekas baru yang menentukan skema ItemList. Tidak ada jenis skillet atau pengalaman untuk disenaraikan di bawah Orang, jadi ini adalah alternatif yang selamat. Nilai di sini adalah bahawa Google boleh memahami setiap itemListElement berkaitan dengan satu sama lain. Dalam kes ini kita mempunyai senarai bahasa dan perisian yang saya tahu bagaimana untuk bekerja dengannya.

 
 
Artikel terkini
 
  10 Kaedah Fallback yang berguna untuk CSS Dan Javascript • Diterbitkan di Julai 2012
 
  Menulis semula URL Di WordPress: Tips Dan Plugin • Diterbitkan di Julai 2012
 
  Pengoptimuman JPEG Untuk Web - Panduan Muktamad • Diterbitkan di Julai 2012
 
  9 Trik Untuk Merancang Surat Berita HTML Perfect • Diterbitkan di Mei 2012
 
  Panduan Ujian A / B Dengan Pengoptimal Laman Web Google • Diterbitkan di Mac 2012
 
 

Satu lagi contoh yang baik adalah penyenaraian artikel yang terdapat di bahagian paling bawah. Terdapat persediaan skema untuk artikel dan catatan blog, semua yang berkaitan dengan kandungan yang ditemui dalam talian. Saya telah menunjukkan URL artikel dan tarikh penerbitan yang lebih banyak maklumat yang cukup untuk crawler enjin carian ini.

Hanya perlu diingat bahawa microdata adalah mengenai pemformatan kandungan yang akan dianjurkan oleh komputer. Resume satu halaman ini adalah contoh yang sempurna untuk menentukan ciri-ciri orang tertentu. Ini tidak akan berguna pada setiap laman web, tetapi ia adalah satu kaedah yang menarik untuk difahami.

Gaya CSS Relatif

Dalam bahagian terakhir ini, mari kita lihat cara untuk menyusun laman web keseluruhan ini. Menuju bahagian atas lembaran gaya kami, saya mendefinisikan semula beberapa sifat permulaan dan elemen asas. Ini termasuk tajuk, senarai item, dan kesan hover pautan utama.

* margin: 0; padding: 0;  html ketinggian: 101%;  body background: # f2f2f2 url ('https://assets.hongkiat.com/uploads/responsive-resume/bg-tile.png'); saiz fon: 62.5%; padding-bottom: 65px;  h1 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; warna: # 454545; saiz fon: 3.6em; margin-bottom: 6px;  h2 font-family: "Simonetta", "Trebuchet MS", Arial, sans-serif; warna: # 484848; saiz fon: 2.5em; margin-bottom: 10px; teks-hiasan: garis bawah;  h3 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; warna: # 777; font-weight: normal; saiz fon: 1.8em; margin-bottom: 10px;  h4 font-family: "Trebuchet MS", Verdana, Arial, sans-serif; warna: # 656565; font-weight: bold; saiz fon: 1.75em; margin-bottom: 4px;  p font-family: "Balthazar", "Droid Serif", Times New Roman, serif; warna: # 565656; saiz fon: 1.8em; garis ketinggian: 1.4em; margin-bottom: 15px; padding-left: 35px;  kecil font-family: "Balthazar", serif; warna: # 656565; saiz fon: 1.6em; paparan: blok; margin-bottom: 6px;  ul display: block; gaya senarai: tiada;  ul li padding-left: 45px; jenis gaya senarai: tiada; menegak-align: atas; latar belakang: url ('https://assets.hongkiat.com/uploads/responsive-resume/bullet.png') 25px 5px no-repeat; margin-bottom: 5px; font-family: "Balthazar", serif; warna: # 666; saiz fon: 1.6em; garis ketinggian: 2.3em;  img border: 0; max-width: 100%;  a color: # 5582d6; teks-hiasan: tiada;  a: hover text-decoration: underline;  

Tidak ada yang menarik kecuali untuk beberapa susunan fon langganan. Saya juga merangkul ikon peluru yang unik dan bukannya menggunakan lalai “cakera”. Anda boleh cuba mencari melalui direktori seperti Icon Finder apabila cuba mencari reka bentuk yang serupa.

/ ** @ susun atur teras kumpulan ** / #w margin: 0px 50px; padding: 20px 40px; padding-top: 35px; latar belakang: #fff; min lebar: 260px; lebar maksimum: 900px; jejari bawah-kanan-jejari: 8px; sempadan bawah-kiri-jejari: 8px; -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-bottomleft: 8px; -moz-border-radius-bottomright: 8px;  header width: 100%;  / ** @ tetapan peribadi kumpulan ** / #info float: left; margin-bottom: 12px;  #photo float: right;  #photo img -webkit-border-radius: 3px; -moz-border-radius: 3px; jejari sempadan: 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); kotak-bayang: 0 2px 4px rgba (0, 0, 0, 0.2); warna latar belakang: #fff; sempadan: 1px padat #ccc; padding: 5px;  

Terdapat hanya beberapa kawasan blok penting di halaman yang memerlukan perhatian. Sudah tentu pembungkus div adalah setup dengan tambahan margin dan padding. Juga lebar maksimum dihadkan pada 900px kerana saiz yang lebih besar merasakan halamannya terlalu banyak ruang kosong. Saya juga menggunakan sudut bulat di bahagian bawah halaman untuk kesan yang lancar di mata.

Reka bentuk responsif

Mungkin aspek paling penting dalam resume dalam talian ini adalah fungsi responsif. Saya mempunyai lima persediaan breakpoints yang berbeza untuk mencapai pelbagai kesan apabila mengubah saiz tetingkap penyemak imbas.

@media skrin sahaja dan (max-width: 740px) h1 font-size: 4.5em;  h3 font-size: 2.2em;  h2 display: block; teks-align: center;  #info float: none; paparan: blok; teks-align: center;  #photo float: none; paparan: blok; teks-align: center;  #w padding: 20px 15px;  p padding: 0;  

Awalnya 740px adalah betul-betul di mana imej foto akan bertembung dengan teks header kami. Daripada membiarkan gambar jatuh ke sebelah kanan kita membersihkan kedua-dua elemen dan memusatkan susun atur keseluruhan. Saya juga telah meningkatkan saiz teks header untuk meninggalkan kesan yang lebih kukuh.

Oleh kerana tingkap menjadi lebih kecil saya telah mengeluarkan beberapa padding tambahan dari pembalut div dan perenggan. Masalah seterusnya yang kita jalankan selepas tajuk adalah dari senarai UL kemahiran. Saya memecahkan pendekatan dua lajur dan sebaliknya mempunyai senarai item yang terapung bersebelahan.

@media skrin sahaja dan (max-width: 570px) ul li display: block-inline; padding-left: 15px; lebar: 140px; kedudukan latar belakang: -5px 0px; margin-right: 6px; garis ketinggian: 1.7em;  # kemahiran-keahlian, kemahiran-kanan margin-bottom: 15px;  

Ini juga memerlukan reposisi banyak sifat teks lalai. Kami perlu mengemas kini ketinggian baris dan memaparkan semula setiap ikon peluru item senarai. Saya telah menetapkan lebar tetap supaya grid kelihatan lebih teratur sehingga titik putus seterusnya.

Pengekodan untuk Smartphone

Tiga pertanyaan media terakhir adalah kecil tetapi sangat penting. Apabila anda menukar antara landskap dan mod potret iPhone akan mengubah saiz pelayar mudah alih mana-mana. Ini juga berlaku dengan kebanyakan peranti Android dan telefon Windows Mobile.

@media skrin sahaja dan (max-width: 480px) ul li width: 120px;  #w margin: 0 20px;  @media only screen and (max-width: 320px) #w margin: 0 10px;  / ** Hanya iPhone / @media skrin dan (max-device-width: 480px) ul li width: 150px;  

Apabila pertama kali memukul 480px atau lebih kecil, kami mengeluarkan beberapa padding dari pembalut dan juga saiz semula item senarai lagi. Kemudian pada 320px saya telah mengeluarkan beberapa ruang margin di luar dokumen. Anda masih boleh melihat latar belakang bertekstur, tetapi ia tidak begitu penting pada viewport menegak yang menegak.

Akhir sekali saya gunakan max-device-width untuk menyasarkan peranti iPhone itu sendiri, atau mana-mana skrin mudah alih lain dengan lebar maksimum 480px. Dalam kes ini saya ingin mengemas kini item senarai sedikit lebih luas supaya mereka mengisi keseluruhan skrin. Ia hanya akan menjejaskan penyenaraian kemahiran dalam paparan landskap sejak potret terlalu kurus untuk melihat apa-apa perbezaan.

• Demo
• Muat turun Kod Sumber

Pemikiran Akhir

Bekerja di Internet seringkali memerlukan sekurang-kurangnya beberapa jenis portfolio dalam talian. Apabila anda boleh memaut ke satu halaman semula dengan semua butiran anda dianjurkan bersama, ia menunjukkan bahawa anda bermaksud perniagaan. Majikan yang serius dan pelanggan yang berpotensi akan jatuh ke kepala kerana kelihatan seperti profesionalisme dalam reka bentuk web.

Saya harap anda boleh mengambil beberapa perkara penting dari tutorial ini. Freelancers di mana-mana lokasi di seluruh dunia boleh memasarkan diri mereka dengan sedikit usaha teknikal. Jangan ragu untuk memuat turun kod sumber demo saya di atas, dan bagikan fikiran anda pada artikel ini di kawasan komen kami.