ເລີ່ມຕົ້ນໂຄງການເວັບໄຊຕ໌ໄວຂື້ນກັບ Sassaparilla

ກະວີ: Peter Berry
ວັນທີຂອງການສ້າງ: 12 ເດືອນກໍລະກົດ 2021
ວັນທີປັບປຸງ: 13 ເດືອນພຶດສະພາ 2024
Anonim
ເລີ່ມຕົ້ນໂຄງການເວັບໄຊຕ໌ໄວຂື້ນກັບ Sassaparilla - Creative
ເລີ່ມຕົ້ນໂຄງການເວັບໄຊຕ໌ໄວຂື້ນກັບ Sassaparilla - Creative

ເນື້ອຫາ

ຖ້າທ່ານມີຫຍັງຄືກັບພວກເຮົາ, ທ່ານຈະເຫັນດີ ນຳ ກັນວ່າການເລີ່ມກໍ່ສ້າງທາງ ໜ້າ ໃໝ່ ແມ່ນວຽກທີ່ຊ້ ຳ ແລ້ວ. ລະຫວ່າງການຕັ້ງຄ່າ HTML, JavaScript ແລະ CSS ຂອງທ່ານ (ລວມທັງການເພີ່ມແບບທົດລອງໃນການຕັ້ງຄ່າຂອງທ່ານ) ທ່ານອາດຈະໃຊ້ເວລາສ່ວນໃຫຍ່ຂອງສອງສາມຊົ່ວໂມງໃນຕົ້ນໆນີ້ໃນການເຮັດສິ່ງທີ່ທ່ານໄດ້ເຮັດມາກ່ອນຮ້ອຍເທື່ອແລ້ວ. ພວກເຮົາໄດ້ເຮັດ Sassaparilla ເພື່ອຊ່ວຍພວກເຮົາ (ແລະຫວັງວ່າທ່ານ) ຈາກການເຮັດສິ່ງນີ້.

ແນ່ນອນ, ມັນມີເຄື່ອງມືຫຼາຍຢູ່ທີ່ເຮັດສິ່ງນີ້ເຊັ່ນກັນ. ຈຸດປະສົງທີ່ດີເລີດຂອງ HTML5 Boilerplate ຫລືມູນນິທິ Zurb's ໄດ້ຖືກສ້າງຂື້ນໃນໃຈ. ເຖິງຢ່າງໃດກໍ່ຕາມ, ພວກເຮົາມັກຈະໃຊ້ເວລາພຽງເທົ່າໃດໃນການ ກຳ ຈັດອົງປະກອບຕ່າງໆຈາກເຕົາອົບເຫຼົ່ານີ້ຄືກັບວ່າພວກເຮົາ ກຳ ລັງເພີ່ມອົງປະກອບໃນແຕ່ລະໂຄງການ ໃໝ່

ວິທີແກ້ໄຂ? ສົມທົບພຽງແຕ່ອົງປະກອບທີ່ ຈຳ ເປັນ ສຳ ລັບການເລີ່ມຕົ້ນໂຄງການແລະເຮັດໃຫ້ພວກເຂົາມີຄວາມຄ່ອງແຄ້ວເທົ່າທີ່ຈະເປັນໄປໄດ້. ຜ່ານການທົດລອງແລະຄວາມຜິດພາດ, ແລະການປັບປຸງ ໃໝ່ ຫຼາຍ, ພວກເຮົາໄດ້ຕັດສິນໃຈກ່ຽວກັບເປົ້າ ໝາຍ ຕໍ່ໄປນີ້ ສຳ ລັບ Sassaparilla:

  1. ເຮັດໃຫ້ລະຫັດທີ່ສາມາດເຂົ້າເຖິງໄດ້ແລະສາມາດປັບຂະ ໜາດ ໄດ້ງ່າຍແລະໄວທີ່ສຸດໃນການຂຽນ
  2. ສຸມໃສ່ການພິມດີດແລະຈັງຫວະແນວຕັ້ງ, ແລະເຮັດໃຫ້ສິ່ງນີ້ງ່າຍຕໍ່ການຈັດຕັ້ງປະຕິບັດ
  3. ກະກຽມລະບົບທີ່ສາມາດປັບຕົວເຂົ້າກັບການປ່ຽນແປງໄດ້ງ່າຍເມື່ອເຮັດວຽກໂຄງການ
  4. ປະກອບມີພຽງແຕ່ສິ່ງທີ່ພວກເຮົາຕ້ອງການແລະ ນຳ ໃຊ້ອົງປະກອບ ໜ້ອຍ ເທົ່າທີ່ຈະເປັນໄປໄດ້

ແລະດັ່ງນັ້ນ, Sassaparilla ເກີດ. ມັນບໍ່ແມ່ນເຕົາອົບ, ມັນແມ່ນຈຸດເລີ່ມຕົ້ນຂອງໂຄງການຂອງທ່ານ.


  • ດາວໂຫລດເອກະສານແຫຼ່ງຂໍ້ມູນ ສຳ ລັບບົດແນະ ນຳ ນີ້

ການຕິດຕັ້ງ

ໃນຖານະເປັນຊື່ຂອງມັນອາດຈະແນະນໍາ, Sassaparilla ອີງໃສ່ໂປແກຼມ preprocesser Sass ແລະ Compass ທີ່ດີທີ່ສຸດຂອງມັນເພື່ອຮັກສາສິ່ງທີ່ປ່ຽນແປງໄດ້. ທ່ານ ຈຳ ເປັນຕ້ອງຕິດຕັ້ງ Compass ເພື່ອຈະໃຊ້ Sassaparilla ໃນໂຄງການຂອງທ່ານ.

ນີ້ແມ່ນກົງໄປກົງມາຖ້າທ່ານຢູ່ໃນເຄື່ອງ Mac:

  1. ພຽງແຕ່ເປີດຢູ່ປາຍຍອດ
  2. ປະເພດການປັບປຸງແກ້ວປະເສີດ - ລະບົບເພື່ອປັບປຸງສະພາບແວດລ້ອມ Ruby ຂອງທ່ານ
  3. ປະເພດຕິດຕັ້ງເຂັມທິດເພື່ອຕິດຕັ້ງ Compass ລຸ້ນລ້າສຸດ

ລາຍລະອຽດການຕິດຕັ້ງເຕັມແມ່ນຢູ່ໃນເວັບໄຊທ໌ Compass.

ລຸກຂຶ້ນແລະແລ່ນ

ການເອົາ Sassaparilla ຂຶ້ນແລະແລ່ນແມ່ນງ່າຍແທ້ໆ. ທ່ານສາມາດໃຊ້ GUI ເຊັ່ນ Codekit ແຕ່ພວກເຮົາຈະຄາດເດົາວ່າ ຄຳ ແນະ ນຳ ນີ້ວ່າທ່ານຢູ່ໃນ Mac, ທ່ານ ກຳ ລັງຈະໃຊ້ປາຍທາງແລະທ່ານໄດ້ດາວໂຫລດ Sassaparilla ຈາກເວບໄຊທ໌, ແທນທີ່ຈະກ່ວາມັນຖືກຂັງຈາກ GitHub.


  1. ສ້າງໂຟນເດີ ໃໝ່ ທີ່ເອີ້ນວ່າ Demo
  2. ສຳ ເນົາໄຟລ໌ຈາກ Sassaparilla ລົງໃນ Demo
  3. ເປີດ ໜ້າ ຕ່າງ ໃໝ່ ຢູ່ປາຍທາງ
  4. ພິມ cd ແລະຈາກນັ້ນລາກລາກ Demo ລົງໃນ ໜ້າ ຕ່າງ terminal ແລະກົດກັບຄືນ. ດຽວນີ້ທ່ານໄດ້ປ່ຽນໄດເລກະທໍລີເຂົ້າໃນໂຟນເດີນັ້ນ
  5. ຕອນນີ້ພິມໂມງເຂັມທິດແລ້ວກົດກັບຄືນ
  6. ທ່ານຄວນຈະເຫັນຂໍ້ຄວາມ 'ເຂັມທິດ ກຳ ລັງ ສຳ ຫຼວດການປ່ຽນແປງ'. ນີ້ ໝາຍ ຄວາມວ່າ, ແຕ່ລະຄັ້ງທີ່ທ່ານບັນທຶກເອກະສານ SCSS, ມັນຈະປັບປຸງ CSS ຂອງທ່ານ
  7. ນັ້ນແມ່ນມັນ

ເບິ່ງທີ່ config.rb

ເອກະສານ config ມີບັນດາເສັ້ນທາງໄປສູ່ຊັບສິນຂອງທ່ານ. ໃນກໍລະນີຂອງ Sassaparilla ພວກເຮົາເກັບຮັກສາເອກະສານ config ທີ່ຢູ່ຮາກຂອງໂຄງການແລະຫຼັງຈາກນັ້ນເກັບ CSS, JavaScript, ຮູບພາບຕ່າງໆຂອງພວກເຮົາໄວ້ໃນໂຟນເດີຊັບສິນ, ເຊິ່ງແຕ່ລະອົງປະກອບມີໂຟເດີຍ່ອຍ. ນີ້ເຮັດໃຫ້ທຸກສິ່ງທຸກຢ່າງງາມແລະສະອາດ.

ເຖິງຢ່າງໃດກໍ່ຕາມ, ທ່ານສາມາດປ່ຽນເສັ້ນທາງໄປສູ່ຊັບສິນຂອງທ່ານຢູ່ໃນເອກະສານ config ຖ້າທ່ານຕ້ອງການເຮັດວຽກກັບການຕັ້ງຄ່າທີ່ແຕກຕ່າງກັນ. ທ່ານອາດຈະຕ້ອງຢຸດແລະ ດຳ ເນີນງານ ຄຳ ສັ່ງເບິ່ງເຂັມທິດອີກຄັ້ງເພື່ອເບິ່ງການປ່ຽນແປງ.

Sassaparilla ປະຕິບັດຕາມ CSS cascade ສະເພາະ, ແລະເຮັດໃຫ້ການນໍາໃຊ້ເອກະສານ SCSS ຫຼາຍ, ແຕ່ລະຄົນເຮັດຫນ້າທີ່ຈຸດປະສົງທີ່ແຕກຕ່າງກັນ. ນີ້ອະນຸຍາດໃຫ້ທ່ານປະກອບ (ຫຼືບໍ່ລວມເອົາ) ສ່ວນທີ່ແຕກຕ່າງກັນ, ຂື້ນກັບສິ່ງທີ່ທ່ານຕ້ອງການ.


ການຕັ້ງຄ່າ CSS

ທຸກໆເອກະສານ SCSS ສຳ ລັບເວັບໄຊທ໌ Demo ແມ່ນອາໄສຢູ່ໃນຊັບສິນ / CSS folder. ນີ້ແມ່ນບ່ອນທີ່ CSS ທັງ ໝົດ ລວບລວມເຊັ່ນກັນ. ໃນກໍລະນີຂອງພວກເຮົາ, ເຖິງເອກະສານ CSS ໜຶ່ງ ຊື່ວ່າ screen.css.

ເອກະສານນີ້ປະກອບມີຫຼາຍຮູບແບບຂອງທ່ານ, ພ້ອມທັງດຶງຄໍເຕົ້າໄຂ່ສ່ວນອື່ນໆເຂົ້າກັນເປັນເອກະສານ CSS ດຽວ. ແລະໃຫຍ່, ທ່ານຈະໄດ້ເຮັດວຽກສ່ວນໃຫຍ່ຂອງທ່ານພາຍໃນແບບແຜນນີ້ເມື່ອທ່ານຂຽນການຕັ້ງຄ່າທົ່ວໂລກຂອງທ່ານ.

ໃນຖານະເປັນຄ່າເລີ່ມຕົ້ນ, ມັນປະກອບມີບາງຮູບແບບເລີ່ມຕົ້ນ ສຳ ລັບສ່ວນປະກອບຂອງຫົວຂໍ້, ການເຊື່ອມຕໍ່ແລະການສອບຖາມສື່. ສິ່ງເຫຼົ່ານີ້ສ່ວນໃຫຍ່ແມ່ນຢູ່ໃນຕົວຢ່າງຂອງວິທີການໃຊ້ບາງ ຄຳ ສັບທີ່ພວກເຮົາຈະ ນຳ ມາຂຽນໃນພາຍຫຼັງ. ທ່ານສາມາດເອົາສິ່ງເຫລົ່ານີ້ອອກຖ້າທ່ານມັກ.

ໂຟນເດີ libs

ທ່ານຍັງຈະສັງເກດເຫັນໂຟເດີຍ່ອຍທີ່ເອີ້ນວ່າ libs. ນີ້ແມ່ນບ່ອນທີ່ຫ້າເອກະສານ SCSS ຕໍ່ໄປນີ້ອາໄສຢູ່. ທ່ານສັງເກດເຫັນວ່າພວກເຂົາທັງ ໝົດ ເລີ່ມຕົ້ນດ້ວຍຂີດກ້ອງ. ນີ້ ໝາຍ ຄວາມວ່າ, ເມື່ອພວກເຮົາບອກ Compass ລວບລວມໂຄງການຂອງພວກເຮົາ, ເອກະສານເຫຼົ່ານີ້ຈະບໍ່ລວບລວມເອກະສານ CSS ຂອງພວກເຂົາເອງ. ສະນັ້ນ, ໄຟລ໌ທີ່ ນຳ ໜ້າ ດ້ວຍຂີດກ້ອງປະກອບມີ:

  • _reset.scss ເອກະສານນີ້ມີການຕັ້ງຄ່າງ່າຍໆ ສຳ ລັບອົງປະກອບ HTML. ມັນສົມມຸດວ່າ ໜ້າ ເວັບຂອງທ່ານຈະມີຮູບແບບ, ສະນັ້ນໃຫ້ຕັ້ງຄ່າ ໃໝ່ ເຫຼົ່ານີ້ເຊັ່ນກັນ. ຖ້າເວັບໄຊທ໌້ຂອງທ່ານບໍ່ໃຊ້ແບບຟອມ, ທ່ານສາມາດ ກຳ ຈັດການຕັ້ງຄ່າ ໃໝ່ ເຫລົ່ານີ້ໄດ້.
  • settings.scss ເອກະສານນີ້ມີຕົວແປທັງ ໝົດ ສຳ ລັບເວັບໄຊທ໌້. ສິ່ງຕ່າງໆເຊັ່ນສີສັນແລະການປັບຂະ ໜາດ ຕົວອັກສອນແມ່ນມີຊີວິດຢູ່ນີ້. ເອກະສານນີ້ແມ່ນເພື່ອ ກຳ ນົດການຕັ້ງຄ່າຫຼັກຂອງທ່ານແລະໃຊ້ມາດຕະຖານແລະຂະ ໜາດ ຂອງຕົວ ໜັງ ສື Compass. ເພີ່ມເຕີມກ່ຽວກັບວ່າຕໍ່ມາ.
  • mixins.scss ຜະສົມຜະສານແມ່ນຜະສົມຜະສານທີ່ໃຊ້ໂດຍຜູ້ໃຊ້ ສຳ ລັບໂຄງການ (Compass ມີຫຼາຍຕົວຢ່າງທີ່ໄດ້ ກຳ ນົດໄວ້ກ່ອນແລ້ວ, ນັ້ນແມ່ນຄຸ້ມຄ່າທີ່ຈະກວດສອບ). ໃນຖານະເປັນຄ່າເລີ່ມຕົ້ນ, ພວກເຮົາໄດ້ລວມເອົາແບບງ່າຍໆບາງຢ່າງເພື່ອໃຫ້ທ່ານເລີ່ມຕົ້ນ. ຕື່ມອີກຕາມຄວາມຕ້ອງການ.
  • typography.scss ເອກະສານນີ້ມີການຈັດປະເພດຫຼັກ ສຳ ລັບເວັບໄຊທ໌້. ມັນຂື້ນກັບການຕັ້ງຄ່າຕົວປ່ຽນແປງໃນເອກະສານ settings.scss, ເຊິ່ງພວກເຮົາຈະປົກປິດຕໍ່ໄປ. ອີກເທື່ອ ໜຶ່ງ, ເອກະສານນີ້ໂດຍຄ່າເລີ່ມຕົ້ນມີຕົວຢ່າງບາງຕົວຢ່າງເພື່ອໃຫ້ທ່ານເລີ່ມຕົ້ນ.
  • forms.scss ເອກະສານນີ້ປະກອບມີອົງປະກອບຮູບແບບເລີ່ມຕົ້ນແລະຄໍເຕົ້າໄຂ່ທີ່ມາດຕະຖານ. ຖ້າທ່ານບໍ່ໃຊ້ແບບຟອມ, ຫຼືທ່ານມັກເອົາແບບຕົວທ່ານເອງ, ທ່ານສາມາດເອົາເອກະສານນີ້ອອກໄດ້ຢ່າງປອດໄພ.

ຈັງຫວະທີ່ດີກວ່າແລະການນໍາພາ

Sassaparilla ພະຍາຍາມເຮັດໃຫ້ການ ນຳ ແລະສະຖານທີ່ງ່າຍເທົ່າທີ່ຈະໄວໄດ້ໃນຂະນະທີ່ຂຽນລະຫັດທີ່ສາມາດເຂົ້າເຖິງໄດ້. ພວກເຮົາບໍ່ສົນໃຈກ່ຽວກັບເລກຄະນິດສາດທີ່ຫຼອກລວງ, ແຕ່ມັກເຮັດວຽກໃນ ems. ໂຊກດີ, Compass ສາມາດຈັດການກັບສິ່ງນີ້ໂດຍໃຊ້ ຄຳ ສັ່ງແລະກົນລະຍຸດທີ່ສະຫຼາດແລະມີ ຄຳ ສັ່ງ ຈຳ ນວນ ໜຶ່ງ.

ນີ້ແມ່ນວິທີທີ່ພວກເຮົາໄປກ່ຽວກັບມັນ:

ຂັ້ນຕອນທີ 1

ໃນ settings.scss ຕັ້ງຄ່າຂະ ໜາດ base-font ຂອງທ່ານ: ໂດຍຄ່າເລີ່ມຕົ້ນມັນຖືກ ກຳ ນົດເຖິງ 16px ແລະໂດຍທົ່ວໄປ, ສິ່ງນີ້ເຮັດວຽກໄດ້ດີໃນການຄິດໄລ່ຂອງທ່ານສະນັ້ນທ່ານບໍ່ ຈຳ ເປັນຕ້ອງປ່ຽນນີ້ (ທ່ານສາມາດຖ້າທ່ານຕ້ອງການ)

ຕັ້ງພື້ນຖານເສັ້ນສູງຂອງທ່ານ: ເພື່ອປ້ອງກັນຊ່ອງຫວ່າງທີ່ບໍ່ ເໝາະ ສົມແລະຊ່ອງຫວ່າງລະຫວ່າງແຖວ, ພວກເຮົາມັກໃຊ້ມາດຕະການທີ່ນ້ອຍກວ່າ, ຄືກັບທີ່ທ່ານອາດຈະເຮັດໃນການອອກແບບການພິມ. ບາງສິ່ງບາງຢ່າງເຊັ່ນ 6px ເຮັດວຽກໄດ້ດີ. ມັນຄຸ້ມຄ່າທີ່ຈະຫຼີ້ນກັບມູນຄ່ານີ້, ຂື້ນກັບຕົວອັກສອນທີ່ທ່ານ ກຳ ລັງໃຊ້. ຕໍ່ມາ, ທ່ານຈະ ນຳ ໃຊ້ຖານຂໍ້ມູນນີ້ຫລາຍໆຕົວເພື່ອສ້າງສະຖານທີ່ ນຳ ແລະຈຸດກວ້າງຂອງທ່ານ.

ຂັ້ນຕອນທີ 2

ໃນ typography.scss, ຕັ້ງຄ່າ typography ໃນຕອນຕົ້ນຂອງທ່ານ. ວິທີທີ່ທ່ານ ນຳ ໃຊ້ຮູບແບບຂອງທ່ານຂື້ນກັບທ່ານ, ແຕ່ຕົວຢ່າງນີ້, ພວກເຮົາ ກຳ ລັງໃຊ້ການຕັ້ງຄ່າທົ່ວໂລກ (ສຳ ລັບ H1, P, UL ແລະອື່ນໆ).

ເພື່ອຮັກສາຈັງຫວະແນວຕັ້ງທີ່ສວຍງາມ, ທຸກຄັ້ງທີ່ທ່ານຕັ້ງຂະ ໜາດ ໂຕອັກສອນ, ທ່ານຈະຕ້ອງໃຊ້ ຄຳ ສັ່ງປັບຂະ ໜາດ ຕົວ ໜັງ ສືໄປຫາ. ນີ້ພຽງແຕ່ບອກອົງປະກອບໃຫ້ກາຍເປັນຂະ ໜາດ ນີ້ເປັນ pixels ແລະຫຼັງຈາກນັ້ນປ່ຽນເປັນ ems, ທຽບກັບຂະ ໜາດ ຕົວອັກສອນ base ທີ່ພວກເຮົາຕັ້ງຢູ່ໃນຂັ້ນຕອນ ໜຶ່ງ. ຄຸນຄ່ານີ້ (ຕົວຢ່າງ: 26px) ຍັງກາຍເປັນ ໜ່ວຍ ພື້ນຖານຂອງທ່ານເພື່ອເຮັດວຽກຫຼາຍຊ່ອງວ່າງທີ່ທ່ານຕ້ອງການຢູ່ຂ້າງເທິງແລະຕໍ່າກວ່າອົງປະກອບດັ່ງກ່າວ.

ຍົກ​ຕົວ​ຢ່າງ:

@include adjust-font-size-to (26px);

ປັບຂະ ໜາດ ໂຕອັກສອນໃຫ້ 26px ແລະກັບຄືນ em ທຽບເທົ່າ.

ຂອບ: 0 0 ຈັງຫວະ (2, 26px) 0;

ຕື່ມສອງເສັ້ນຂອງຖານເສັ້ນ - ຄວາມສູງຂອງພວກເຮົາ (6x2 = 12px) ຢູ່ຂ້າງລຸ່ມຂອງສ່ວນປະກອບ, ວາງສອງແຖວນັ້ນໃສ່ຂະ ໜາດ ໂຕອັກສອນຂອງພວກເຮົາແລະຂອບເຂດປົກຄຸມໃຫ້ເທົ່າກັບ ems.

ເພາະສະນັ້ນ:

@include adjust-font-size-to (26px); ຂອບ: 0 0 ຈັງຫວະ (2, 26px) 0;

ໃຫ້ພວກເຮົາ:

font-size: 1.625em; line-height: 1.15385em; ຂອບ: 0 0 0.66154em 0;

ສະຖານທີ່ຕັນແລະອົງປະກອບອື່ນໆ

ເພື່ອຮັກສາຈັງຫວະແນວຕັ້ງທີ່ສອດຄ່ອງ, ທ່ານກໍ່ຕ້ອງຈັດວາງສ່ວນປະກອບອື່ນໆທີ່ຕັ້ງຢູ່ໃນ ໜ້າ (ສ່ວນອື່ນໆ) ເຊັ່ນກັນ. ໃນຖານະເປັນໂຊກຈະມີມັນ, ຜູ້ນໍາ Compass ແລະຫນ້າທີ່ trailer ໄດ້ຖືກສ້າງຂຶ້ນພຽງແຕ່ສໍາລັບໂອກາດນີ້.

ທ່ານໃຊ້ພວກມັນດັ່ງນັ້ນ:

@include padding-leader (x);

ເພີ່ມ x ຂອງແຜ່ນຮອງໂດຍອີງໃສ່ພື້ນຖານເສັ້ນ - ຄວາມສູງ ເໜືອ ຂອງອົງປະກອບ.

@include padding-trailer (x);

ເພີ່ມ x ຂອງແຜ່ນຮອງໂດຍອີງໃສ່ພື້ນຖານເສັ້ນ - ຄວາມສູງຕ່ ຳ ກວ່າອົງປະກອບ.

@include ຜູ້ ນຳ (x);

ເພີ່ມເສັ້ນ x ຂອງຂອບໂດຍອີງໃສ່ເສັ້ນ - ເສັ້ນຄວາມສູງ ເໜືອ ອົງປະກອບ.

@include trailer (x);

ເພີ່ມເສັ້ນ x ຂອງຂອບໂດຍອີງໃສ່ເສັ້ນ - ເສັ້ນຄວາມສູງດ້ານລຸ່ມຂອງອົງປະກອບ.

ເຄັດລັບສຸດທ້າຍ ໜຶ່ງ

ເວົ້າວ່າ, ຕົວຢ່າງ, ທ່ານຕ້ອງການເພີ່ມມູນຄ່າພິກະເຊນໃຫ້ກັບການສອບຖາມກ່ຽວກັບສື່, ແຕ່ທ່ານຕ້ອງການໃຫ້ມູນຄ່ານັ້ນປ່ຽນເປັນຄ່າ em ທີ່ກ່ຽວຂ້ອງ ສຳ ລັບພື້ນຖານເສັ້ນຫຼືຄວາມສູງຂອງພື້ນຖານ. ນັ້ນອາດຈະ ໝາຍ ເຖິງການຄິດໄລ່ບໍ່ຫຼາຍປານໃດ. Sassaparilla ປະກອບມີສອງ ໜ້າ ທີ່ເພື່ອຊ່ວຍໃນເລື່ອງນີ້.

ສິ່ງເຫຼົ່ານີ້ມີປະໂຫຍດ ສຳ ລັບສິ່ງຕ່າງໆເຊັ່ນວ່າການສະແດງຕົວອັກສອນເຊັ່ນດຽວກັນກັບການເຮັດໃຫ້ສື່ຂໍ້ມູນ - ຄຳ ຖາມແຍກເປັນຄ່າຕ່າງໆ, ແທນທີ່ຈະເປັນພິກະເຊນ. ທ່ານສາມາດໃຊ້ syntax ຕໍ່ໄປນີ້:

em-font (#px)

ປ່ຽນມູນຄ່າ (#) ເປັນພິກະເຊນອີງຕາມຂະ ໜາດ ຕົວອັກສອນພື້ນຖານ.

em-base (#px)

ປ່ຽນມູນຄ່າ (#) ເປັນພິກະເຊນໂດຍອີງໃສ່ພື້ນຖານເສັ້ນ - ຄວາມສູງ.

ຄຳ ສຸດທ້າຍ

ດັ່ງນັ້ນທ່ານມີມັນ. ພວກເຮົາຫວັງວ່າທ່ານຈະເຫັນ Sassaparilla ມີປະໂຫຍດໃນໂຄງການຂອງທ່ານ, ແລະພວກເຮົາຍິນດີທີ່ຈະໄດ້ຍິນຈາກທ່ານຫຼືຖ້າທ່ານມີ ຄຳ ຖາມ. ສຸດທ້າຍ, ຖ້າທ່ານຮູ້ສຶກຢາກປະກອບສ່ວນ, ພວກເຮົາຍິນດີຮັບຟັງຈາກທ່ານ.

ຄຳ ເວົ້າ: Peter Coles ແລະ Adam Robertson

ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!

  • ສ້າງກະດານອາລົມທີ່ສົມບູນແບບດ້ວຍ ຄຳ ແນະ ນຳ ເຫຼົ່ານີ້
  • ການເລືອກໂປຼແກຼມ Wordpress Brilliant
  • ເລືອກຜູ້ສ້າງເວບໄຊທ໌ທີ່ດີທີ່ສຸດ

ມີ​ຄໍາ​ຖາມ​ບໍ່? ຖາມໃນ ຄຳ ເຫັນ!

ໃຫ້ແນ່ໃຈວ່າໄດ້ອ່ານ
ສ້າງແສງສະຫວ່າງດ້ວຍໂລໂກ້ໂປ່ງໃສ
ອ່ານ​ຕື່ມ

ສ້າງແສງສະຫວ່າງດ້ວຍໂລໂກ້ໂປ່ງໃສ

ກະດານຄວາມໂປ່ງໃສຂອງ Illu trator ແມ່ນເຕັມໄປດ້ວຍຕົວເລືອກຕ່າງໆ ສຳ ລັບການເພີ່ມຄວາມເລິກແລະຄວາມຄ່ອງແຄ້ວເຂົ້າໃນວຽກຂອງທ່ານ.ໃນ ຄຳ ແນະ ນຳ ນີ້, ຂ້ອຍຈະແນະ ນຳ ວິທີທີ່ຈະໃຊ້ປະໂຫຍດຈາກຮູບແບບການຜະສົມຜະສານແລະການຕັ້ງຄ່າທີ...
37signals ເພື່ອຢຸດການພັດທະນາ ສຳ ລັບ IE8
ອ່ານ​ຕື່ມ

37signals ເພື່ອຢຸດການພັດທະນາ ສຳ ລັບ IE8

ໃນທ້າຍປີນີ້, ຕົວເລກອຸດສາຫະ ກຳ ທີ່ໂດດເດັ່ນໄດ້ຊຸກຍູ້ນັກພັດທະນາໃຫ້ເຊົາເຮັດວຽກຢ່າງ ໜັກ ເພື່ອສະ ໜັບ ສະ ໜູນ ໂປຣແກຣມທ່ອງເວັບເກົ່າ. Aral Balkan ໄດ້ເປີດເຜີຍໂປແກຼມສະບັບ ໜຶ່ງ ຂອງລາວ, ແລະ Peter-Paul Koch ກ່າວວ່າພ...
ເລື່ອນຫຼາຍທິດທາງເພີ່ມຈຸດດີເຂົ້າໃນເວັບໄຊທ໌ portfolio
ອ່ານ​ຕື່ມ

ເລື່ອນຫຼາຍທິດທາງເພີ່ມຈຸດດີເຂົ້າໃນເວັບໄຊທ໌ portfolio

ຫຼັກຊັບອອນໄລນ໌ແມ່ນວິທີທີ່ດີທີ່ສຸດເພື່ອສະແດງຜົນງານການສ້າງສັນຂອງທ່ານ - ໂດຍສະເພາະຖ້າວຽກຂອງທ່ານຕົ້ນຕໍແມ່ນອີງໃສ່ດິຈິຕອນ. ນັກອອກແບບດິຈິຕອລ Ian Jame Cox ໄດ້ສ້າງເວບໄຊທ໌ທີ່ຫຸ້ມຫໍ່ຂອບເຂດການລົງທືນຍ້ອນການເລື່ອນພາ...