เลย์เอาต์ (Layouts) ใน HTML

เลย์เอาต์ HTML ระบุการจัดวางองค์ประกอบบนหน้าเว็บ HTML มีหลายองค์ประกอบ semantic HTML ที่กำหนดส่วนต่างๆ ของหน้าเว็บ

องค์ประกอบ semantic HTML สำหรับเลย์เอาต์:

เทคนิคสำหรับเลย์เอาต์หน้าเว็บ HTML:

• CSS float property
• CSS flexbox
• CSS framework
• CSS grid
• HTML tables

ตัวอย่าง

<!DOCTYPE html>
<html>
<style>
  * { box-sizing: border-box; }
  body { color: #000; background-color: #8BC6EC; background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%); text-align: center; }
  header { background-color: #000; padding: 20px; text-align: center; color: white; }
  nav { float: left; width: 20%; height: 200px; background: #282828; padding: 60px 10px; }
  nav ul { list-style-type: none; padding: 0; }
  nav ul li a { text-decoration: none; color: #fff; }
  article { float: left; padding: 80px 10px; width: 80%; background-color: #fff; height: 200px; text-align: center; }
  section:after { content: ""; display: table; clear: both; }
  footer { background-color: #000; padding: 20px; text-align: center; color: white; }
</style>
<body>
<h1>ตัวอย่าง HTML Layouts</h1>
<header>นี่คือ Header</header>
<section>
  <nav>
    <ul>
      <li><a href="#">หน้าแรก</a></li>
      <li><a href="#">เกี่ยวกับเรา</a></li>
      <li><a href="#">ติดต่อ</a></li>
    </ul>
  </nav>
  <article>นี่คือองค์ประกอบ article</article>
</section>
<footer>นี่คือ Footer</footer>
</body>
</html>

ผลลัพธ์

แสดงหน้าเว็บที่มีโครงสร้าง: header, nav (ซ้าย), article (ขวา), footer ใช้ float layout