ຄຳເຕືອນ: ໂຫລດໂຫດ
ເຫັນຄົນເຂົ້າໄປ >>>ໄດນີ້<<< ແລ້ວບອກວ່າ ງົງ ບໍ່ເຂົ້າໃຈ ຢາກໃຫ້ມີເປັນຮູບພ້ອມຄຳອະທິບາຍ ຊ່ວງນີ້ພໍມີເວລາຫວ່າງ ກະເລີຍຂຽນມາໃຫ້ອ່ານກັນ
ຈະຂຽນອະທິບາຍຕັ້ງແຕ່ຂັ້ນພື້ນຖານ ເພື່ອຄວາມເຂົ້າໃຈ
ຂໍບອກໄວ້ກ່ອນວ່າມີ່ກະບໍ່ໄດ້ເກັ່ງ ແລະທີ່ຂຽນມານີ້ ແມ່ນຮຽບຮຽງຈາກຄວາມເຂົ້າໃຈເປັນສ່ວນໃຫຍ່ ດັ່ງນັ້ນຈຶ່ງອາດມີຄວາມຜິດພາດ ກໍ່ຊ່ວຍກັນທັກທ້ວງມາໄດ້ ຈະໄດ້ນຳມາແກ້ໄຂ
ຂໍອະນຸຍາດຂຽນເປັນກະຕູນ ດ້ວຍຄວາມມັກສ່ວນຕົວ ຮະຮະ
(ຄິດວ່າຂຽນແບບນີ້ ຫນ້າຈະອ່ານງ່າຍກວ່າບໍ່ນະ?)
![](http://uphoup.com/image-86CF_4C2B2B96.jpg)
ຄວາມຮູ້ທົ່ວໄປກ່ຽວກັບ CSS Code
CSS Code ແມ່ນຫຍັງ?
CSS ຫຍໍ້ມາຈາກ Cascading Style Sheets
CSS Code ມີໄວ້ສຳລັບແກ້ໄຂຫນ້າເວັບ ຢ່າງເຊັ່ນ ພາບພື້ນຫລັງ, ເສັ້ນຂອບ, ສີສັນ, ຕົວຫນັງສື ແລະອື່ນໆ
ສ່ວນໃຫຍ່ໆແມ່ນມີເນື້ອຫາດັ່ງນີ້
Background - ພື້ນຫລັງ
Border - ເສັ້ນຂອບ
Cursor - ເມົ້າ
Scroll bar - ແຖບເລື່ອນຫນ້າຈໍ
List - ຫົວຂໍ້
Table - ຕາຕະລາງ, ຫ້ອງ
ອື່ນໆ (ບໍ່ເຄີຍໃຊ້ນອກເຫນືອຈາກນີ້ ເລີຍບໍ່ຄ່ອຍຮູ້...)
ການແກ້ໄຂ CSS ໃນ Punlao
![](http://uphoup.com/image-4D57_4C2B1C86.jpg)
![](http://uphoup.com/image-E59C_4C2B1C86.jpg)
![](http://uphoup.com/image-96AB_4C2B1C86.jpg)
ໂຄງສ້າງພື້ນຖານຂອງ CSS Code
![](http://uphoup.com/image-8E65_4C2B1C86.jpg)
![](http://uphoup.com/image-5D65_4C2B1C86.jpg)
ການໃສ່ພາບພື້ນຫລັງ
![](http://uphoup.com/image-A662_4C2B1E86.jpg)
ພິມໂຄ້ດນີ້ໃສ່
body { background-image: url( url ຂອງຮູບ ); }
ສ່ວນ Url ກັອບມາໃສ່ໄດ້ເລີຍ ຕາມຮູບ
![](http://uphoup.com/image-41E7_4C2B1E86.jpg)
![](http://uphoup.com/image-C976_4C2B1E86.jpg)
ໃນບາງເວັບ ຫລືບາງຄັ້ງ ພາບພື້ນຫລັງທີ່ໄດ້ຈາກໂຄ້ດຂ້າງເທິງ ມັນສະແດງອອກພຽງແຕ່ຮູບດຽວທາງຊ້າຍເທິງ (ໂດຍປົກກະຕິມັນຈະສະແດງແຕ່ຮູບດຽວແຫລະ ຖ້າບໍ່ໄດ້ໃສ່ຄຳສັ່ງອື່ນເພີ່ມ)
![](http://uphoup.com/image-08BD_4C2B1E86.jpg)
(ຕາມຮູບຈະເຫັນວ່າມັນມີສ່ວນຂາວໆ ທີ່ພາບພື້ນຫລັງບໍ່ສະແດງ)
ຄຳສັ່ງທີ່ຕ້ອງໃສ່ເພິ່ມເຂົ້າໄປ ຖ້າເຫັນວ່າພາບພື້ນຫລັງບໍ່ສະແດງຕໍ່ໄປຈົນສຸດ ແມ່ນ background-repeat: repeat
ຄືດັ່ງນີ້
body { background-image: url( url ຂອງຮູບ ); background-repeat: repeat; }
![](http://uphoup.com/image-0BFF_4C2B1E86.jpg)
![](http://uphoup.com/image-483E_4C2B1F0B.jpg)
ນອກຈາກ ຄຳວ່າ repeat ຍັງມີຄຳສັ່ງອື່ນອີກ ຄື
no-repeat ຫມາຍເຖິງໃຫ້ພາບພື້ນຫລັງສະແດງແຕ່ຮູບດຽວ (ບໍ່ຊ້ຳ)
repeat-x ຫມາຍເຖິງໃຫ້ພາບພື້ນຫລັງສະແດງລຽງໄປຕາມລວງຂວາງ
repeat-y ຫມາຍເຖິງໃຫ້ພາບພື້ນຫລັງສະແດງລຽງໄປຕາມລວງຕັ້ງ
ຢ່າງເຊັ່ນວິທີໃຊ້
background-repeat: repeat-x
ການລັອກພາບພື້ນຫລັງໃຫ້ຢູ່ກັບທີ່
body { background-image: url( url ຂອງຮູບ ); background-attachment: fixed; }
ໃນນີ້ເຮົາຈະໃຊ້ພ້ອມກັນກັບຄຳສັ່ງ repeat ທາງເທິງນັ້ນກະໄດ້ ພຽງແຕ່ຕື່ມ background-repeat: repeat ເຂົ້າໄປ
body { background-image: url( url ຂອງຮູບ ); background-attachment: fixed; background-repeat: repeat; }
ການໃສ່ພາບພື້ນຫລັງສອງຊັ້ນ
ພາບພື້ນຫລັງສອງຊັ້ນ ແມ່ນການໃສ່ພາບພື້ນຫລັງແບບ ທີ່ມີຮູບຢູ່ຊັ້ນທາງຫນ້າ ແລະມີ ສີ ຢູຊັ້ນທາງລຸ່ມ
![](http://uphoup.com/image-684D_4C2B3100.jpg)
ໃນຮູບນີ້ ມີຮູບຢູ່ຊັ້ນເທິງ ແລະມີ ສີດຳ ຢູ່ທາງຊັ້ນລຸ່ມ
ເອົາເປັນວ່າ ຖ້າໃຜຍັງບໍ່ເຂົ້າໃຈ ລອງເອົາໄປໃຊ້ເບິ່ງກະໄດ້
body { background: #ໂຄ້ດສີ; background: #ໂຄ້ດສີ url( url ຂອງຮູບ ) ; background-repeat: no-repeat;}
ບ່ອນໂຄ້ດສີ ຕ້ອງໃສ່ໂຄ້ດສີອັນດຽວກັນ!
ສຳລັບຮູບທາງເທິງ ມີ່ໃສ່ໂຄ້ດແບບນີ້
body { background: #000000; background: #000000 url(http://i30.photobucket.com/albums/c316/yardnam/blog/mimi2bg444.gif) top center; background-repeat: no-repeat;}
ການວາງພາບພື້ນຫລັງ
ເຮົາສາມາດວາງຕຳແຫນ່ງພາບພື້ນຫລັງໄວ້ບ່ອນໃດກໍ່ໄດ້ ໂດຍພິມຂໍ້ຄວາມພວກນີ້ຕໍ່ທ້າຍ ຫລັງໃສ່ Url
ຢ່າງເຊັ່ນໂຄ້ດທີ່ມີ່ໃຊ້
body { background: #000000; background: #000000 url(http://i30.photobucket.com/albums/c316/yardnam/blog/mimi2bg444.gif) top center; background-repeat: no-repeat;}
ຫລັງໃສ່ url ມີຄຳວ່າ top center ເຊິ່ງຫມາຍເຖິງຢູ່ເທິງສຸດ ທາງກາງ (ຄວາມຫມາຍຕາມຕົວນັ້ນແຫລະ)
ຖ້າຢາກວາງໃສ່ສ່ວນອື່ນໆ ກໍ່ຂຽນແທນຂໍ້ຄວາມໄດ້ຕາມນີ້
ໃຫ້ສົມມຸດວ່າຕາຕະລາງນີ້ເປັນຫນ້າເວັບ ຖ້າຢາກວາງຮູບພື້ນຫລັງໃສ່ໃສ ກະເລືອກຈາກສ່ວນນັ້ນມາໃສ່ໃນໂຄ້ດ
![](http://uphoup.com/image-5DBA_4C2B3100.jpg)
OPTION 1
ສຳລັບຄົນທີ່ຍັງບໍ່ຮູ້ວິທີອັບໂຫລດຮູບ ຫລືຈະເອົາ url ໄດ້ຈາກໃສ
ທ່ານເວັບມາສເຕີເພິ່ນໄດ້ສ້າງເວັບສຳລັບຝາກຮູບໄວ້ໃຫ້ແລ້ວ ຢ່າງເຊັ່ນ
uphoup.com
img.laoupload.com
ອັນນີ້ເປັນຕົວຢ່າງການຝາກຮູບຢູ່ເວັບ uphoup
ກ່ອນອື່ນເຂົ້າໄປ ຫນ້າເວັບຈະເປັນແບບນີ້
![](http://uphoup.com/image-798A_4C3AD337.jpg)
ຄລິກ Browse...
ຈະມີຫນ້າຕ່າງໃຫມ່ປະກົດຂຶ້ນມາ ໃຫ້ເຮົາເລືອກຮູບຈາກໃນຄອມເຮົາ
ຫລັງຈາກເລືອກຮູບແລ້ວໆ ໃຫ້ກົດ ເລີ່ມອັບໂຫລດ
![](http://uphoup.com/image-C0FE_4C3AD337.jpg)
ກົດ ເລີ່ມອັບໂຫລດແລ້ວ ຖ້ານິດຫນຶ່ງ ກະຈະກາຍເປັນແບບນີ້
ກັອບເອົາ url ໄປໃຊ້ໄດ້ທັນທີ
![](http://uphoup.com/image-82C6_4C3AD337.jpg)
---------------------------------
ເອົາເປັນວ່າ ບົດຮຽນມື້ນີ້ ຂໍຈົບລົງພຽງເທົ່ານີ້ກ່ອນກະແລ້ວກັນ (ປາດເຫື່ອ)
ຂໍຂອບໃຈທຸກທ່ານທີ່ອ່ານມາຈົນຈົບ
ສຸດທ້າຍນີ້ ໃຜມີຫຍັງຖາມກະຖາມເຂົ້າມາໄດ້ ...ຖ້າເປັນໄປໄດ້ ກ່ອນຖາມ ຢາກໃຫ້ລອງເຮັດດ້ວຍຕົນເອງເບິ່ງກ່ອນເດີ້ ບໍ່ໄດ້ແທ້ໆຈຶ່ງຖາມ
ຂໍຄວາມກະລຸນານຳທຸກໆຄົນ ບໍ່ຢາກໃຫ້ຄອມເມັ້ນເປັນ emotion ເສີຍໆ ແບບບໍ່ມີຂໍ້ຄວາມຫຍັງເລີຍນ່ະ (ແບບວ່າບໍ່ມັກ... =3= ບໍ່ຮູ້ຢາກສື່ເຖິງຫຍັງ) ຖ້າເຫັນໃຜເມັ້ນມາແບບນັ້ນ ສະແດງວ່າບໍ່ອ່ານ ບາງທີຈະລຶບຖິ້ມ ຂໍໂທດນຳລ່ວງຫນ້າ ຮຶ ![](http://uphoup.com/image-A266_4C3ACC52.gif)
ສະຫລຸບບົດຮຽນທີ່ເວົ້າເຖິງມື້ນີ້...
ຄວາມຮູ້ທົ່ວໄປກ່ຽວກັບ CSS Code
ການແກ້ໄຂ CSS ໃນ Punlao
ໂຄງສ້າງພື້ນຖານຂອງ CSS Code
ການໃສ່ພາບພື້ນຫລັງ
ການລັອກພາບພື້ນຫລັງໃຫ້ຢູ່ກັບທີ່
ການໃສ່ພາບພື້ນຫລັງສອງຊັ້ນ
ການວາງພາບພື້ນຫລັງ
OPTION 1 (url ການອັບໂຫລດຮູບ)
*/ ຕິຊົມໄດ້ຕາມສະດວກ...
**/ ບໍ່ແນ່ວ່າຈະຂຽນຕໍ່ບໍ່ ຖ້າມີຄົນຖາມຫລາຍໆກະອາດຈະແຍກໄປຂຽນໄດໃຫມ່ ຕາມແຕ່ເວລາຈະອຳນວຍ =w=