ต้นแบบเว็บไซต์ CSS

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

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

มีหลายรูปแบบต่างๆ ที่คุณสามารถเลือกใช้ได้ แต่โครงสร้างดังกล่าวเป็นโครงสร้างที่พบบ่อยที่สุดหนึ่ง และเราจะศึกษาอย่างละเอียดในนี้

หัวเว็บ

แถวนำทาง (header) ปกติอยู่ที่ด้านบนของเว็บไซต์ (หรือด้านล่างของแถวนำทาง) มันปกติจะมีสัญลักษณ์ (logo) หรือชื่อเว็บไซต์:

ตัวอย่าง

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

ผลลัพธ์:

หัวเว็บ

ทดลองด้วยตัวเอง

แถวนำทาง

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

ตัวอย่าง

/* ตัวแทน navbar */
.topnav {
  overflow: hidden;
  background-color: #333;
{}
/* ลิงก์ Navbar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
{}
/* ลิงก์ - เปลี่ยนสีเมื่อเห็นด้วย */
.topnav a:hover {
  background-color: #ddd;
  color: black;
{}

ผลลัพธ์:

ทดลองด้วยตัวเอง

เนื้อหา

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

  • 1-คอลัมน์ตัวแบบจัดละแวก (ใช้สำหรับเครื่องนำหน้าที่เคลื่อนที่)
  • 2-คอลัมน์ตัวแบบจัดละแวก (ใช้สำหรับเครื่องพกพาและเครื่องคอมพิวเตอร์น้ำเนียน)
  • 3-คอลัมน์ตัวแบบจัดละแวก (ใช้สำหรับเครื่องคอมพิวเตอร์)

1-คอลัมน์：

2-คอลัมน์：

3-คอลัมน์：

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

ตัวอย่าง

/* สร้างสามคอลัมน์ที่เท่ากัน และวางข้างๆ กัน */
.column {
  float: left;
  width: 33.33%;
{}
/* ล้าง floating หลังจากคอลัมน์ */
.row:after {
  content: "";
  display: table;
  clear: both;
{}
/* แบบจัดละแวกปฏิสัมพันธ์ - ทำให้สามคอลัมน์จุดตั้งแต่ด้านบน แทนที่จะวางข้างๆ กันในหน้าจอที่เล็ก (ความกว้างเป็น 600 พิกเซลหรือน้อยกว่า) */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  {}
{}

ผลลัพธ์:

คู่มือเทคโนโลยีเว็บไซต์ที่สมบูรณ์

คู่มือของเราครอบคลุมทุกๆ ด้านของเทคโนโลยีเว็บไซต์

นี่รวมถึงมาตรฐานเทคโนโลยี W3C อย่างเช่น HTML, CSS, XML และเทคโนโลยีอื่น ๆ อย่าง JavaScript, PHP, SQL และอื่น ๆ

เครื่องมือทดสอบตัวอย่างออนไลน์

ใน CodeW3C.com เรามีหลายพันตัวอย่าง

ด้วยการใช้เครื่องมือแก้ไขออนไลน์ของเรา คุณสามารถแก้ไขตัวอย่างนี้และทดสอบรหัสได้:

รูปแบบการเรียนรู้ที่ง่ายต่อการเข้าใจ

เวลาเป็นทองคำ ดังนั้น เราให้คุณเนื้อหาที่ง่ายต่อการเรียนรู้:

ที่นี่ คุณสามารถได้รับความรู้ที่คุณต้องการโดยการใช้รูปแบบที่ง่ายต่อการเข้าใจ:

ทดลองด้วยตัวเอง

คำเตือน：ถ้าต้องการสร้างแบบจัดละแวก 2 คอลัมน์ เปลี่ยนความกว้างเป็น 50% ถ้าต้องการสร้างแบบจัดละแวก 4 คอลัมน์ ใช้ 25%

คำเตือน：คุณอยากจะรู้ว่ากฎ @media ทำงานได้อย่างไร? โปรดอ่านคู่มือของเรา CSS การคำนึงถึงมีเดียว เรียนรู้มากกว่าเกี่ยวกับความรู้ที่เกี่ยวข้องในบทนี้

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

ถ้าคุณต้องการข้อมูลเพิ่มเติมเกี่ยวกับโมดูลแบบจัดละแวกแบบยอดแบบเร่งตัว (Flexible Box Layout) โปรดอ่านคู่มือของเรา CSS Flexbox คู่มือ

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

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

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

ตัวอย่าง

.column {
  float: left;
{}
/* คอลัมน์ด้านซ้ายและด้านขวา */
.column.side {
  width: 25%;
{}
/* คอลัมน์กลาง */
.column.middle {
  width: 50%;
{}
/* แบบจัดละแวกปฏิสัมพันธ์ - ทำให้สามคอลัมน์จุดตั้งแต่ด้านบน แทนที่จะวางข้างๆ กัน */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  {}
{}

ผลลัพธ์:

คู่มือเทคโนโลยีเว็บไซต์ที่สมบูรณ์

คู่มือของเราครอบคลุมทุกๆ ด้านของเทคโนโลยีเว็บไซต์

นี่รวมถึงมาตรฐานเทคโนโลยี W3C อย่างเช่น HTML, CSS, XML และเทคโนโลยีอื่น ๆ อย่าง JavaScript, PHP, SQL และอื่น ๆ

เครื่องมือทดสอบตัวอย่างออนไลน์

ใน CodeW3C.com เรามีหลายพันตัวอย่าง

ด้วยการใช้เครื่องมือแก้ไขออนไลน์ของเรา คุณสามารถแก้ไขตัวอย่างนี้และทดสอบรหัสได้:

รูปแบบการเรียนรู้ที่ง่ายต่อการเข้าใจ

เวลาเป็นทองคำ ดังนั้น เราให้คุณเนื้อหาที่ง่ายต่อการเรียนรู้:

ที่นี่ คุณสามารถได้รับความรู้ที่คุณต้องการโดยการใช้รูปแบบที่ง่ายต่อการเข้าใจ:

ทดลองด้วยตัวเอง

ฝั่งบน

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

ตัวอย่าง

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

ผลลัพธ์:

ฝั่งบน

ทดลองด้วยตัวเอง

การออกแบบเว็บไซต์ที่ตอบสนองได้

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

ทดลองด้วยตัวเอง