ဘယ်လို

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

မီနူးများ

အိုင်ကွန်ဘား မီနူးအိုင်ကွန် ဘာဂျာ တက်ဘ်များ ဒေါင်လိုက် တက်ဘ်များ တက်ဘ် ခေါင်းစီးများ စာမျက်နှာ တဘ်များ အပြည့်အစုံ တဘ်များကို ရွှေ့ပါ။ ထိပ်တန်းလမ်းညွှန် တုံ့ပြန်မှု 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 ဖြစ်လာပါ။

လုပ်နည်း - Checkout Form


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


တုံ့ပြန်မှုရှိသော ငွေပေးချေမှုပုံစံ

ငွေတောင်းခံရန်လိပ်စာ


ငွေပေးချေမှု



ငွေပေးချေမှုပုံစံကို ဘယ်လိုဖန်တီးမလဲ။

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

ထည့်သွင်းမှုကို လုပ်ဆောင်ရန် <form> ဒြပ်စင်ကို အသုံးပြုပါ။ ဤအကြောင်းကို ကျွန်ုပ်တို့၏ PHP သင်ခန်းစာ တွင် သင်ပိုမိုလေ့လာနိုင်ပါသည် ။

ဥပမာ

<div class="row">
  <div class="col-75">
    <div class="container">
      <form action="/action_page.php">

        <div class="row">
          <div class="col-50">
            <h3>Billing Address</h3>
            <label for="fname"><i class="fa fa-user"></i> Full Name</label>
            <input type="text" id="fname" name="firstname" placeholder="John M. Doe">
            <label for="email"><i class="fa fa-envelope"></i> Email</label>
            <input type="text" id="email" name="email" placeholder="[email protected]">
            <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
            <input type="text" id="adr" name="address" placeholder="542 W. 15th Street">
            <label for="city"><i class="fa fa-institution"></i> City</label>
            <input type="text" id="city" name="city" placeholder="New York">

            <div class="row">
              <div class="col-50">
                <label for="state">State</label>
                <input type="text" id="state" name="state" placeholder="NY">
              </div>
              <div class="col-50">
                <label for="zip">Zip</label>
                <input type="text" id="zip" name="zip" placeholder="10001">
              </div>
            </div>
          </div>

          <div class="col-50">
            <h3>Payment</h3>
            <label for="fname">Accepted Cards</label>
            <div class="icon-container">
              <i class="fa fa-cc-visa" style="color:navy;"></i>
              <i class="fa fa-cc-amex" style="color:blue;"></i>
              <i class="fa fa-cc-mastercard" style="color:red;"></i>
              <i class="fa fa-cc-discover" style="color:orange;"></i>
            </div>
            <label for="cname">Name on Card</label>
            <input type="text" id="cname" name="cardname" placeholder="John More Doe">
            <label for="ccnum">Credit card number</label>
            <input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
            <label for="expmonth">Exp Month</label>
            <input type="text" id="expmonth" name="expmonth" placeholder="September">

            <div class="row">
              <div class="col-50">
                <label for="expyear">Exp Year</label>
                <input type="text" id="expyear" name="expyear" placeholder="2018">
              </div>
              <div class="col-50">
                <label for="cvv">CVV</label>
                <input type="text" id="cvv" name="cvv" placeholder="352">
              </div>
            </div>
          </div>

        </div>
        <label>
          <input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing
        </label>
        <input type="submit" value="Continue to checkout" class="btn">
      </form>
    </div>
  </div>

  <div class="col-25">
    <div class="container">
      <h4>Cart
        <span class="price" style="color:black">
          <i class="fa fa-shopping-cart"></i>
          <b>4</b>
        </span>
      </h4>
      <p><a href="#">Product 1</a> <span class="price">$15</span></p>
      <p><a href="#">Product 2</a> <span class="price">$5</span></p>
      <p><a href="#">Product 3</a> <span class="price">$8</span></p>
      <p><a href="#">Product 4</a> <span class="price">$2</span></p>
      <hr>
      <p>Total <span class="price" style="color:black"><b>$30</b></span></p>
    </div>
  </div>
</div>


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

တုံ့ပြန်မှုရှိသော အပြင်အဆင်ကိုဖန်တီးရန် CSS Flexbox ကိုသုံးပါ-

ဥပမာ

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}

.col-25 {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
}

.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
}

.col-75 {
  -ms-flex: 75%; /* IE10 */
  flex: 75%;
}

.col-25,
.col-50,
.col-75 {
  padding: 0 16px;
}

.container {
  background-color: #f2f2f2;
  padding: 5px 20px 15px 20px;
  border: 1px solid lightgrey;
  border-radius: 3px;
}

input[type=text] {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}

.icon-container {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 24px;
}

.btn {
  background-color: #04AA6D;
  color: white;
  padding: 12px;
  margin: 10px 0;
  border: none;
  width: 100%;
  border-radius: 3px;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #45a049;
}

span.price {
  float: right;
  color: grey;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
@media (max-width: 800px) {
  .row {
    flex-direction: column-reverse;
  }
  .col-25 {
    margin-bottom: 20px;
  }
}

အကြံပြုချက်- HTML Form အကြောင်းပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ HTML Form Tutorial သို့ သွားပါ ။

အကြံပြုချက်- ဖောင် ပုံစံဒြပ်စင်များကို စတိုင်လ်ပုံစံလုပ်နည်းကို ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Form Tutorial သို့ သွား ပါ။

အကြံပြုချက်- ပြောင်းလွယ်ပြင်လွယ်ရှိသော အကွက်အပြင်အဆင် module အကြောင်း ပိုမိုလေ့လာရန် ကျွန်ုပ်တို့၏ CSS Flexbox ကျူတိုရီရယ် သို့ သွားပါ ။

W3Schools Spaces အကြောင်း ကြားဖူး ပါသလား။ ဤနေရာတွင် သင်သည် သင့်ဝဘ်ဆိုဒ်ကို အစမှအဆုံး ဖန်တီးနိုင်သည် သို့မဟုတ် နမူနာပုံစံတစ်ခုကို အသုံးပြုကာ ၎င်းကို အခမဲ့ လက်ခံဆောင်ရွက်ပေးနိုင်သည်။

❯ အခမဲ့ စတင်လိုက်ပါ။

* ခရက်ဒစ်ကတ်မလိုအပ်ပါ။