W3.CSS

W3.CSS ပင်မစာမျက်နှာ W3.CSS နိဒါန်း W3.CSS အရောင်များ W3.CSS ကွန်တိန်နာများ W3.CSS Panels များ W3.CSS နယ်နိမိတ်များ W3.CSS ကတ်များ W3.CSS ပုံသေများ W3.CSS ဖောင့်များ W3.CSS Google W3.CSS စာသား W3.CSS Round W3.CSS Padding W3.CSS အနားသတ်များ W3.CSS ရုပ်ထွက် W3.CSS ခလုတ်များ W3.CSS မှတ်စုများ W3.CSS Quotes W3.CSS သတိပေးချက်များ W3.CSS ဇယားများ W3.CSS စာရင်းများ W3.CSS ပုံများ W3.CSS ထည့်သွင်းမှုများ W3.CSS တံဆိပ်များ W3.CSS Tag W3.CSS အိုင်ကွန်များ W3.CSS တုံ့ပြန်မှု W3.CSS Layout W3.CSS Animations W3.CSS Effects များ W3.CSS ဘားများ W3.CSS Dropdowns W3.CSS Accordions W3.CSS လမ်းညွှန် W3.CSS Sidebar W3.CSS Tabs များ W3.CSS Pagination W3.CSS တိုးတက်မှုဘားများ W3.CSS Slideshow W3.CSS Modal W3.CSS Tooltips W3.CSS ဇယားကွက် W3.CSS ကုဒ် W3.CSS စစ်ထုတ်မှုများ W3.CSS လမ်းကြောင်းများ W3.CSS Case W3.CSS ရုပ်ဝတ္ထု W3.CSS အတည်ပြုခြင်း W3.CSS ဗားရှင်းများ W3.CSS မိုဘိုင်း

W3.CSS အရောင်များ

W3.CSS အရောင်အတန်းများ W3.CSS Color Material ပါ။ W3.CSS Color Flat UI W3.CSS အရောင် Metro UI W3.CSS Color Win8 W3.CSS Color iOS ပါ။ W3.CSS အရောင်ဖက်ရှင် W3.CSS Color Libraries များ W3.CSS Color Schemes W3.CSS Color Themes W3.CSS Color Generator

ဝဘ်အဆောက်အဦ

ဝဘ်မိတ်ဆက် ဝဘ် HTML ဝဘ် CSS ဝဘ် JavaScript ဝဘ်လက်ကွက် Web Band Web Catering ဝဘ် စားသောက်ဆိုင် ဝဘ်ဗိသုကာ

ဥပမာများ

W3.CSS ဥပမာများ W3.CSS သရုပ်ပြများ W3.CSS Templates များ

ကိုးကား

W3.CSS အကိုးအကား W3.CSS ဒေါင်းလုဒ်များ

တီးဝိုင်း

ဝဘ်စာမျက်နှာဖန်တီးနည်း

စက်အားလုံး (ဒက်စ်တော့၊ လက်ပ်တော့၊ တက်ဘလက်၊ နှင့် ဖုန်းအားလုံးတွင် ကြည့်ကောင်းစေမည့် တုံ့ပြန်မှုအပြည့်အဝရှိသော ဝဘ်စာမျက်နှာကို ဖန်တီးနည်း-

Band Template

အရိုးစုတစ်ခုဖန်တီးပါ။

ယခင်အခန်းမှ အရိုးစုကို အသုံးပြုပါ။

ပုံတစ်ပုံတည်းပါရှိသော ရိုးရှင်းသော အရိုးစု

တီးဝိုင်း

ဥပမာ

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>The Band</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body>

<!-- Start Content -->
<div id="home" class="w3-content">

<!-- Image -->
<img src="img_la.jpg" alt="The Band" style="width:100%">

<!-- End Content -->
</div>

</body>
</html>

Navigation ထည့်ပါ။

ပင်မ၊ အကြောင်း၊ အဖွဲ့ဝင်များနှင့် အဆက်အသွယ်များသို့ သွားလာရန်အတွက် လမ်းကြောင်းပြဘားတစ်ခု ထည့်ပါ။

တီးဝိုင်း

ဥပမာ

<!-- Navigation (Stays on Top) -->
<div class="w3-top w3-bar w3-black">
<a href="#home" class="w3-bar-item w3-button">Home</a>
<a href="#about" class="w3-bar-item w3-button">About</a>
<a href="#members" class="w3-bar-item w3-button">Members</a>
<a href="#contact" class="w3-bar-item w3-button">Contact</a>
</div>


Slide Show ကိုထည့်ပါ။

ပုံအား ဘေးထွက်ရှိုးအဖြစ် ပြောင်းပါ။

ဥပမာ

<!-- Slides -->
<img class="slides" src="img_la.jpg" width="100%">
<img class="slides" src="img_ny.jpg" width="100%">
<img class="slides" src="img_ch.jpg" width="100%">
<script>
w3.slideshow(".slides", 1500);
</script>

အကြောင်းထည့်ပါ။

အဖွဲ့အကြောင်း အချက်အလက်အချို့ကို ထည့်ပါ။

တီးဝိုင်း

This is our band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Example

<!-- About -->
<div id="about" class="w3-container w3-padding-32">
<h1 class="w3-center">The Band</h1>
<p>This is our band website. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Add Band Members

Add a picture of each band member

Band Members

အမည် ၁
John
အမည် ၂
Paul
အမည် ၃
Lisa

Example

<!-- Members -->
<div id="members" class="w3-container w3-padding-32">
<div class="w3-row w3-center">

<div class="w3-third">
<img src="img_bandmember.jpg" alt="Name1" style="width:60%">
</div>

<div class="w3-third">
<img src="img_bandmember.jpg" alt="Name2" style="width:60%">
</div>

<div class="w3-third">
<img src="img_bandmember.jpg" alt="Name3" style="width:60%">
</div>

</div>
</div>

Add Contact Info

Add contact info and a contact form.

CONTACT

Chicago, US
Phone: +00 151515
Email: [email protected]

Fan? Drop a note!



Powered by w3.css

Example

<div id="contact" class="w3-container w3-center w3-padding-32">
<h2 class="w3-wide">CONTACT</h2>
Chicago, US<br>
Phone: +00 151515<br>
Email: [email protected]<br>
<p class="w3-opacity w3-center"><i>Fan? Drop a note!</i></p>

<form action="/action_page.php" target="_blank">
<input class="w3-input" type="text" placeholder="Name" required name="Name">
<input class="w3-input" type="text" placeholder="Email" required name="Email">
<input class="w3-input" type="text" placeholder="Message" required name="Message">
<br>
<button class="w3-button w3-black" type="submit">SEND</button>
</form>

<img src="map.jpg" class="w3-image" style="width:100%">
</div>