การวางตำแหน่ง layout ของ div แต่ละอัน เรามักจะใช้ property float และ clear เป็นประจำ ทำให้เราวางตำแหน่งได้อิสระมากขึ้น ในกรณี ที่ต้องการให้มีหลาย คอลัมภ์ ใน 1 หน้า
float นั้นจะคล้าย align ที่เราใส่ใน table เมื่อต้องการให้มันอยู่ชิดด้านซ้าย ก็ใส่ float:left ถ้าชิดขวาใส่ float:right
ส่วน clear นั้น clear:left คือ ไม่ยอมให้มีอะไรอยู่ด้านซ้าย , clear:right คือ ไม่ยอมให้มีอะไรอยู่ด้านขวา,ที่มักใช้เป็นประจำคือ clear:both คือ ไม่ยอมให้มีอะไรอยู่ทั้ง 2 ด้าน มักจะใช้กับส่วน footer Read more…
Related Articles
แน่นอนครับ ถ้ามันสั้นได้ จะเขียนยาวไปทำไมให้เยิ่นเย้อ มาดูกันว่า property ตัวไหน ย่อได้บ้าง
Background
แบบปกติ
background-color: #87CEFA; ———————–/*สีแบ็คกราวน์*/
background-position: left top; ———————-/*ตำแหน่งชิดซ้าย บน*/
background-repeat: no-repeat;——————– /*ใส่ไปรูปเดียว ไม่ต้องทำซ้ำ*/
background-image: url(images/arrow.gif); ——–/*เอารูปจากที่นี่นะ*/
background-attachment: fixed; —————-/*ใส่ตรงไหน fix ไว้ตรงนั้นเลย ต่อให้เลื่อน scroll bar ลงมาก็ยังเห็น*/
แบบย่อแล้ว
background: #87CEFA url(images/arrow.gif) no-repeat fixed left top; ควรเรียงตามลำดับครับ ไม่เช่นนั้น IE6 อาจไม่แสดงในบางกรณี
ถ้าเขียนแบบนี้
background: #87CEFA url(images/arrow.gif) no-repeat fixed 5px 10px; ตัวเลขค่าแรกคือระยะห่างแบ็คกราวน์ในแนวแกน x อันที่2 คือแนวแกน y Read more…
Related Articles
li คือ list ul คือ unorderlist จะนับ li เป็น สัญลักษณ์ อื่นๆที่ไม่ใช่ตัวเลข ol คือ orderlist นับ li เป็นตัวเลข
รูปแบบการใช้คือ
แต่เราสามารถกำหนด property ให้ ul ได้ ด้วยการใส่ list-style-type เช่น ul { list-style-type: square } ก็จะได้เป็นสี่เหลี่ยมเล็กๆ
การแสดงผล
เขียนโค้ด css ดังนี้ Read more…
Related Articles
ในหน้าเว็บเพจนั้น แต่ละส่วน มองกันอย่างง่ายๆมันก็คือ กล่องแต่ละกล่อง วางต่อๆกัน เป็นการวาง layout พิ้นฐาน ซึ่งมีความสำคัญมาก เราจะมาดูกันว่า box แต่ละอัน มีส่วนประกอบอะไรบ้าง
: ภาพตัวอย่าง
content area 100×100 pixel
padding 10px คือ ส่วนที่เว้นเข้ามาจากเส้นขอบ
boder 10 px คือ เส้นขอบ
margin 10 px คือ ระยะห่างจากเส้นขอบออกไปด้านนอก
ทดสอบ Box model
Read more…
Related Articles
Recent Comments