ພັນລາວ.ຄອມ
ຊອກຫາ:
ຊອກຫາແບບລະອຽດ
ຂຽນເມື່ອ ຂຽນເມື່ອ: ພ.ຈ.. 9, 2008 | ມີ 106 ຄຳເຫັນ ແລະ 0 trackback(s)

ປະກາດ (ນິດຫນຶ່ງ)

ສຳລັບຄົນທີ່ບໍ່ເຂົ້າໃຈ ລອງເຂົ້າໄປເບິ່ງ >>>ໄດຯນີ້<<< ແທນໄດ້ເດີ້ ມີ່ຂຽນຂັ້ນຕອນ CSS ພື້ນຖານ ພ້ອມຮູບປະກອບ ຫນ້າຈະເຂົ້າໃຈງ່າຍກວ່າ ' w '

 

-------------------------------

 

ສະບາຍດີທຸກໆຄົນ ໄດຯນີ້ຂຽນຂຶ້ນ ເພື່ອໃຫ້ສາມາດແກ້ໄຂຫນ້າໂປຣໄຟໄດ້ງ່າຍຂຶ້ນ ເຫມາະສຳລັບຄົນທີ່ພໍມີພື້ນຖານດ້ານ CSS ແລ້ວ * w *

ກ່ອນອື່ນຈະເຮັດ code ສຳເລັດຮູບໃຫ້ກ່ອນກະແລ້ວກັນ

 

ການໃສ່ພື້ນຫລັງ

body { background-image: url( url ຂອງຮູບ ); background-repeat: repeat; }  

 

ການໃສ່ພື້ນຫລັງແບບລັອກຢູ່ກັບທີ່

body { background-image: url( url ຂອງຮູບ ); background-attachment: fixed;  background-repeat: repeat; }  

 

ການປ່ຽນສີຕົວອັກສອນ

ສີລິ້ງ

a:link { color: #ໂຄ້ດສີ; }  

ສີລິ້ງທີ່ເຄີຍກົດແລ້ວ

a:visited {color: #ໂຄ້ດສີ; }  

ສີລິ້ງຕອນເອົາເມົ້າໄປວາງ

a:hover {color: #ໂຄ້ດສີ; }  

ສີອັກສອນໃນຫນ້າໂປຣໄຟ

div, td {color:#ໂຄ້ດສີ; }  

 

ການໃສ່ຮູບເທິງຫົວໂປຣໄຟ

div.page_header { background: url( url ຂອງຮູບ ); height: ຄວາມສູງຂອງຮູບ px; }  

ປົກກະຕິຈະມີຄວາມຍາວປະມານ 930 ແຕ່ຖ້າຢາກໃສ່ຄວາມຍາວ ກະພິມ width: ຄວາມຍາວ px;  ເຂົ້າໄປ  

 

ການໃສ່ຮູບຢູ່ຮອບນອກຂອງກ່ອງຄວາມເຫັນ

div.profile_postcomment { background: url( url ຂອງຮູບ ); }

ຖ້າຢາກໃສ່ຄວາມສູງກະຂຽນ height: ຄວາມສູງຂອງຮູບ px; ລົງໄປ  

 

ການໃສ່ຮູບໃນສ່ວນທີ່ໃຊ້ພິມຄວາມເຫັນ

textarea { background: url( url ຂອງຮູບ ); }  

 

ຖ້າຢາກແກ້ໄຂຄວາມຍາວຄວາມກວ້າງໃຫ້ຕື່ມ

height: ຄວາມຍາວpx !important;

width: ຄວາມກວ້າງpx !important;    

 

ພວກທາງເທິງນັ້ນເປັນ code ສຳເລັດຮູບ ໃຜຢາກແກ້ໄຂກະກັອບໄປແກ້ໄດ້ຕາມສະດວກເລີຍ ^^

ຕໍ່ມາມີ່ຈະອະທິບາຍກ່ຽວກັບ code CSS ອີກຫນ້ອຍຫນຶ່ງ ສຳລັບຄົນທີ່ຢາກແກ້ໄຂເພິ່ມເຕີມນອກເຫນືອຈາກນັ້ນ ນີ້ເປັນສ່ວນປະກອບຂອງ CSS ທີ່ຄວາມຈະຮູ້ໄວ້ (ເພື່ອການແຕ່ງຫນ້າໂປຣໄຟໃຫ້ງົດງາມ)

 

ຕົວຢ່າງເຊັ່ນ code ນີ້

textarea { background: url( url ຂອງຮູບ ); }

 

ສ່ວນປະກອບຂອງ CSS ຈະມີເປັນສ່ວນໆ ແບ່ງໄດ້ຄື    

textarea ແມ່ນ class ຂອງສ່ວນທີ່ເຮົາຕ້ອງການແກ້ໄຂ ຫລືກໍ່ຄື ການ select class

{ … } ແມ່ນຕົວເປີດ,ປິດ ເພື່ອປ້ອນຄຳສັ່ງທີ່ເຮົາຕ້ອງການແກ້ໄຂ (ຈຳເປັນຕ້ອງມີທຸກຄັ້ງ)

background ແມ່ນສິ່ງທີ່ເຮົາຕ້ອງການຈະແກ້ໄຂ ໃນສ່ວນ textarea ເຊິ່ງກະຄືພາບພື້ນຫລັງນັ້ນເອງ

: ຫລັງຈາກຂຽນຄຳສັ່ງ ຕ້ອງພິມ “ສອງຈ້ຳ” ທຸກຄັ້ງ

url( url ຂອງຮູບ ) ແມ່ນການປ້ອນຄຳສັ່ງຂອງເຮົາເຂົ້າໄປ ເພື່ອໃຫ້ມັນສະແດງຜົນຕາມທີ່ເຮົາຕ້ອງການ

ປິດທ້າຍດ້ວຍການຈົບຄຳສັ່ງຫນຶ່ງໆ ດ້ວຍການພິມ ; ຈາກນັ້ນເຮົາສາມາດພິມຄຳສັ່ງໃຫມ່ເຂົ້າໄປໄດ້ອີກເລື້ອຍໆ

 

 

ຕໍ່ມາມີ່ຈະຂຽນບອກ class ຕ່າງໆໃຫ້ ສຳລັບຄົນທີ່ຕ້ອງການຈະແກ້ໄຂສ່ວນອື່ນໆນອກເຫນືອຈາກຂ້າງເທິງ

 

div.top_menu     ສ່ວນເມນູທາງເທິງ(ຊ້າຍ) (ຫນ້າທຳອິດ ແນະນຳຫມູ່…)

      a.top_menu_item     ເມນູແຕ່ລະອັນໃນ div.top_menu

td.top_menu2     ເມນູທາງເທິງ(ຂວາ) (ບ່ອນລັອກອິນ)

td.menu_use      ສ່ວນເມນູ (ເຫດການໃຫມ່ ໂປຣໄຟ ໂປຣແກຣມ…)

a.menu_item     ເມນູແຕ່ລະອັນ (ເຫດການໃຫມ່ ໂປຣໄຟ ໄປຣແກຣມ…)

div.page_header     ສ່ວນທາງເທິງບລັອກ ( ຊື່'s Profile )

div.content     ສ່ວນຫນ້າຂໍ້ມູນຕ່າງໆ      

td.profile_leftside     ໂປຣໄຟສ່ວນທາງຊ້າຍມື      

td.profile_rightside     ໂປຣໄຟສ່ວນທາງຂວາມື

      td.header     ສ່ວນສະຖານະ ສະຖິຕິ…

      td.profile     ສ່ວນຂໍ້ມູນ ທາງລຸ່ມ td.header            

div.profile_profile     ສ່ວນຂໍ້ມູນໃນໂປຣໄຟ

            div.profile_heading     ສ່ວນຫົວຂໍ້ຂອງຂໍ້ມູນໃນໂປຣໄຟ (ຂໍ້ມູນສ່ວນຕົວ ຂໍ້ມູນອື່ນໆ ຄວາມສົນໃຈ…)

            div.profile_field_value     ສ່ວນຂໍ້ມູນແຕ່ລະສ່ວນ

      div.profile_action     ສ່ວນ ອັບເດດ…  

 

ສ່ວນຄອມເມັ້ນ  

 

div.profile_comments div.profile_postcomment      ອ້ອມນອກຂອງ textarea

textarea     ບ່ອນພິມຄອມເມັ້ນ

div.profile_comment_author     ສ່ວນຊື່ຂອງຄົນຄອມເມັ້ນ

div.profile_comment_date     ສ່ວນວັນທີທີ່ຄອມເມັ້ນ

div.profile_comment_body     ສ່ວນຄວາມເຫັນໃນກ່ອງຄອມເມັ້ນ    

 

 

ສ່ວນປຸ່ມ (ໂປຣໄຟ ຫມູ່ ຄຳເຫັນ…)  

 

td.profile_tab     ຕອນກ່ອນຈະກົດ (ໃສ່ຂອບໄດ້)

td.profile_tab2     ຕອນທີ່ກົດແລ້ວ (ໃສ່ຂອບໄດ້)

td.profile_tab a     ຕອນກ່ອນຈະກົດ (ໃສຮູບທາງໃນ ຫລືປ່ຽນສີໄດ້)

td.profile_tab2 a     ຕອນກ່ອນກົດແລ້ວ (ໃສຮູບທາງໃນ ຫລືປ່ຽນສີໄດ້)

td.profile_tab_end     ບ່ອນທີ່ມີເສັ້ນຂອບ (ປ່ຽນແປງ ຫລືເອົາອອກໄດ້)    

 

ຄຳສັ່ງຕ່າງໆທີ່ມັກໃຊ້ເລື້ອຍໆ  

 

ເຮັດໃຫ້ພື້ນຫລັງ ແລະເສັ້ນຂອບບໍ່ສະແດງ

{ background:none; border:none;}  

 

ເຮັດໃຫ້ສ່ວນນັ້ນຫາຍໄປ

{ display: none; }  

 

ໃສ່ສີຕົວອັກສອນ

color: #ໂຄ້ດສີ;  

 

ໃສ່ພື້ນຫລັງ

background: url( url ຂອງຮູບ );  

 

ໃສ່ສີໃຫ້ພື້ນຫລັງ

Background-color: #ໂຄ້ດສີ ;  

 

ການປັບໄລຍະຫ່າງຕ່າງໆ ແມ່ນໃຊ້ padding ແລະ margin ສອງຄຳສັ່ງນີ້ຄືກັນ ແລະຕ່າງກັນຫນ້ອຍຫນຶ່ງ   ຕົວຢ່າງການໃຊ້ padding-right: 20px; ຫລື padding: 20px 10px 0px 10px; ຫລື margin-botton: 20px; ປະມານນີ້ແຫລະ ບໍ່ຈັກຊິອະທິບາຍ ລອງເອົາໄປທົດລອງໃຊ້ເບິ່ງກະແລ້ວກັນ =w=    

 

ຖ້າໃສ່ຄຳສັ່ງໃນບາງສ່ວນແລ້ວມັນບໍ່ສະແດງຜົນ ກະລອງໃສ່ !important ເຂົ້າໄປ (ເທົ່າທີ່ມີ່ເຂົ້າໃຈ ມັນຈະສະແກນຫາຄຳນີ້ ແລະແປຄຳສັ່ງນີ້ກ່ອນຫມູ່ ຕິເບາະ ບໍ່ແນ່ໃຈ) ຕົວຢ່າງການໃຊ້ width: 500px !important; (ອັນນີ້ເປັນການປັບຄວາມກວ້າງ)    

 

ຍັງມີ class ຫລາຍບ່ອນທີ່ມີ່ບໍ່ໄດ້ຂຽນໃຫ້ ໃຜທີ່ຢາກ select class ດ້ວຍຕົວເອງ ເພື່ອແກ້ໄຂບ່ອນອື່ນໆອີກ ຫລືເພື່ອຈະຫາ class ຂອງໂປຣໄຟໃນເວັບອື່ນ (ຢ່າງເຊັ່ນ hi5) ຫລືຫນ້າ blog ກະເຮັດໄດ້ດັ່ງນີ້

 

ສິ່ງທີ່ຕ້ອງມີແມ່ນ Firefox ໃຜທີ່ບໍ່ທັນມີໄຟຟັອກ ກະໄປຫາໂຫລດມາຕິດຕັ້ງຊະ (ເຫັນວ່າອັນອື່ນກະໃຊ້ໄດ້ ແຕ່ປົກກະຕິມີ່ໃຊ້ Firefox ແຮະໆ)

ກ່ອນອື່ນກະໃຊ້ firefox ເປີດຫນ້າທີ່ເຮົາຕ້ອງການ ຄລິກຂວາທີ່ຫນ້ານັ້ນ ແລ້ວກົດ Veiw page source ຈະມີຫນ້າຕ່າງໃຫມ່ຂຶ້ນມາ ເຊິ່ງເຕັມໄປດ້ວຍໂຄ້ດຢົ້ວເຢ້ຍເຕັມໄປຫມົດ =w= ໃຜທີ່ບໍ່ຄຸ້ນເຄີຍກັບການອ່ານໂຄ້ດ ກະອາດຈະລາຍຕາຫນ້ອຍຫນຶ່ງ (ຖ້າຈ້ອງໂຄ້ດດົນໆອາດເຈັບຫົວໄດ້ ມີ່ເຄີຍເປັນມາລະ ເຈັບຫົວໄປຫນຶ່ງມື້ຫນຶ່ງຄືນຕອນອ່ານໂຄ້ດໃນ hi5 ມຶນຂະຫນາດ = =)

alt

  * ຄລິກທີ່ຮູບເພື່ອເບິ່ງຂະຫນາດເຕັມ

ໃນຮູບຈະເຫັນໄດ້ວ່າພວກນັ້ນເປັນ class ເຮົາຕ້ອງເບິ່ງວ່າ class ພວກນັ້ນແມ່ນສ່ວນໃດຂອງຫນ້າໂປຣໄຟ ເຮົາຈະເຫັນຄຳວ່າ “ຫນ້າທຳອິດ” “ແນະນຳຫມູ່” “ເສດຖີພັນລາວ” ອື່ມໆ ຄຸ້ນໆແມ່ນບໍ່ ຮູ້ລະວ່າມັນແມ່ນສ່ວນໃດ ອິອິ

 

ຫລັງຈາກໄດ້ class ທີ່ເຮົາຕ້ອງການຈະ select ແລ້ວ ມາເບິ່ງທາງຫນ້າຂອງຄລາສນັ້ນໆ (ຕົວຫນັງສືສີມ້ວງເຂັ້ມໆນ່ະ) ເຊິ່ງທາງຫນ້າຂອງ top_menu ມີ td ກະຈະເປັນ td.top_menu ຫນ້າ top_menu_item ມີ a ກະຈະກາຍເປັນ a.top_menu_item

 

ໃນນີ້ ບາງບ່ອນ ການ select class ມັນຈະຕ່າງໄປຫນ້ອຍຫນຶ່ງ ຄືມັນບໍ່ໄດ້ຂຽນ div class='top_menu_link' ແຕ່ອາດຈະຂຽນເປັນ div id="gohome" (ອັນນີ້ເປັນໂຄ້ດທີ່ຢືມມາຈາກ hi5) ແລະບາງເວັບ ຖ້າຂຽນ div. td. ມັນຈະໃຊ້ບໍ່ໄດ້ ອາດຈະກາຍເປັນ # ແທນ ເຊັ່ນ #content ປະມານນີ້ແຫລະ ບາງທີກະເປັນ . ເຊັ່ນ .vanity-bar (ອັນນີ້ເປັນແຖບສະຖິຕິໃນ hi5)    

 

ສ່ວນຫລັກຕ່າງໆ ກະອະທິບາຍໄປຫລາຍແລ້ວ ໃຜຍັງບໍ່ເຂົ້າໃຈບ່ອນໃດກະຖາມເຂົ້າມາໄດ້ ໃຜທີ່ເຂົ້າໃຈແລ້ວກະມາລົງມືແກ້ໄຂຫນ້າໂປຣໄຟກັນເລີຍ! ^^

ບາງໂຄ້ດກະອາດຈະໃຊ້ບໍ່ໄດ້ ເພາະມີ່ບໍ່ທັນໄດ້ລອງທຸກອັນ ແລະອາດຍັງມີຂໍ້ຜິດພາດຢູ່ ເນື່ອງຈາກບໍ່ໄດ້ສຶກສາຈິງຈັງ =w= ກະຂໍອະໄພນຳ ແລະບອກກັນມາໄດ້ວ່າຜິດພາດບ່ອນໃດ ຈະໄດ້ທຳການແກ້ໄຂ ແຮະໆ ຫວັງວ່າໄດຯນີ້ຈະເປັນປະໂຫຍດຕໍ່ທຸກຄົນເນີ້ ແລະຂອບໃຈທີ່ເຂົ້າມາອ່ານ ^^

 

ຂຽນເມື່ອ ຂຽນເມື່ອ: ສ.ຫ.. 24, 2008 | ມີ 49 ຄຳເຫັນ ແລະ 0 trackback(s)

----------------------

*Edit: ອັນນີ້ເປັນ How to ຂອງພັນລາວເວີຊັ້ນເກົ່າ ດັ່ງນັ້ນໂຄ້ດຫລາຍໆສ່ວນມັນອາດຈະໃຊ້ບໍ່ໄດ້ແລ້ວເດີ້

----------------------

ສະບາຍດີທຸກໆຄົນ

ກ່ອນອື່ນກະຕ້ອງຂໍຖາມກັນກ່ອນວ່າ ມີໃຜທີ່ມີຄວາມຕ້ອງການຢາກແຕ່ງໂປຼໄຟ

ແຕ່ແຕ່ງບໍ່ໄດ້ດັ່ງໃຈບໍ່ ຍົກມືຂຶ້ນ ^o^

ມື້ນີ້ມິມີ່ຈະມາແນະນຳວິທີການແຕ່ງຂັ້ນພື້ນຖານໃຫ້ ສຳລັບຄົນທີ່ຢາກແກ້ໄຂໃຫ້ໂປຼໄຟເບິ່ງມີຄວາມເປັນເອກກະລັກເດີ້ ^^

ກ່ອນອື່ນກະ ກົດເຂົ້າໄປທີ່ຫນ້າແກ້ໄຂ ແລ້ວໄປທີ່ຫນ້າຕັ້ງຄ່າໂປຼໄຟ

ຕໍ່ໄປນີ້ແມ່ນ code ທີ່ໃຊ້ປ່ຽນສ່ວນຕ່າງໆ ກອບໄປວາງໄວ້ທີ່ຫນ້າ ຕັ້ງຄ່າໂປຼໄຟໄດ້ເລຍ


* ວິທີປ່ຽນພາບພື້ນຫລັງ

body {
background-image: url( url ຂອງຮູບ );
background-repeat: repeat; }


* ພາບພື້ນຫລັງແບບລັອກໃຫ້ພື້ນຫລັງຢູ່ບ່ອນເກົ່າ

body {
background-image: url( url ຂອງຮູບ );
background-attachment: fixed;
background-repeat: repeat; }

* ປ່ຽນລູກສອນເມົ້າ ໃນຫນ້າໂປຼໄຟ

body { cursor: url( url ຂອງຮູບ ); }

* ໃສ່ຮູບເທິງຫົວໂປຼໄຟ

td.shadow img {display:none}
td.shadow { background-image: url( url ຂອງຮູບ ); border:none; height: ຄວາມສູງpx;}


ທີ່ຂຽນໃຫ້ທາງເທິງນັ້ນແມ່ນສ່ວນຫນຶ່ງແຫລະ

ບໍ່ເຂົ້າໃຈບ່ອນໃດກະຖາມໄດ້ເດີ້ ຖ້າຕອບໃດ້ກະຈະຕອບໃຫ້ ແຕ່ຂໍບອກຕາມຕົງ ມີ່ກະຍັງບໍ່ເກັ່ງປານໃດດອກ ><

ຜິດພາດປະການໃດກະຂໍອະໄພນຳ ແຮະໆ


** ສ່ວນອັນນີ້ ເປັນໂຄງຮ່າງສ່ວນຕ່າງໆຂອງໂປຼໄຟພັນລາວທີ່ລອງເຮັດມາໃຫ້ເບິ່ງ

ໃຜທີ່ພໍຮູ້ເລື້ອງ code CSS ກະຫນ້າຈະເຂົ້າໃຈນໍ້ ລອງເອົາໄປແກ້ເບິ່ງ

ແຕ່ຄິດວ່າຄົງຈະຍັງມີສ່ວນທີ່ຜິດພາດຢູ່ແຫລະ ເພາະບໍ່ໄດ້ກວດເບິ່ງປານໃດ =w="

ໃຜເຈິຂໍ້ຜິດພາດກະທັກກັນມາໄດ້ ເອົາໄວ້ຄັ້ງຫນ້າຈະແກ້ມາໃຫ້ເບິ່ງໃຫມ່

alt

*ຄລິກທີ່ພາບເພື່ອເບິ່ງຂະຫນາດໃຫຍ່

 

ບາງບ່ອນ ຍັງບໍ່ຮູ້+ຫາບໍ່ເຈິ+ບໍ່ແນ່ໃຈ ເລີຍບໍ່ໄດ້ຂຽນລົງໄປ = =

ໃຜມີຫຍັງກະມາຕື່ມໆກັນໄດ້ເດີ້

( ບາງບ່ອນ ຖ້າບໍ່ແມ່ນ td. ກະເປັນ div. ນີ້ແຫລະ... ເຫັນ td. ມັນຫລາຍກະເລີຍໃສ່ td. ໄປຫມົດ ...ຮາ )

.

.

.


ຫວັງວ່າທັງຫມົດນັ້ນ ຄົງຈະເປັນປະໂຫຍດຕໍ່ສະມາຊິກພັນລາວບໍ່ຫລາຍກະຫນ້ອຍເດີ້ ^^

ຂອບໃຈທີ່ເຂົ້າມາເບິ່ງ >w<