การจัดวางเว็บไซต์แบบคอลัมน์เดียวแบบง่ายๆ ใน CSS

ในบทเรียนนี้ เราจะฝึกสร้าง การจัดวางเว็บไซต์แบบคอลัมน์เดียวแบบง่ายๆ ลองมา สร้างตัวอย่างการจัดวางแบบนี้กัน:

มาเริ่มลงมือทำกัน โดยทั่วไปการจัดวางแต่ละครั้งมักจะ เริ่มต้นด้วย div หลักชื่อ wrapper ซึ่งครอบคลุมเนื้อหาทั้งหมดของเว็บไซต์:

<div id="wrapper">
	
</div>

ในกรณีของเรา wrapper จะถูกจัดวางไว้ตรงกลาง หน้าจอ:

#wrapper {
	width: 800px;
	margin: 50px auto;
}

และยังมีเส้นขอบด้วย:

#wrapper {
	width: 800px;
	margin: 50px auto;
	border: 1px solid black;
}

ทีนี้มาสร้างโครงสร้างหลักของหน้าจากัน มันจะประกอบด้วยเมนูและเนื้อหา หลัก - คอนเทนต์:

<div id="wrapper">
	<div id="menu">
		
	</div>
	<div id="content">
		
	</div>
</div>

มาเพิ่มเนื้อหาเข้าไปในบล็อกของเรา:

<div id="wrapper">
	<div id="menu">
		<a href="#">link text 1</a>
		<a href="#" class="active">link text 2</a>
		<a href="#">link text 3</a>
		<a href="#">link text 4</a>
		<a href="#">link text 5</a>
	</div>
	<div id="content">
		<h1>Proin tristique lorem</h1>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

ตอนนี้สามารถเพิ่มสไตล์ให้กับบล็อกของเราได้แล้ว มาเพิ่มสไตล์ให้กับเมนูกัน:

#menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	background-color: #484848;
}
#menu a {
	margin: 0 5px;
	padding: 15px 25px;
	text-decoration: none;
	color: #fff;
	font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
	color: #484848;
	background-color: #fff;
}

และตอนนี้มาเพิ่มสไตล์ให้กับองค์ประกอบเนื้อหา:

#content {
	padding: 0 30px 20px;
}
#content h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
#content p {
	padding: 0 10px;
	margin-bottom: 5px;
	font: 18px/1.3 Arial;
	text-align: justify;
}

ตอนนี้เราสามารถรวบรวมโค้ดทั้งหมดเข้าด้วยกันได้:

<div id="wrapper">
	<div id="menu">
		<a href="#">link text 1</a>
		<a href="#" class="active">link text 2</a>
		<a href="#">link text 3</a>
		<a href="#">link text 4</a>
		<a href="#">link text 5</a>
	</div>
	<div id="content">
		<h1>Proin tristique lorem</h1>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

#wrapper {
	width: 800px;
	margin: 50px auto;
	border: 1px solid black;
}

#menu {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
	background-color: #484848;
}
#menu a {
	margin: 0 5px;
	padding: 15px 25px;
	text-decoration: none;
	color: #fff;
	font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
	color: #484848;
	background-color: #fff;
}

#content {
	padding: 0 30px 20px;
}
#content h1 {
	text-align: center;
	margin-top: 0;
	margin-bottom: 10px;
}
#content p {
	padding: 0 10px;
	margin-bottom: 5px;
	font: 18px/1.3 Arial;
	text-align: justify;
}

คำแนะนำที่ 1

สะดวกที่สุดคือการกำหนดระยะห่างจากบนลงล่าง ตัวอย่างเช่น เรามีเมนูและเนื้อหา และระหว่างพวกมัน - มีพื้นที่ว่าง เห็นได้ชัดว่า พื้นที่นี้สามารถสร้างได้จากระยะห่างด้านล่าง ของเมนู, ระยะห่างด้านบนของเนื้อหา, หรือผลกระทบพร้อมกันของทั้งสองอย่าง ในกรณีนี้ ควรกำหนดระยะห่างด้านล่างให้กับเมนู และลบระยะห่างด้านบน padding และ margin เริ่มต้น สำหรับ h1 ออกจากเนื้อหา

คำแนะนำที่ 2

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

คำแนะนำที่ 3

สมมติว่ามีระยะห่างระหว่างสององค์ประกอบ และในกรณีนี้ ไม่มีความแตกต่างทางสายตา ว่าจะเลือกอะไรสำหรับระยะห่าง - margin หรือ padding ในกรณีนี้ให้เลือก margin เนื่องจาก มันคือสิ่งที่ควรสร้างระยะห่างระหว่าง องค์ประกอบ

การจัดวางเว็บไซต์แบบคอลัมน์เดียวแบบง่ายๆ ใน CSS

คำแนะนำที่ 1

คำแนะนำที่ 2

คำแนะนำที่ 3

แบบฝึกหัด