หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

ภาชนะบรรจุ

สร้างเว็บมือถือหรือเดสก์ท็อป UIS ได้อย่างง่ายดาย

ภาชนะบรรจุมีสองส่วน:

  • โครงสร้างคอนเทนเนอร์ HTML
  • ไฟล์ CSS ที่จัดรูปแบบโครงสร้าง HTML

โครงสร้าง HTML คือ:

 <div class = "container">
    <div class = "header"> </div>
    <div class = "left"> </div>
    <div class = "middle"> </div>
    <div class = "ขวา"> </div>
    <div class = "footer"> </div>
</div>

และ CSS ควรดาวน์โหลดจากที่นี่

แต่ละส่วนคอนเทนเนอร์สามารถมีคอนเทนเนอร์อื่นหรือแท็ก HTML รูปแบบหรือส่วนประกอบใด ๆ

คุณควรหลีกเลี่ยงการใส่ส่วนประกอบภายในคอนเทนเนอร์ แต่ออกจากส่วนคอนเทนเนอร์

ขนาดเริ่มต้นของแต่ละส่วนคอนเทนเนอร์คือ:

 - ส่วนหัว: ความกว้าง: 100%, ความสูง: 10%
- ซ้าย: ความกว้าง: 10%, ความสูง: 80%
- กลาง: ความกว้าง: 80%, ความสูง: 80%
- ขวา: ความกว้าง: 10%, ความสูง: 80%
- ส่วนท้าย: ความกว้าง: 100%, ความสูง: 10%

ใช้คลาสของเราเพื่อเปลี่ยนขนาดเริ่มต้นเหล่านี้หรือแม้แต่ทำให้ส่วนใด ๆ ไม่ปรากฏ

หากต้องการแสดงส่วนใด ๆ ให้ใช้หนึ่งในชั้นเรียนเหล่านี้: ไม่มี , W00 , H00

เพื่อกำหนดความกว้างอื่นให้ใช้คลาสเหล่านี้: W05 , W10 , W15 , W20 , W25 , W30 , W35 , W40 , W45 , W50 , W55 , W60 , W65 , W70 , W75 , W80 , W85 , W90 , W95 , W100

เพื่อกำหนดความสูงอื่นใช้คลาสเหล่านี้: H05 , H10 , H15 , H20 , H25 , H30 , H35 , H40 , H45 , H50 , H55 , H60 , H65 , H70 , H75 , H80 , H85 , H90 , H95 , H100

จำนวนในชั้นเรียนคือเปอร์เซ็นต์ที่จะนำไปใช้กับส่วนคอนเทนเนอร์หรือ DIV

การใช้คอนเทนเนอร์เป็นไปได้ในการสร้างเลย์เอาต์ใด ๆ ที่ต้องการ

ดูตัวอย่างของเราเพื่อทำความเข้าใจวิธีการใช้คอนเทนเนอร์

ภาชนะบรรจุมีส่วนประกอบมากมายที่จะใช้เช่นกัน บางคนใช้ CSS เพื่อจัดรูปแบบเท่านั้น

ไอคอนที่ใช้ในส่วนประกอบของเราถูกนำมาจากฟอนต์เวอร์ชันเดสก์ท็อปที่ยอดเยี่ยมและรวมอยู่ในการดาวน์โหลด

ไอคอนเหล่านี้ถูกเปลี่ยนชื่อด้วยตนเองเพื่อให้ชื่อของพวกเขาเริ่มต้นด้วย "fa-" เพื่อเป็นแหล่งที่มาของกรรมสิทธิ์ของพวกเขา: Font Awesome

คุณสามารถมีส่วนร่วมในคอนเทนเนอร์ที่สร้างธีมที่น่าทึ่งและมุ่งไปที่ที่เก็บของเรา
การบริจาค (Patreon) หรือคำแนะนำ

 -
-เบราว์เซอร์ที่รองรับ (เวอร์ชันขั้นต่ำ) [ความเข้ากันได้: 92.73% ของเบราว์เซอร์ที่ใช้แล้วทั่วโลกที่ 2020-06-02]:
  -
   เบราว์เซอร์: เวอร์ชัน: แพลตฟอร์ม
  -
 - Chrome: 49: PC/Mac
 - Chrome: 81: Android
 - ขอบ: 16: พีซี
 - Firefox: 34: PC/Mac
 - Firefox: 68: Android
 - โอเปร่า: 36: PC/Mac
 - โอเปร่า: 46: iOS, Android (Opera Mobile)
 - Safari: 13.1: Mac
 - Safari: 13.4: iOS
 - Samsung: 11.1: Android
  -

- เบราว์เซอร์รองรับ? [ความเข้ากันได้ที่ไม่รู้จัก: 1.98% ที่ 2020-06-02]:
 - UC เบราว์เซอร์: 12.12: Android

-ไม่รองรับเบราว์เซอร์ [ไม่เข้ากันได้: 2.70% ที่ 2020-06-02]:
 - เช่น
 - โอเปร่ามินิ
 - QQ

หมายเหตุ: เวอร์ชันขั้นต่ำถูกนำมาจาก https://caniuse.com
กำลังมองหาคุณสมบัติ CSS ที่เราใช้
-
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด