Tahun Baru, pekerjaan baru? Let ' s membuat resume berkuasa grid!

Banyak reka bentuk resume yang popular membuat sebahagian besar ruang halaman yang tersedia dengan meletakkan bahagian dalam bentuk grid. Mari kita gunakan grid CSS untuk membuat susun atur yang kelihatan hebat apabila dicetak dan pada saiz skrin yang berbeza. Dengan cara itu, kita boleh menggunakan resume dalam talian dan luar talian, yang mungkin berguna pada tahun baru!

Pertama, kami akan membuat bekas resume, dan bahagian resume kami.

 <sountic>
  <section> 
  <section> 
  <section> 
  <section> 
  <section> 
  <section> 
  <section> 
</section></section></section></section></section></section></section></sountic>

Untuk mula menggunakan grid, kami menambah paparan: grid ke elemen resume luar kami. Seterusnya, kami menerangkan bagaimana keadaan harus diletakkan di atas grid. Dalam kes ini, kami akan menentukan dua lajur dan empat baris.

Kami menggunakan unit FR grid CSS untuk menentukan berapa banyak pecahan di ruang yang tersedia untuk diberikan. Kami akan memberikan baris yang sama ruang (1fr setiap), dan membuat lajur pertama dua kali lebih luas daripada yang kedua (2fr).

 .Resume {
  paparan: grid;
  Grid-template-lajur: 2FR 1FR;
  Grid-template-baris: 1FR 1FR 1FR 1FR;
}

Seterusnya kami akan menerangkan bagaimana unsur-unsur ini harus diletakkan di atas grid dengan menggunakan harta tanah grid-templat. Mula-mula kita perlu menentukan kawasan grid yang dinamakan untuk setiap bahagian kami. Anda boleh menggunakan sebarang nama tetapi di sini kami akan menggunakan nama yang sama dengan bahagian kami:

 .name {
  Grid-Area: Nama;
}

.photo {
  Grid-Area: Foto;
}

/ * Tentukan kawasan grid untuk setiap bahagian */

Sekarang datang bahagian yang menyeronokkan, dan satu yang menjadikan perubahan reka bentuk angin. Letakkan kawasan grid di harta tanah grid-template bagaimana anda mahu mereka dibentangkan. Sebagai contoh, di sini kami akan menambah bahagian nama di sebelah kiri atas kawasan grid-template untuk meletakkan nama kami di sebelah kiri atas resume. Bahagian kerja kami mempunyai banyak kandungan sehingga kami menambahkannya dua kali, yang bermaksud bahawa ia akan meregangkan dua sel grid.

 .Resume {
  grid-template-kawasan:
    "Nama foto"
    "Bekerja Mengenai"
    "Pendidikan kerja"
    "Kemahiran Komuniti";
}

Inilah yang kita ada setakat ini:

Spesifikasi grid CSS menyediakan banyak sifat berguna untuk saiz dan meletakkan perkara di grid dan juga beberapa sifat tersendiri. Kami menjaga perkara yang mudah dalam contoh ini dengan menunjukkan satu kaedah yang mungkin. Pastikan anda menyemak beberapa sumber yang hebat di luar sana untuk mengetahui cara terbaik untuk memasukkan grid CSS dalam projek anda.

Menyesuaikan susun atur

GRID-Template-areas menjadikannya sangat mudah untuk menukar susun atur anda. Sebagai contoh, jika anda fikir majikan akan lebih berminat dalam bahagian kemahiran anda daripada pendidikan anda, anda boleh menukar nama-nama di kawasan grid-templat dan mereka akan menukar tempat dalam susun atur anda, tanpa perubahan lain yang diperlukan.

 .Resume {
  grid-template-kawasan:
    "Nama foto"
    "Bekerja Mengenai"
    "Kemahiran kerja" / * kemahiran kini bergerak di atas pendidikan * /
    "Pendidikan Masyarakat";
} 

Kita boleh mencapai reka bentuk resume yang popular di mana lajur nipis di sebelah kiri dengan perubahan CSS yang minimum. Itulah salah satu perkara yang baik tentang grid: kita boleh menyusun semula kawasan grid yang dinamakan untuk mengalihkan perkara -perkara di sekitar sambil meninggalkan perintah sumber tepat di mana ia berada!

 .Resume {
  Grid-template-lajur: 1FR 2FR;
  grid-template-kawasan:
    "Pendidikan Foto"
    "kerja nama"
    "mengenai kerja"
    "Komuniti Kemahiran";
} 

Membahagikan lajur

Mungkin anda mahu menambah rujukan peribadi kepada campuran. Kami boleh menambah lajur ketiga ke templat grid dan slip mereka ke baris bawah. Perhatikan bahawa kita juga perlu menukar unit lajur ke pecahan yang sama kemudian mengemas kini kawasan templat supaya unsur -unsur tertentu merangkumi dua lajur untuk memastikan susun atur kami di tempat.

 .Resume {
  Grid-template-lajur: 1FR 1FR 1FR;
  grid-template-kawasan:
    "Nama Nama Foto"
    "Kerja bekerja tentang"
    "Pendidikan kerja kerja"
    "Kemahiran Rujukan Komuniti";
} 

Jurang antara bahagian boleh dikawal dengan harta grid-jurang.

Menjadikannya responsif

Untuk skrin kecil, seperti peranti mudah alih, kita boleh memaparkan bahagian resume dalam satu lajur lebar penuh.

 Grid-template-lajur: 1FR;
grid-template-kawasan:
  "Foto"
  "Nama"
  "Mengenai"
  "Kerja"
  "Pendidikan"
  "Kemahiran"
  "Komuniti"
  "Rujukan"
}

Kemudian kita boleh menggunakan pertanyaan media untuk menukar susun atur untuk skrin yang lebih luas.

 @media (min-lebar: 1200px) {
  .Resume {
    grid-template-kawasan:
      "Nama foto"
      "Bekerja Mengenai"
      "Pendidikan kerja"
      "Kemahiran Komuniti";
  }
}

Titik putus tambahan boleh ditambah di antara. Sebagai contoh, pada skrin sederhana seperti tablet, kita mungkin mahu segala-galanya dalam satu lajur, tetapi bahagian peribadi dan imej untuk duduk bersebelahan di bahagian atas.

 @media (min-lebar: 900px) {
  .Resume {
      Grid-template-lajur: 2FR 1FR;
      grid-template-kawasan:
        "Nama foto"
        "kira -kira"
        "Kerja kerja"
        "Pendidikan Pendidikan"
        "Kemahiran Kemahiran"
        "Komuniti Komuniti"
        "Rujukan Rujukan"
  }
}

Merancang percetakan satu halaman

Sekiranya anda mahu resume anda mencetak dengan baik ke sekeping kertas fizikal, terdapat beberapa perkara yang perlu diingat. Cabaran yang paling sukar sering mengurangkan jumlah perkataan supaya ia sesuai dengan satu halaman.

Elakkan mengurangkan saiz fon untuk memerah lebih banyak maklumat, kerana ia mungkin menjadi sukar dibaca. Satu helah adalah untuk menambah kekangan saiz sementara ke elemen resume anda hanya semasa anda sedang berkembang.

 .Resume {
  / * untuk pembangunan sahaja */
  lebar: 210mm;
  Ketinggian: 297mm;
  Sempadan: 1px pepejal hitam;
}

Dengan membuat sempadan berukuran kertas A4 ini akan menjadi lebih jelas untuk melihat sama ada saiznya terlalu kecil, atau kandungan tumpahan keluar dari sempadan, menunjukkan ia akan mencetak ke halaman kedua.

Anda boleh menyediakan cetakan CSS untuk menyembunyikan perkara, seperti tarikh dan nombor halaman, yang penyemak imbas boleh dimasukkan.

 @media cetak {
  / * Keluarkan sebarang gaya skrin sahaja, contohnya pautan garis bawah */
}

@page {
  Padding: 0;
  Margin: 0cm;
  Saiz: Potret A4;
}

Satu perkara yang perlu diperhatikan ialah pelayar yang berbeza boleh menyebabkan resume anda dengan fon yang berbeza yang boleh berubah sedikit. Jika anda mahukan resume bercetak yang sangat tepat, pilihan lain adalah untuk menyimpannya sebagai PDF dan memberikan pautan muat turun di laman web anda.

Sokongan penyemak imbas

CSS Grid mempunyai sokongan yang baik dalam pelayar moden.

Internet Explorer (IE) menyokong versi lama spesifikasi grid CSS menggunakan awalan. Contohnya grid-templat-lajur ditulis sebagai -ms-grid-lajur. Menjalankan kod melalui autoprefixer boleh membantu dengan menambah awalan ini, tetapi perubahan manual dan ujian menyeluruh akan diperlukan kerana dalam spesifikasi lama beberapa sifat berkelakuan berbeza dan ada yang tidak wujud. Perlu diperiksa artikel Daniel Tonon tentang bagaimana AutoPrefixer dapat dikonfigurasi untuk membuat sesuatu berfungsi seperti mungkin.

Pendekatan alternatif kepada AutoPrefixer adalah untuk memberikan sandaran, contohnya dengan menggunakan susun atur terapung. Pelayar yang tidak mengenali sifat grid CSS akan dipaparkan menggunakan sandaran ini. Tidak kira sama ada anda perlu menyokong IE, sandaran adalah wajar untuk memastikan pelayar (berpotensi tidak diketahui) yang tidak menyokong grid CSS masih memaparkan kandungan anda.

Walaupun anda tidak bersedia untuk menjadi tuan rumah resume dalam talian, ia masih menyeronokkan untuk bermain -main dengan grid CSS, meneroka susun atur yang berbeza, menghasilkan PDF yang hebat, dan belajar bahagian hebat CSS pada masa yang sama.

Selamat Memburu Kerja!

Atas ialah kandungan terperinci Tahun Baru, pekerjaan baru? Let ' s membuat resume berkuasa grid!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!