เค้าโครงเว็บไซต์ 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;
}
ผลลัพธ์
เค้าโครงเว็บไซต์ที่ตอบสนอง
ด้วยการใช้โค้ด CSS บางส่วนข้างต้น เราได้สร้างเลย์เอาต์เว็บไซต์ที่ตอบสนอง ซึ่งแตกต่างกันไปตามสองคอลัมน์และคอลัมน์เต็มความกว้าง ขึ้นอยู่กับความกว้างของหน้าจอ:
เคยได้ยินเกี่ยวกับW3Schools Spacesไหม? ที่นี่คุณสามารถสร้างเว็บไซต์ของคุณตั้งแต่เริ่มต้นหรือใช้เทมเพลตและโฮสต์ได้ฟรี
เริ่มต้นฟรี ❯* ไม่ต้องใช้บัตรเครดิต