กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

เค้าโครงเว็บไซต์ CSS


เค้าโครงเว็บไซต์

เว็บไซต์มักจะแบ่งออกเป็นส่วนหัว เมนู เนื้อหา และส่วนท้าย:

มีการออกแบบเลย์เอาต์มากมายให้เลือก อย่างไรก็ตาม โครงสร้างด้านบนเป็นหนึ่งในโครงสร้างที่พบบ่อยที่สุด และเราจะพิจารณาอย่างละเอียดยิ่งขึ้นในบทช่วยสอนนี้


หัวข้อ

ส่วนหัวมักจะอยู่ที่ด้านบนของเว็บไซต์ (หรือด้านล่างเมนูนำทางด้านบนขวา) มักจะมีโลโก้หรือชื่อเว็บไซต์:

ตัวอย่าง

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

ผลลัพธ์

Header



แถบนำทาง

แถบนำทางประกอบด้วยรายการลิงก์ที่จะช่วยให้ผู้เยี่ยมชมนำทางผ่านเว็บไซต์ของคุณ:

ตัวอย่าง

/* The navbar container */
.topnav {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Links - change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

ผลลัพธ์


เนื้อหา

เลย์เอาต์ในส่วนนี้มักจะขึ้นอยู่กับผู้ใช้เป้าหมาย เลย์เอาต์ที่พบบ่อยที่สุดคือหนึ่ง (หรือรวมเข้าด้วยกัน) ดังต่อไปนี้:

  • 1 คอลัมน์ (มักใช้สำหรับเบราว์เซอร์มือถือ)
  • 2 คอลัมน์ (มักใช้สำหรับแท็บเล็ตและแล็ปท็อป)
  • เค้าโครง 3 คอลัมน์ (ใช้สำหรับเดสก์ท็อปเท่านั้น)

1 คอลัมน์:

 

2 คอลัมน์:

 

3 คอลัมน์:

เราจะสร้างเค้าโครง 3 คอลัมน์ และเปลี่ยนเป็นเค้าโครง 1 คอลัมน์บนหน้าจอขนาดเล็ก:

ตัวอย่าง

/* Create three equal columns that float next to each other */
.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

ผลลัพธ์

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

เคล็ดลับ:หากต้องการสร้างเค้าโครงแบบ 2 คอลัมน์ ให้เปลี่ยนความกว้างเป็น 50% หากต้องการสร้างเค้าโครง 4 คอลัมน์ ให้ใช้ 25% เป็นต้น

เคล็ดลับ:คุณสงสัยหรือไม่ว่ากฎ @media ทำงานอย่างไร อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในบท CSS Media Queries ของเรา

เคล็ดลับ:วิธีที่ทันสมัยกว่าในการสร้างเค้าโครงคอลัมน์คือการใช้ CSS Flexbox อย่างไรก็ตาม ไม่รองรับใน Internet Explorer 10 และเวอร์ชันก่อนหน้า หากคุณต้องการการสนับสนุน IE6-10 ให้ใช้ทุ่น (ดังที่แสดงด้านบน)

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับโมดูลเลย์เอาต์กล่องแบบยืดหยุ่นโปรดอ่านบท CSS Flexbox ของเรา


คอลัมน์ไม่เท่ากัน

เนื้อหาหลักเป็นส่วนที่ใหญ่ที่สุดและสำคัญที่สุดของไซต์ของคุณ

เป็นเรื่องปกติที่มี ความกว้างของคอลัมน์ ไม่เท่ากันดังนั้นพื้นที่ส่วนใหญ่จึงสงวนไว้สำหรับเนื้อหาหลัก เนื้อหาด้านข้าง (ถ้ามี) มักถูกใช้เป็นการนำทางทางเลือกหรือเพื่อระบุข้อมูลที่เกี่ยวข้องกับเนื้อหาหลัก เปลี่ยนความกว้างตามที่คุณต้องการ จำไว้ว่าควรรวมกันได้ 100%:

ตัวอย่าง

.column {
  float: left;
}

/* Left and right column */
.column.side {
  width: 25%;
}

/* Middle column */
.column.middle {
  width: 50%;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

ผลลัพธ์

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit...


ส่วนท้าย

ส่วนท้ายจะอยู่ที่ด้านล่างของหน้า มักจะมีข้อมูลเช่นลิขสิทธิ์และข้อมูลติดต่อ:

ตัวอย่าง

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

ผลลัพธ์

Footer

เค้าโครงเว็บไซต์ที่ตอบสนอง

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

เคยได้ยินเกี่ยวกับW3Schools Spacesไหม? ที่นี่คุณสามารถสร้างเว็บไซต์ของคุณตั้งแต่เริ่มต้นหรือใช้เทมเพลตและโฮสต์ได้ฟรี

เริ่มต้นฟรี ❯

* ไม่ต้องใช้บัตรเครดิต