W3.CSS Case Study
Scratch မှ တုံ့ပြန်မှုရှိသော ဝဘ်ဆိုက်တစ်ခုကို တည်ဆောက်ခြင်း။
ဤအခန်းတွင် ကျွန်ုပ်တို့သည် W3.CSS တုံ့ပြန်မှု ဝဘ်ဆိုက်တစ်ခုကို အစမှ စတင်တည်ဆောက်ပါမည်။
ပထမဦးစွာ၊ ကနဦးမြင်ကွင်းပို့တ်နှင့် W3.CSS သို့ လင့်ခ်တစ်ခုဖြင့် ရိုးရှင်းသော HTML စာမျက်နှာဖြင့် စတင်ပါ။
ဥပမာ
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
ကွန်တိန်နာများတွင် Elements များကိုထည့်ပါ။
ဘုံအနားသတ်များနှင့် အကွက်များထည့်ရန်၊ HTML အစိတ်အပိုင်းများကို ကွန်တိန်နာများအတွင်း ထည့်ပါ (<div class="w3-container">)
သီးခြား <div> ဒြပ်စင်နှစ်ခုကို အသုံးပြု၍ ခေါင်းစီးကို အခြားအကြောင်းအရာနှင့် ခွဲထုတ်ပါ-
ဥပမာ
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
အရောင်အတန်းများ
အရောင်အတန်းများသည် element များ၏အရောင်ကိုသတ်မှတ်သည်။
ဤဥပမာသည် ပထမ <div> ဒြပ်စင်သို့ အရောင်တစ်ခု ထည့်သည်-
ဥပမာ
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
အရွယ်အစားအတန်းများ
အရွယ်အစားအတန်းများသည် အစိတ်အပိုင်းများအတွက် စာသားအရွယ်အစားကို သတ်မှတ်သည်။
ဤဥပမာသည် ခေါင်းစီးဒြပ်စင်နှစ်ခုလုံးသို့ အရွယ်အစားကို ပေါင်းထည့်သည်-
ဥပမာ
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Semantic Elements ကိုသုံးပါ။
အကယ်၍ သင်သည် HTML5 အခေါ်အဝေါ် အကြံပြုချက်များကို လိုက်နာလိုပါက။ ကျေးဇူးပြု၍ လုပ်ပါ။
<div> သို့မဟုတ် <header> ကိုသုံးပါက W3.CSS အတွက် အရေးမကြီးပါ။
ဥပမာ
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Multicolumn Responsive Layout
W3.CSS ဖြင့် ၎င်းသည် multicolumn တုံ့ပြန်မှု အပြင်အဆင်ကို ဖန်တီးရန် လွယ်ကူသည်။
မတူညီသော မျက်နှာပြင်အရွယ်အစားများကို ကြည့်ရှုသောအခါ ကော်လံများသည် ၎င်းတို့ကို အလိုအလျောက် ပြန်စီပေးပါမည်။
ဇယားကွက်စည်းမျဉ်းအချို့-
- အတန်းအတန်း <div class="w3-row-padding">ဖြင့် စတင်ပါ။
- ဇယားကွက်များကို အမြန်ပြုလုပ်ရန် "w3-third" ကဲ့သို့ ကြိုတင်သတ်မှတ်ထားသော အတန်းများကို အသုံးပြုပါ။
- သင့်စာသားအကြောင်းအရာကို ဇယားကွက်ကော်လံများအတွင်း ထည့်ပါ။
ဤဥပမာတွင် အညီအမျှ အကျယ်ရှိသော ကော်လံသုံးခုကို ဖန်တီးနည်းကို ပြသည်-
ဥပမာ
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
ဤဥပမာတွင် အညီအမျှ အကျယ်ရှိသော ကော်လံလေးခုကို ဖန်တီးနည်းကို ပြသည်-
ဥပမာ
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
အနံအမျိုးမျိုးရှိသော ကော်လံများ
ဤနမူနာတွင် အလယ်ကော်လံသည် ပထမနှင့် နောက်ဆုံးကော်လံထက် ပိုကျယ်သော ကော်လံသုံးကော်လံပုံစံကို ဖန်တီးသည်-
ဥပမာ
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
လမ်းကြောင်းပြဘားများ
လမ်းကြောင်းပြဘားသည် စာမျက်နှာ၏ထိပ်တွင် ချထားပေးသည့် လမ်းညွှန်ချက်ခေါင်းစီးတစ်ခုဖြစ်သည်။
ဥပမာ
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
စာမျက်နှာလမ်းညွှန်
ဘေးထွက်လမ်းညွှန်ခြင်းဖြင့်၊ သင့်တွင် ရွေးချယ်စရာများစွာရှိသည်-
- စာမျက်နှာအကြောင်းအရာ၏ ဘယ်ဘက်တွင် လမ်းညွှန်မှုအကန့်ကို အမြဲတမ်းပြသပါ။
- အထူးပြုနိုင်သော၊ "အပြည့်အဝ အလိုအလျောက်" တုံ့ပြန်နိုင်သော ဘေးထွက်လမ်းညွှန်ချက်ကို အသုံးပြုပါ။
- စာမျက်နှာအကြောင်းအရာ၏ ဘယ်ဘက်ခြမ်းရှိ လမ်းကြောင်းပြကွက်ကို ဖွင့်ပါ။
- စာမျက်နှာအကြောင်းအရာအားလုံးအပေါ် လမ်းညွှန်မှုအကန့်ကို ဖွင့်ပါ။
- လမ်းညွှန်မှုအကန့်ကိုဖွင့်သောအခါ စာမျက်နှာအကြောင်းအရာကို ညာဘက်သို့ ပွတ်ဆွဲပါ။
- ဘယ်ဘက်ခြမ်းအစား ညာဖက်ခြမ်းတွင် လမ်းကြောင်းပြကွက်ကို ပြသပါ။
ဤဥပမာသည် စာမျက်နှာအကြောင်းအရာ၏ ဘယ်ဘက်ခြမ်းရှိ လမ်းညွှန်ပြကွက်ကို ဖွင့်ပေးသည်-
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
မီနူးကိုဖွင့်ရန်နှင့် ဝှက်ရန် JavaScript ကိုအသုံးပြုသည်-
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}