Latest web development tutorials
×

CSS หลักสูตร

CSS หลักสูตร CSS แนะนำโดยย่อ CSS ไวยากรณ์ CSS Id และ Class ผู้เลือก CSS สร้าง CSS พื้นหลัง(background) CSS ข้อความ(text) CSS แบบอักษร(Fonts) CSS ลิงค์(link) CSS ลักษณะของรายการ(ul) CSS ตาราง(table) CSS รูปแบบกล่อง CSS กรอบ(border) CSS เส้นแสดงรูปร่าง(outline) CSS ขอบ(margin) CSS การกรอก(padding) CSS การจัดกลุ่มและการสร้างรัง CSS ขนาด(Dimension) CSS แสดงผล(display) CSS ตั้งอยู่(position) CSS ลอย(float) CSS เป็นเส้นตรง(align) CSS การรวมกันของเตอร์ CSS หลอกชั้นเรียน CSS องค์ประกอบหลอก CSS ป้าย CSS เมนูแบบเลื่อนลง CSS แกลเลอรี่ภาพ CSS ภาพใส/ทึบแสง CSS ภาพโมเสคเทคโนโลยี CSS ประเภทสื่อ CSS แอตทริบิวต์เตอร์ CSS ย่อ CSS ตัวอย่าง

CSS3 หลักสูตร

CSS3 หลักสูตร CSS3 แนะนำโดยย่อ CSS3 กรอบ(border) CSS3 พื้นหลัง CSS3 การเปลี่ยนแปลงอย่างค่อยเป็นค่อยไป CSS3 ผลข้อความ CSS3 แบบอักษร CSS3 2D เปลี่ยนแปลง CSS3 3D เปลี่ยนแปลง CSS3 การเปลี่ยนแปลง CSS3 นิเมชั่น CSS3 หลายคอลัมน์ CSS3 ส่วนติดต่อผู้ใช้

CSS ออกแบบที่ตอบสนอง

Viewport ตารางมุมมอง คำสั่งสื่อ ภาพ วีดีโอ(video) กรอบ

CSS คู่มืออ้างอิง

CSS คู่มืออ้างอิง CSS ผู้เลือก CSS อ้างอิงคำพูด CSS Web แบบอักษรปลอดภัย CSS นิเมชั่น CSS หน่วย CSS สี CSS ค่าสี CSS ชื่อสี CSS สีเลขฐานสิบหก

CSS ลอย (ลอย)

CSS ลอย (ลอย) คืออะไร?



ซีเอสเอลอย (ลอย) องค์ประกอบจะเลื่อนไปทางซ้ายหรือขวาองค์ประกอบรอบ ๆ มันจะได้รับการปรับปรุงใหม่

ลอย (ลอย) มักจะใช้สำหรับภาพ แต่ก็เป็นประโยชน์อย่างมากเมื่อรูปแบบเดียวกัน


วิธีองค์ประกอบลอย

องค์ประกอบลอยแนวนอน, หมายความว่าองค์ประกอบเท่านั้นที่สามารถเลื่อนไปทางซ้ายและขวาและไม่สามารถเลื่อนขึ้นและลง

องค์ประกอบลอยจะพยายามที่จะเลื่อนไปทางซ้ายหรือขวาจนขอบด้านนอกข้ามพรมแดนหรืออีกกล่องลอยที่มีกล่องเพื่อให้ห่างไกล

องค์ประกอบหลังจากองค์ประกอบลอยจะมุ่งเน้นไปที่มัน

องค์ประกอบก่อนองค์ประกอบลอยจะไม่ได้รับผลกระทบ

ถ้าภาพจะลอยขวาข้อความต่อไปนี้จะไหลไปรอบ ๆ ที่ด้านซ้ายของมัน

ตัวอย่าง

img
{
float:right;
}

ลอง»


ลอยองค์ประกอบติดกัน

หากคุณใส่องค์ประกอบลอยไม่กี่ใส่กันถ้ามีห้องพักก็จะติดกัน

ที่นี่เราใช้แกลเลอรีรูปภาพคุณสมบัติลอย:

ตัวอย่าง

.thumbnail
{
ลอย: ด้านซ้าย;
ความกว้าง: 110px;
ความสูง: 90px;
margin: 5px;
}

ลอง»


ล้างลอย - ใช้ที่ชัดเจน

หลังจากองค์ประกอบลอยรอบองค์ประกอบที่ปรับปรุงใหม่ในการสั่งซื้อเพื่อหลีกเลี่ยงการนี้ใช้สถานที่ให้บริการที่ชัดเจน

แอตทริบิวต์ที่ชัดเจนระบุองค์ประกอบไม่สามารถปรากฏบนทั้งสองด้านขององค์ประกอบลอย

ใช้คุณสมบัติข้อความที่ชัดเจนที่จะเพิ่มแกลลอรี่ภาพ:

ตัวอย่าง

.text_line
{
clear:both;
}

ลอง»


ตัวอย่าง

ตัวอย่างเพิ่มเติม

ภาพซ้ายเพิ่มเส้นขอบและอัตรากำไรและลอยวรรค

ขอให้เราเพิ่มเส้นขอบของภาพและอัตรากำไรขั้นต้นและวรรคลอยไปทางซ้าย

ชื่อเรื่องและภาพไปลอยที่เหมาะสม

ให้ชื่อและภาพไปลอยที่เหมาะสม

ให้อักษรตัวแรกของลอยวรรคไปทางซ้าย

เปลี่ยนรูปแบบเพื่อให้อักษรตัวแรกของลอยวรรคไปทางซ้าย

ไม่สร้างหน้าเว็บที่มีตาราง

ใช้ลอยในการสร้างหน้าหัวท้ายเนื้อหาซ้ายและเนื้อหาหลัก


ทรัพย์สินทั้งหมด CSS ลอย

"CSS คอลัมน์" ระบุจำนวนรุ่นที่แตกต่างกันของ CSS (CSS1 หรือ CSS2) กำหนดคุณสมบัติ

属性 描述 CSS
clear 指定不允许元素周围有浮动元素。 left
right
both
none
inherit
1
float 指定一个盒子(元素)是否可以浮动。 left
right
none
inherit
1