ဘယ်လို

အိမ်လုပ်နည်း

မီနူးများ

အိုင်ကွန်ဘား မီနူးအိုင်ကွန် ဘာဂျာ တက်ဘ်များ ဒေါင်လိုက် တက်ဘ်များ တက်ဘ် ခေါင်းစီးများ စာမျက်နှာ တဘ်များ အပြည့်အစုံ တဘ်များကို ရွှေ့ပါ။ ထိပ်တန်းလမ်းညွှန် တုံ့ပြန်မှု Topnav အိုင်ကွန်များဖြင့် Navbar ရှာရန် မီနူး Search Bar ပုံသေဘေးဘား စာမျက်နှာလမ်းညွှန် တုံ့ပြန်မှုဘေးထွက်ဘား မျက်နှာပြင်အပြည့် လမ်းညွှန်ချက် ကင်းဗတ် မီနူး Sidenav ခလုတ်များကို နှိပ်ပါ။ အိုင်ကွန်များပါသော ဘေးဘား အလျားလိုက် Scroll Menu ဒေါင်လိုက် မီနူး အောက်ခြေလမ်းညွှန် တုံ့ပြန်မှုအောက်ခြေရေကြောင်း Bottom Border Nav Links ညာဘက်ညှိထားသော မီနူးလင့်ခ်များ ဗဟိုပြုမီနူးလင့်ခ် တူညီသော အနံ မီနူးလင့်ခ်များ ပုံသေမီနူး Scroll တွင် Slide Down Bar Scroll တွင် Navbar ကိုဝှက်ထားပါ။ Scroll တွင် Navbar ကို လျှော့ပါ။ Sticky Navbar ပုံပေါ်ရှိ Navbar Dropdowns များကို ရွှေ့ပါ။ Dropdowns ကိုနှိပ်ပါ။ Cascading Dropdown Topnav တွင် dropdown Sidenav တွင် dropdown Resp Navbar Dropdown Subnavigation Menu Dropup Mega Menu မိုဘိုင်းမီနူး Curtain Menu ပြိုကျနေသော ဘေးဘား ပြိုကျနေသော ဘေးဘောင် Pagination Breadcrumbs ခလုတ်အုပ်စု ဒေါင်လိုက်ခလုတ်အုပ်စု Sticky Social Bar ဆေးပြားညွှန်း တုံ့ပြန်မှုဆိုင်ရာ ခေါင်းစီး

ပုံများ

ဆလိုက်ရှိုး ဆလိုက်ရှိုးပြခန်း Modal ပုံများ မီးပုံး Responsive Image Grid ရုပ်ပုံဂရစ် တဘ်ပြခန်း ပုံထပ်ဆင့်မှိန် ပုံထပ်ဆင့်ဆလိုက် ပုံကို ထပ်ဆင့်ချဲ့ပါ။ ပုံထပ်ဆင့်ခေါင်းစဉ် ပုံထပ်ဆင့်သင်္ကေတ ရုပ်ပုံအကျိုးသက်ရောက်မှုများ အဖြူအမည်းပုံ ရုပ်ပုံစာသား ရုပ်ပုံစာသား ပိတ်ဆို့ခြင်းများ ဖောက်ထွင်းမြင်ရသော ရုပ်ပုံစာသား စာမျက်နှာအပြည့်ပုံ ပုံပေါ်ဖောင် သူရဲကောင်းပုံရိပ် မှုန်ဝါးသော နောက်ခံပုံ Scroll တွင် Bg ကိုပြောင်းပါ။ ဘေးချင်းကပ်ပုံများ လုံးဝန်းသောပုံများ ကိုယ်ပွားပုံများ တုံ့ပြန်မှုပုံရိပ်များ စင်တာပုံများ ပုံသေးများ နယ်နိမိတ်ပုံ အသင်းနှင့်တွေ့ဆုံပါ။ ကပ်နေသောပုံ ပုံတစ်ပုံကိုလှန်ပါ။ ပုံတစ်ခုလှုပ်ပါ။ အစုစုပြခန်း အစုစုကို စီစစ်ခြင်း။ ရုပ်ပုံချဲ့ခြင်း။ ပုံရိပ်ချဲ့ဖန်ခွက် ပုံနှိုင်းယှဉ်ဆလိုက်ဒါ Favicon

ခလုတ်များ

သတိပေးခလုတ်များ ကောက်ကြောင်းခလုတ်များ ခလုတ်များ ခွဲပါ။ ကာတွန်းခလုတ်များ ခလုတ်များ နွမ်းလာသည်။ ပုံပေါ်ခလုတ် ဆိုရှယ်မီဒီယာခလုတ်များ Read More လျှော့ဖတ်ပါ။ ခလုတ်များဖွင့်ခြင်း။ ဒေါင်းလုဒ်ခလုတ်များ ဆေးလုံးခလုတ်များ အကြောင်းကြားချက်ခလုတ် Icon ခလုတ်များ Next/prev ခလုတ်များ Nav တွင် နောက်ထပ်ခလုတ် ခလုတ်များပိတ်ခြင်း။ စာသားခလုတ်များ အဝိုင်းခလုတ်များ အပေါ်ဆုံးခလုတ်ကို ရွှေ့ပါ။

ပုံစံများ

Login Form စာရင်းသွင်းပုံစံ ငွေထုတ်ပုံစံ ဆက်သွယ်ရန်ပုံစံ လူမှုရေးဝင်ရောက်မှုပုံစံ ဖောင်စာရင်းသွင်းပါ။ အိုင်ကွန်များဖြင့် ဖောင်ပုံစံ သတင်းလွှာ စုဖွဲ့ထားသောပုံစံ တုံ့ပြန်မှုပုံစံ ပေါ့ပ်အပ်ဖောင် Inline ပုံစံ ထည့်သွင်းမှုအကွက်ကို ရှင်းလင်းပါ။ နံပါတ်မြှားများကို ဝှက်ပါ။ စာသားကို ကလစ်ဘုတ်သို့ ကူးယူပါ။ သက်ဝင်လှုပ်ရှားရှာဖွေမှု ရှာဖွေရန်ခလုတ် မျက်နှာပြင်အပြည့် ရှာဖွေမှု Navbar တွင် ထည့်သွင်းသည့်အကွက် Navbar တွင် Login Form စိတ်ကြိုက်စစ်ဆေးပုံး/ရေဒီယို စိတ်ကြိုက်ရွေးချယ်ပါ။ ပြောင်းရန် Checkbox ကိုစစ်ဆေးပါ။ Caps Lock ကို ထောက်လှမ်းပါ။ Enter တွင် Trigger ခလုတ် စကားဝှက်အတည်ပြုခြင်း။ စကားဝှက် မြင်နိုင်မှုကို ပြောင်းပါ။ အဆင့်များစွာပုံစံ အလိုအလျောက်ဖြည့်ပါ။ အလိုအလျောက်ဖြည့်စွက်ခြင်းကို ပိတ်ပါ။ စာလုံးပေါင်းစစ်ဆေးခြင်းကို ပိတ်ပါ။ ဖိုင်တင်ခြင်းခလုတ် ဗလာထည့်သွင်းမှု အတည်ပြုခြင်း။

စစ်ထုတ်မှုများ

စာရင်းစစ် Filter ဇယား ဒြပ်စင်များကို စစ်ထုတ်ပါ။ Filter Dropdown စာရင်းခွဲပါ။ စာလုံးပေါင်းဇယား

စားပွဲများ

မြင်းကျားအစင်း စားပွဲ စင်တာဇယားများ ဇယားကွက် အကျယ် ဘေးချင်းကပ် ဇယားများ တုံ့ပြန်မှုဇယားများ နှိုင်းယှဉ်ဇယား

နောက်ထပ်

မျက်နှာပြင်အပြည့် ဗီဒီယို ပုံစံသေတ္တာများ Modal ကိုဖျက်ပါ။ အချိန်ဇယား Scroll Indicator တိုးတက်မှုဘားများ ကျွမ်းကျင်မှုဘား Range Sliders ကိရိယာအကြံပြုချက်များ မျက်နှာပြင် အစိတ်အပိုင်းကို ဖိထားပါ။ ပေါ့ပ်အပ်များ အထူးပင် ပြက္ခဒိန် HTML ပါဝင်သည်။ လုပ်ရန်စာရင်း လက်ဆွဲများ ကြယ်အဆင့်သတ်မှတ်ချက် အသုံးပြုသူ အဆင့်သတ်မှတ်ချက် ထပ်ဆင့်အကျိုးသက်ရောက်မှု ချစ်ပ်ပြားများ ဆက်သွယ်ပါ။ ကတ်များ ခေါက်ကတ် ပရိုဖိုင်ကတ် ထုတ်ကုန်ကတ် သတိပေးချက်များ အရေးပေါ်အတွက်ခေါ်သည် မှတ်စုများ တံဆိပ်များ စက်ဝိုင်းများ HR ပုံစံ ကူပွန် စာရင်းအဖွဲ့ ကျည်ဆံမပါတဲ့ စာရင်း တုံ့ပြန်သောစာသား Cutout စာသား တောက်ပသောစာသား ပုံသေ အောက်ခြေ စေးကပ်သောဒြပ်စင် တူညီသောအမြင့် ရှင်းလင်းချက် တုံ့ပြန်မှု Floats Snackbar မျက်နှာပြင်အပြည့် ပြတင်းပေါက် Scroll Drawing Smooth Scroll Gradient Bg Scroll ကပ်နေသော ခေါင်းစီး Scroll တွင် ခေါင်းစီးကို လျှော့ပါ။ စျေးနှုန်းဇယား Parallax အချိုးအစား တုံ့ပြန်မှု iframes ကြိုက်/မကြိုက် ခလုတ်ဖွင့်ပါ။ ဖျောက်/ပြရန် ပြောင်းရန် အမှောင်မုဒ်ကို ပြောင်းပါ။ စာသားပြောင်းပါ။ အတန်းပြောင်းရန် အတန်းကိုထည့်ပါ။ အတန်းကို ဖယ်ရှားပါ။ Active အတန်း သစ်ပင်မြင်ကွင်း ပစ္စည်းကို ဖယ်ရှားပါ။ အော့ဖ်လိုင်း ထောက်လှမ်းခြင်း။ Hidden Element ကိုရှာပါ။ ဝဘ်စာမျက်နှာကို ပြန်ညွှန်းပါ။ Zoom Hover Flip Box ဒေါင်လိုက်ဗဟို DIV ရှိ အလယ်ခလုတ် Hover တွင် အကူးအပြောင်း မြှားများ၊ ပုံစံမျိုးစုံ ဒေါင်းလုဒ်လင့် အမြင့်ဒြပ်စင် Browser Window စိတ်ကြိုက် Scrollbar Scrollbar ကို ဖျောက်ပါ။ ပြ/အတင်း Scrollbar ကိရိယာကို ကြည့်ပါ။ Contenteditable Border နေရာယူသူ အရောင် စာသားရွေးချယ်မှု အရောင် ကျည်ဆန်အရောင် ဒေါင်လိုက်မျဉ်း ပိုင်းခြားခြင်း။ Animate အိုင်ကွန်များ Countdown Timer လက်နှိပ်စက် Page မကြာမီလာမည် ချတ်မက်ဆေ့ချ်များ Popup Chat Window Split Screen သက်သေခံချက်များ အခန်းကောင်တာ Quotes Slideshow ပိတ်နိုင်သော ပစ္စည်းများစာရင်း ပုံမှန် စက်ပစ္စည်း ဖြတ်ပိုင်းများ ဆွဲယူနိုင်သော HTML Element JS မီဒီယာမေးခွန်းများ Syntax Highlighter JS Animations JS ကြိုးအရှည် JS အညွှန်းကိန်း JS Default Parameters လက်ရှိ URL ကိုရယူပါ။ လက်ရှိ မျက်နှာပြင်အရွယ်အစားကို ရယူပါ။ Iframe Elements ကိုရယူပါ။

ဝဘ်ဆိုဒ်

အခမဲ့ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ။ Website တစ်ခုလုပ်ပါ။ Static Website တစ်ခုလုပ်ပါ။ ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (W3.CSS) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (BS3) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (BS4) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ (BS5) ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပြီး ကြည့်ရှုပါ။ Link Tree ဝဘ်ဆိုဒ်တစ်ခုဖန်တီးပါ။ Portfolio တစ်ခုဖန်တီးပါ။ Resume တစ်ခုဖန်တီးပါ။ စားသောက်ဆိုင် Website တစ်ခုလုပ်ပါ။ Business Website တစ်ခုလုပ်ပါ။ WebBook တစ်ခုဖန်တီးပါ။ စင်တာဝဘ်ဆိုဒ် ဆက်သွယ်ရန်အပိုင်း Page အကြောင်း ခေါင်းစီးကြီး နမူနာ ဝဘ်ဆိုဒ်

ဂရစ်

2 ကော်လံ အပြင်အဆင် 3 ကော်လံ အပြင်အဆင် 4 Column Layout ဇယားကွက်ချဲ့ခြင်း။ စာရင်းဇယားကွက်မြင်ကွင်း ရောစပ်ထားသော ကော်လံ အပြင်အဆင် ကော်လံကတ်များ Zig Zag အပြင်အဆင် ဘလော့ အပြင်အဆင်

Google

Google Charts Google Fonts Google ဖောင့်အတွဲများ Google Analytics ကို စနစ်ထည့်သွင်းပါ။

ဘာသာပြန်များ

Weight ပြောင်းပါ။ အပူချိန်ပြောင်းပါ။ အရှည်ပြောင်းပါ။ မြန်နှုန်းကိုပြောင်းပါ။

ဘလော့

Developer အလုပ်တစ်ခုရယူပါ။ Front-End Dev ဖြစ်လာပါ။

လုပ်နည်း - Slideshow Gallery


CSS နှင့် JavaScript ဖြင့် တုံ့ပြန်မှုရှိသော စလိုက်ရှိုးပြခန်းတစ်ခု ဖန်တီးနည်းကို လေ့လာပါ။


ဆလိုက်ရှိုးပြခန်း

ဒြပ်စင်များမှတဆင့် လည်ပတ်ရန် စလိုက်ရှိုးကို အသုံးပြုသည်-

၁/၆

ဝုဒ်

ဝုဒ်
ငါးပြည်
တောင်များနှင့် fjord များ
မြောက်ပိုင်းအလင်း
သဘာဝနှင့် နေထွက်
နှင်းထူထပ်သောတောင်များ


စလိုက်ရှိုးပြခန်းတစ်ခု ဖန်တီးပါ။

အဆင့် 1) HTML ကိုထည့်ပါ

ဥပမာ

<!-- Container for the image gallery -->
<div class="container">

  <!-- Full-width images with number text -->
  <div class="mySlides">
    <div class="numbertext">1 / 6</div>
      <img src="img_woods_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">2 / 6</div>
      <img src="img_5terre_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">3 / 6</div>
      <img src="img_mountains_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">4 / 6</div>
      <img src="img_lights_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">5 / 6</div>
      <img src="img_nature_wide.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <div class="numbertext">6 / 6</div>
      <img src="img_snow_wide.jpg" style="width:100%">
  </div>

  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

  <!-- Image text -->
  <div class="caption-container">
    <p id="caption"></p>
  </div>

  <!-- Thumbnail images -->
  <div class="row">
    <div class="column">
      <img class="demo cursor" src="img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_5terre.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_lights.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_nature.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">
    </div>
    <div class="column">
      <img class="demo cursor" src="img_snow.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">
    </div>
  </div>
</div>

အဆင့် 2) CSS ကိုထည့်ပါ

ရုပ်ပုံပြခန်း၊ နောက်နှင့် ယခင်ခလုတ်များ၊ စာတန်းစာသားနှင့် အစက်များကို ပုံစံဖော်ပါ-

ဥပမာ

* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}


အဆင့် 3) JavaScript ကိုထည့်ပါ။

ဥပမာ

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}