Css tutorial : Tips about css part 3
posted on 10 Dec 2008 15:56 by bbears in MyDay, TutorialCss
โหมด : ใกล้สอบแล้วรึไง เนี้ย !
คำเตือน : ห้ามนำงานของผักออกไปแพร่เองนะคะ !!!
โปรแกรมที่ควรใช้ดูบลอคนี้ : Firefox เท่านั้น
-----------------------------------------------------------------------
กลับมากับทิปส์ css with exteen ตอนที่สามกันนะคะ
หลังจากหายไปซะนานนะ ที่ผักหายไปก็ใช่ว่าจะไม่ว่างหรืออะไรอ้ะคะ 555 5
ไหนๆ ก็นะผักไปรีไรท์ (เว่อร์?) กับเอนทรี่เก่าๆ เกี่ยวกับ Css Tutorial มาอ้ะคะ จิ้มอ่านได้ที่นี้นะคะ
พร้อมทั้งไปเพิ่มข้อมูลบางส่วนลงไปด้วยอ้ะคะ หวังว่าคงไม่อ่านยากนะคะ ~
ในส่วนตรงนี้ก็ใช้สำหรับ .neck กับ .leg นะคะ
สามารถเอาโค้ดที่เป็น .neck ไปแก้ได้ให้เป็น .leg ได้เลยนะคะ !
ก็โค้ดนี้ต้องขอบคุณโปรแกรมดรีมฯ ที่ทำให้ผักได้มั่ว css แบบยำแหลกคะ *โค้ง*
แต่ว่าเวลาให้แสดงในส่วนนี้พยายามอย่ามีเมนูเยอะนะคะ มันจะไม่สวยน้า ~
" /* Neck Menu */
#neck{
background:url(http://i81.photobucket.com/albums/j229/mytheme/exteen/version-24/bgcontentbbears-gaara.gif)repeat-y; <<ตรงนี้เป็นส่วนบีจีทั้งหมด (ไม่เกี่ยวกับปุ่ม) ของส่วน neck นี้นะคะ
}
#neck .module{ <<เป็นการตั้งค่าแต่ละโมดูล (หรือในที่นี้คือปุ่มนั้นเองคะ)
display:inline;
text-align:right; <<ตัวอักษรชิดทางขวา (สามารถแก้ได้เป็น center หรือ left คะ)
margin:5px 10px 10px 10px; <<ความห่างของแต่ละโมดูล
padding:5px 10px 5px 10px;
width:700px; <<ความกว้างของโมดูลทั้งหมด (ผักตั้งให้มีความกว้างเท่ากับความยาวหน้าบลอค)
float:right; <<หมายถึงแต่ละโมดูลชิดทางด้านขวา
}
#neck .module ul{ <<ส่วนนี้ก็เป็นข้อความลิงค์ในแถบนี้อ้ะคะ
list-style-type:none;
padding:0px 0px 0px 0px;
margin:2px 0px 4px 0px;
float:left;
width:100%;
}
#neck .module h2{ <<ชื่อหลัก (พวกคำว่า links, recomment อะไรแบบนี้อ้ะคะ) ตรงนี้ผักไม่ให้แสดง
display:none;
}
#neck .module li{ <<ตั้งค่าแต่ละโมดูลคะ
display:inline;
position:relative;
width:100%;
font-size: 10pt;
text-align:center;
padding:0px 10px 0px 0px;
}
#neck .module li a { <<ก่อนที่เมาส์จะมาเอามาชี้อ้ะคะ
font-weight:bold;
text-decoration:none;
color:#fff; <<สีของตัวอักษรที่ก่อนจะเอาเมาส์มาชี้คะ
margin:0px 0px 0px 0px;
padding:3px 10px 6px 10px;
border:1px solid #666; <<สีของเส้นรอบล้อมปุ่มอ้ะคะ
background:#000000; <<สีบีจีของปุ่มที่ว่าละคะ
list-style-type:none;
}
#neck .module li a:hover { <<ตอนที่เมาส์ไปชี้ในแต่ละโมดูล ,, ดูเพิ่มเติมที่นี้คะ
color:#000000;
background:#ccc;
list-style-type:none;
}
ส่วนของตรงนี้หวังว่าคงจะช่วยอะไรให้ธีมสวขึ้นนะคะ แบบว่าเวลาคอมเมนต์ มันจะได้ดูไฮโซ !! 555 55
ไปแก้โค้ดที่ /* Comment Form */ นะคะ
" #commentform textarea{
width:500px; <<ความกว้างของกล่อง
height:200px; <<ความสูงของกล่อง
font: 12px 'Tahoma'; <<แบบตัวอักษรที่พิมพ์ในกล่องคะ
border: 1px solid #979797; <<สีเส้นรอบกล่องคะ
color:#000; <<สีของตัวหนังสือที่พิมพ์ในกล่องคะ
padding:4px;
background:url(http://i81.photobucket.com/albums/j229/mytheme/exteen/version-24/bgcommentsbbears-gaara.gif) top no-repeat; <<ภาพของกล่องนี้อ้ะคะ (แก้ลิงค์ภาพได้เลยนะคะ)
margin:3px 0px 3px 0px;
}
หวังว่าคงช่วยทำให้บลอคเพื่อนๆ พี่ๆ น้องๆ แนวขึ้นนะคะ !
5555 55 ผักเองก็ใช้วิธีมั่ว ยำ แหลก ในการแก้บลอคแต่ละครั้งอ้ะคะ *โดนตบ*
อ๊ะ! โฆษณาอีกนิด (?) 5555 5555 55
เปล่าหรอกคะ คือว่ามีหลายท่านสงสัยเรื่องที่ผักเคยเอาลงเอนทรี่แล้วอ้ะคะ
งั้นผักเอามาลงตรงนี้อีกรอบนะคะ ~
รวมเอนทรี่เกี่ยวกับ css คะ
001. Css tutorial : General-Header
002. Css tutorial : Neck Menu
003. Css tutorial : Content
005. Css tutorial : Sildebar-Profile
004. Css tutorial : Comment-Footer
005.
Css tutorial : Theme style bbears
006.
Css tutorial : Tips about css part 1
007.
Css tutorial : Tips about css part 2
ก่อนไป ก็ขอขอบคุณสำหรับทุกคอมเมนต์เช่นเคยคะ
และรักษาสุขภาพกันดีดีนะคะ เพราะอากาศหนาวมากมาย ♥