:: All + Most = Allmost ::

/* Header */

#header{
background:url(http://g.exteen.com/t/apollo/header.png) top left no-repeat;
padding:32px 0px 0px 25px;
}

#header h1 a{
color:#666;
font-size:24px;
}

#header h1 a:hover{
color:#999;
}

#header h2{
font-size:12px;
margin:5px 0px 5px 0px;
}

#coverimage{
background:url(http://g.exteen.com/t/apollo/cover.jpg) no-repeat;
height:180px;
width:730px;
margin-bottom:5px;
}

/*======================================================================*/

โผล่มาอีกรอบหลังจากแอบไปนอนมา ฮ่ะๆ คราวนี้เป็นส่วนที่เราคิดว่าง่ายนะ มันประกอบไปด้วยอะไรที่น้อย

#1 - header เฮดเดอร์นี่ไม่ใช่ตัวเฮดเรานะ แต่เป็นไอ้ที่มันล้อมรอบเฮดจริงๆเอาไว้อีกที เป็นเหมือนหมวกเวลาใส่บนหัวเรา...
#2 - header h1 อันนี้เป็นส่วนของชื่อบล็อกเรา
#header h1 a{
color:#666; >> เป็นสีของฟอนต์เวลายังไม่ได้จิ้ม
font-size:24px; >> ขนาดตัวอักษร ปรับขึ้นลงตามสบาย
}
แต่ถ้าไม่อยากให้มีไอ้ตัวนี้ขึ้นใส่คำว่า display:none; ไว้บรรทัดต่อจาก font-size:24px; โลด
#header h1 a:hover{ -- เป็นเวลาที่เราวางเมาส์ลงไปบนลิงค์
color:#999;
}
#3 - header h2 ตรงนี้เป็นบรรทัดที่รองลงมาจากชื่อบล็อกเรา นั่นก็คือ Description น่ะเอง อยากตั้งคำอธิบายบล็อกเท่ห์ๆก็ไปที่ Setting --> Blog Description แล้วก็กรอกแกรกๆลงไปเลย!!

#4 - Cover นี่แหละ...เป็นส่วนของหัวเราจริงๆ ฮัดช่า!!
#coverimage{
background:url(http://g.exteen.com/t/apollo/cover.jpg) no-repeat; >> รูปภาพของเฮดเราเอง
height:180px; >> ความสูงของรูป
width:730px; >> ความกว้างของรูป
margin-bottom:5px;
}

เฮดนี่ง่าย...นิดเดียวก็จบล่ะ งั้นเราก็มาต่อกันด้วยช่วงลำคออันสวยงามกันเลย นั่นคือคำสั่ง neck


/* Neck Menu */

#neck{
background:#c69c6d url() top left;

}

#neck .module{
background:#ff6c00;
display:inline;
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;
}

#neck .module ul{
display:inline;
margin:0px;
padding:0px;
}

#neck .module h2{
display:none;
}

#neck .module li{
border-right:10px solid #0000ff;
display:inline;
padding:0px 10px 0px 10px;
}

/*======================================================================*/

คอนี่เป็นลูกเล่นใหม่ๆจากเอ็กทีน สวยดี เราชอบ...ฮ่ะๆ

#1 - background ตรงนี้ถ้าจากที่เอ็กทีนกำหนดมาก็จะเป็น belly ซึ่งมันจะเหมือนเป็นส่วนเดียวกับ belly ของแบ็คกราวและเฮด (มันจะครอบเนื้อหาเราอยู่) แต่อันนี้เราเทสีเพื่อจะได้เห็นโดยง่าย

#2 - neck module ส่วนนี้จะเป็นเรื่องของไอ้พื้นสีส้มเข้มๆ (ดูตามรูปเอานะ)
#neck .module{
background:#ff6c00; >> สีของพื้น
display:inline; >> ถ้าไม่อยากให้โชว์ในส่วนนี้เปลี่ยนจาก inline --> none
float:left;
margin:0px 0px 0px 25px;
padding:2px 0px 5px 0px;
width:730px;
}
#3 - neck .module ul เป็นส่วนของลิงค์ของ Page ของเรา
#neck .module ul{
display:inline; >> อันนี้ถ้าไม่อยากให้โชว์ลิงค์ก็เปลี่ยนจาก inline --> none แล้วมันจะขึ้นคำว่า Pages มาให้ในส่วนนี้แทน
margin:0px;
padding:0px;
}
#4 - neck .module li เป็นส่วนของเส้นที่กั้นชื่อเพจให้ห่างกัน ในที่นี้เราใช้เป็นสีน้ำเงิน ขนาด 10 px เพื่อความสะดวกในการมองเห็น ฮ่ะๆ
#neck .module li{
border-right:10px solid #0000ff; >> ขนาดและสีของไอ้เส้นกั้น
display:inline; >> ถ้าไม่อยากให้โชว์ก็เปลี่ยนเป็น none
padding:0px 10px 0px 10px;
}
**ในที่นี้จะตั้งให้เส้นอยู่ทางขวามือ ถ้าเราอยากจะเปลี่ยนก็ให้เปลี่ยนคำสั่งเอา
border-right >> อยู่ทางขวา
border-left >> อยู่ทางซ้าย
border-top >> อยู่ข้างบน
border-buttom >> อยู่ข้างล่าง
border >> อันนี้จะครอบหมด 4 ทิศเลย
ถ้าเห็นว่าเป็นตรงๆแข็งทื่อๆไม่เห็นจะสวยเลยอยากเปลี่ยนเป็นเส้นประก็เปลี่ยนจาก border-right:10px solid #0000ff; มาเป็น border-right:10px dotted #0000ff; แต่จะใช้คำสั่งเส้นอะไรก็ได้ตามแต่ใจเรา ^^


หมายเหตุุ

#neck .module h2{
display:none;
}
ส่วนนี้ไม่รู้อ่ะค่ะ - -;; ขอโทษทีด้วยนะ ฮ่า...


พอก่อนๆ...เดี๋ยวต้องไปศึกษาส่วน content มาก่อน เหอะๆ...ซับซ้อน =w= (รึเปล่า!?)