ล่าสุดการพัฒนาเว็บบทเรียน
×

CSS เกี่ยวกับการสอน

CSS บ้าน CSS บทนำ CSS วากยสัมพันธ์ CSS ทำอย่างไร CSS สี CSS ภูมิหลัง CSS พรมแดน CSS อัตรากำไรขั้นต้น CSS การขยายความ CSS สูงกว้าง CSS ข้อความ CSS แบบอักษร CSS การเชื่อมโยง CSS รายการ CSS ตาราง CSS รูปแบบกล่อง ร่าง CSS การแสดงผล CSS CSS ความกว้างสูงสุด CSS ตำแหน่ง CSS ลอย CSS Inline-block CSS เป็นเส้นตรง CSS combinators CSS หลอกชั้น CSS องค์ประกอบหลอก CSS แถบนำทาง CSS เมนูแบบเลื่อนลง CSS คำแนะนำเครื่องมือ CSS แกลเลอรี่ภาพ CSS ภาพทึบ CSS ภาพแบบ Sprite CSS attr Selectors รูปแบบ CSS CSS เคาน์เตอร์

CSS3

CSS3 บทนำ CSS3 มุมโค้งมน CSS3 แสดงสินค้าชายแดน CSS3 ภูมิหลัง CSS3 สี CSS3 การไล่ระดับสี CSS3 เงา CSS3 ข้อความ CSS3 แบบอักษร CSS3 แปลง 2D CSS3 แปลง 3D CSS3 การเปลี่ยน CSS3 ภาพเคลื่อนไหว CSS3 ภาพ CSS3 ปุ่ม CSS3 การให้เลขหน้า CSS3 หลายคอลัมน์ CSS3 หน้าจอผู้ใช้ CSS3 กล่องขนาด CSS3 Flexbox CSS3 สื่อแบบสอบถาม CSS3 ตัวอย่าง MQ

CSS การออกแบบเว็บที่ตอบสนอง

การออกแบบเว็บที่ตอบสนอง แนะนำ การออกแบบเว็บที่ตอบสนอง วิวพอร์ต การออกแบบเว็บที่ตอบสนอง ตารางมุมมอง การออกแบบเว็บที่ตอบสนอง สื่อแบบสอบถาม การออกแบบเว็บที่ตอบสนอง ภาพ การออกแบบเว็บที่ตอบสนอง วิดีโอ การออกแบบเว็บที่ตอบสนอง กรอบ

CSS Examples

CSS ตัวอย่าง CSS ทดสอบ CSS ใบรับรอง

CSS References

CSS การอ้างอิง CSS selectors CSS ฟังก์ชั่น CSS หูอ้างอิง CSS Web Safe แบบอักษร CSS Animatable CSS หน่วย CSS PX-EM แปลง CSS สี CSS ค่าสี CSS ชื่อสี CSS3 สนับสนุนเบราว์เซอร์

 

CSSเค้าโครง - ลอยและชัดเจน


float คุณสมบัติระบุหรือไม่ว่าเป็นองค์ประกอบที่ควรลอย

clear ทรัพย์สินที่ใช้ในการควบคุมการทำงานขององค์ประกอบลอย





ลอยทรัพย์สิน

ในการใช้งานที่ง่ายที่สุดที่ float คุณสมบัติสามารถใช้ในการตัดข้อความรอบภาพ

ตัวอย่างต่อไปนี้ระบุว่าภาพที่ควรจะลอยไปทางขวาในข้อความ:

ตัวอย่าง

img {
    float: right;
    margin: 0 0 10px 10px;
}
ลองตัวเอง»

clear ทรัพย์สิน

clear ทรัพย์สินที่ใช้ในการควบคุมการทำงานขององค์ประกอบลอย

องค์ประกอบหลังจากองค์ประกอบลอยจะไหลอยู่รอบ ๆ เพื่อหลีกเลี่ยงนี้ใช้ clear คุณสมบัติ

clear คุณสมบัติที่ระบุด้านขององค์ประกอบองค์ประกอบลอยไม่ได้รับอนุญาตให้ลอย:

ตัวอย่าง

div {
    clear: left;
}
ลองตัวเอง»

clearfix Hack - overflow: auto;

หากเป็นองค์ประกอบสูงกว่าองค์ประกอบที่มีมันและมันจะลอยก็จะล้นด้านนอกของภาชนะที่ใช้บรรจุ

จากนั้นเราก็สามารถเพิ่ม overflow: auto; ไปยังองค์ประกอบที่มีการแก้ไขปัญหานี้:

ตัวอย่าง

.clearfix {
    overflow: auto;
}
ลองตัวเอง»

เว็บตัวอย่างเค้าโครง

มันเป็นเรื่องธรรมดาที่จะทำรูปแบบเว็บทั้งหมดโดยใช้ float ทรัพย์สิน:

ตัวอย่าง

div {
    border: 3px solid blue;
}

.clearfix {
    overflow: auto;
}

nav {
    float: left;
    width: 200px;
    border: 3px solid #73AD21;
}

section {
    margin-left: 206px;
    border: 3px solid red;
}
ลองตัวเอง»

ตัวอย่าง

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

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

เป็นภาพที่มีคำอธิบายที่ลอยไปทางด้านขวา
ให้ภาพที่มีคำบรรยายใต้ภาพลอยไปทางด้านขวา

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

การสร้างเมนูแนวนอน
ใช้ลอยกับรายการของเชื่อมโยงหลายมิติเพื่อสร้างเมนูแนวนอน

การสร้างหน้าแรกของตารางโดยไม่ต้อง
ใช้ลอยในการสร้างหน้าแรกที่มีส่วนหัวส่วนท้ายเนื้อหาซ้ายและเนื้อหาหลัก


คุณสมบัติทั้งหมด CSS ลอย

คุณสมบัติ ลักษณะ
clear ระบุที่ด้านข้างขององค์ประกอบที่องค์ประกอบลอยไม่ได้รับอนุญาตให้ลอย
float ระบุหรือไม่ว่าเป็นองค์ประกอบที่ควรลอย
overflow ระบุสิ่งที่เกิดขึ้นหากเนื้อหาล้นกล่ององค์ประกอบของ
overflow-x ระบุว่าจะทำอย่างไรกับขอบด้านซ้าย / ขวาของเนื้อหาถ้ามันล้นพื้นที่เนื้อหาขององค์ประกอบ
overflow-y ระบุว่าจะทำอย่างไรกับด้านบนขอบ / ด้านล่างของเนื้อหาถ้ามันล้นพื้นที่เนื้อหาขององค์ประกอบ