HTML နှင့် CSS ဖြင့် မာတိကာ ပုံစံများ အပေါ် လေ့ကျင့်ခန်း

မာတိကာပုံစံများကို တည်ဆောက်ခြင်းနှင့် ၎င်းတို့ကို အကြောင်းအရာဖြင့် ဖြည့်စွပ်ခြင်းကို လေ့ကျင့်ကြပါစို့။ ဥပမာအနေဖြင့် အောက်ပါကဲ့သို့ မာတိကာပုံစံတစ်ခုကို ပြုလုပ်ကြည့်ကြပါစို့-

ပထမဦးစွာ မာတိကာ၏ အခြေခံဖွဲ့စည်းပုံကို ပြုလုပ်ကြပါစို့-

<div class="wrapper">
	<header>
		...
	</header>
	<div class="container">
		<aside class="left">
			left
		</aside>
		<main>
			...
		</main>
		<aside class="right">
			right
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

ယခု ဟက်ဒါနှင့် ပတ်သက်၍ ကြည့်ကြပါစို့။ နမူနာတွင် မြင်တွေ့ရသည့်အတိုင်း ဟက်ဒါတွင် ဝဘ်ဆိုဒ်၏ အမည်နှင့် မီနူးရှိမည်ဖြစ်သည်။ ထို့အပြင် ဤဘလောက်များသည် ဘယ်ဘက်အစွန်းမှ တူညီသော အကွာအဝေးတွင် ရှိကြသည်။ ထိုသို့သောအခြေအနေတွင် ၎င်းတို့ကို ယေဘုယျမိဘတစ်ဦးဖြင့် ပေါင်းစည်းပြီး ဘလောက်များကို တစ်ခုတည်းသော အရာတစ်ခုအဖြစ် ရွှေ့ခြင်းသည် ယုတ္တိရှိသည်-

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename"></div>
			<nav></nav>
		</div>
	</header>
</div>

ဟက်ဒါဘလောက်များ၏ အကြောင်းအရာကို ထည့်သွင်းကြပါစို့-

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">home</a>
				<a href="#" class="active">blog</a>
				<a href="#">photos</a>
				<a href="#">about us</a>
				<a href="#">contacts</a>
			</nav>
		</div>
	</header>
</div>

ယခု ဟက်ဒါဘလောက်များ၏ စတိုင်များကို ရေးကြပါစို့။ ဤသို့ပြုလုပ်စဉ် ဟက်ဒါ၏ အမြင့်ကို သတ်မှတ်မထားပါနှင့် - ၎င်း၏ကိုယ်ပိုင်အကြောင်းအရာဖြင့် ကျယ်ပြန့်သွားစေပါစို့-

header {
	border: 1px solid black;
}
.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}

ကွန်တိန်နာထဲတွင် ကော်လံသုံးခုပါသည့် ကုဒ်ကို ရေးကြပါစို့။ ဤသို့ပြုလုပ်စဉ် အကြောင်းအရာ၏ အမြင့်ကို သတ်မှတ်မထားပါနှင့် - ၎င်း၏ကိုယ်ပိုင်အကြောင်းအရာဖြင့် ဖွဲ့စည်းပုံဖြစ်လာစေပါစို့-

.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}

ယခု ကျွန်ုပ်တို့၏ မာတိကာ၏ ကျန်ရှိသော စတိုင်များကို ရေးပြီး ကျွန်ုပ်တို့၏ ပြဿနာအတွက် အဖြေကို ရယူကြပါစို့-

<div class="wrapper">
	<header>
		<div class="block">
			<div class="sitename">site.com</div>
			<nav>
				<a href="#">home</a>
				<a href="#" class="active">blog</a>
				<a href="#">photos</a>
				<a href="#">about us</a>
				<a href="#">contacts</a>
			</nav>
		</div>
	</header>
	<div class="container">
		<aside class="left">
			left
		</aside>
		<main>
			<h1>Our blog</h1>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
			<p>
				...
			</p>
		</main>
		<aside class="right">
			right
		</aside>
	</div>
	<footer>
		site.com
	</footer>
</div>

* {
	box-sizing: border-box;
}

.wrapper {
	width: 1100px;
	margin: 30px auto;
	border: 1px solid black;
}
header {
	border: 1px solid black;
}
.container {
	display: flex;
}
main {
	width: 660px;
	padding: 20px;
	border: 1px solid black;
}
.left {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
.right {
	width: 200px;
	margin-left: 20px;
	padding: 20px;
	border: 1px solid black;
}
footer {
	padding: 30px 0;
	border: 1px solid black;
	text-align: center;
}

.block {
	margin: 20px 0 50px 220px;
}
.sitename {
	margin-bottom: 10px;
	font: 20px Arial;
}
nav {
	display: flex;
	width: 600px;
	border: 1px solid black;
}
nav a {
	padding: 10px;
	color: blue;
	text-decoration: none;
	font: 15px Arial;
}
nav a:hover, nav a.active {
	color: red;
	text-decoration: underline;
}
main h1 {
	font: 20px "Times New Roman";
}
main p {
	margin: 10px 0;
	text-align: justify;
	font: 15px Arial;
}

လက်တွေ့လေ့ကျင့်ခန်းများ

အောက်ပါလင့်ခ်တွင် 1.zip မာတိကာကို ဒေါင်းလုဒ်ရယူပါ။ ၎င်းကို ဘရောက်ဇာတွင် ဖွင့်ပြီး ထိုနမူနာအတိုင်း စာမျက်နှာကို ပြန်လုပ်ပါ။

အောက်ပါလင့်ခ်တွင် 2.zip မာတိကာကို ဒေါင်းလုဒ်ရယူပါ။ ၎င်းကို ဘရောက်ဇာတွင် ဖွင့်ပြီး ထိုနမူနာအတိုင်း စာမျက်နှာကို ပြန်လုပ်ပါ။