Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Webmaster Tip การทำพื้นหลังแบบ Fix โดยใช้ Cs ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 7860|ตอบ: 7
go

การทำพื้นหลังแบบ Fix โดยใช้ Css style

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 2-10-2010 12:38 |แสดงโพสต์ทั้งหมด

css-bgstyle2.jpg

 

เป็นเทคนิคอีกเทคหนึ่งหนึ่งที่ใช้ทำเว็บได้อย่างเนียนกับการทีึ่ใส่พื้นหลังแล้วไม่ต้องมีรอยต่อกันทำแบบ Fix ไปเลยโดยใช้css style มาใส่ใน html

ขั้นตอนที่ 1.
ที่มาว่าทำไมต้องใช้ css style (css ย่อมาจาก Cascading Style Sheets) เดิมการใส่พื้นหลังกับเว็บเราใส่โดยใช้คำสั่งจาก body คือ <body background=bg.jpg> เป็นต้น แต่ผลของการที่จะเกิดพื้นหลังจะไม่ fix คือพอสิ้นสุดความสูงของพื้นหลังแล้วก็จะมีรอยต่อ เริ่มต้นจากหัวพื้นหลังดังภาพ วิธีการแก้แบบเก่าคือ ต้องคำนวนให้ความสูงของภาพที่มาเป็นพื้นหลังให้เยอะๆ เข้าใว้ ผลที่ออกมาคือ ทำให้เว็บโหลดช้า

 

bgcss.jpg

 

css-bgstyle1.jpg



ขั้นตอนที่ 2.
วิธีการแก้ไขโดยใช้คำสั่ง css มาประยุกต์ เนื่องจากเรามีภาพที่จะมาเป็นพื้นพื้นหลังในการออกแบบเว็บที่มีความสูงจำกัดและต้องการให้ Fix จากด้านบนสุด เราก็สามารถใช้โคด css มาใส่ในตำแหน่งด้านบนของ html ดังตัวอย่าง แล้วทำการเปลี่ยนที่อยู่ของภาพ จากนั้นก็ลองรันหน้าเว็บใน Browser ดู พื้นหลังก็จะทำการ Fix ด้านบนสุดดั่งใจ

 

code-html-css.jpg

 

css-bgstyle.jpg

 



สรุป เป็นเทคนิควิธีการใส่โคด css เข้า html ทำให้เกิดจาก Fix ของภาพที่เรามาทำพื้นหลังนั้นเอง เทคนิควิธีการง่ายๆ แต่ก็ทำให้งานออกแบบเว็บเราดูเนียนขึ้นเยอะ

ขอปัญญาเกิดแด่ท่าน

ไทยกราฟ ดอท คอม

by อ.ธนวิสุทธิ์

Rank: 1

โพสต์เมื่อ 10-12-2010 22:43 |แสดงโพสต์ทั้งหมด
ขอบคุณคราฟ

Rank: 5Rank: 5

โพสต์เมื่อ 17-12-2010 10:45 |แสดงโพสต์ทั้งหมด
เทคนิคดีๆ ที่เรามองข้าม

Rank: 5Rank: 5

โพสต์เมื่อ 25-12-2010 12:08 |แสดงโพสต์ทั้งหมด
ดีมากเลยครับ

Rank: 5Rank: 5

โพสต์เมื่อ 27-12-2010 22:19 |แสดงโพสต์ทั้งหมด
ว้าว...  กำลังจะศึกษาอยู่พอดีครับ
ขอบคุณมากครับ

Rank: 2

โพสต์เมื่อ 20-1-2011 10:55 |แสดงโพสต์ทั้งหมด
ขอบคุณค่ะ
ความทรงจำใหม่... หัวใจเดิม

Rank: 1

โพสต์เมื่อ 19-3-2011 05:32 |แสดงโพสต์ทั้งหมด
ขอบคุณ ทีแบ่งนะคับ

Rank: 2

โพสต์เมื่อ 30-9-2011 19:32 |แสดงโพสต์ทั้งหมด
ขอบคุณค่ะ

Thaigraph

GMT+7, 23-7-2019 17:54 , Processed in 0.121698 second(s), 21 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books