• Twitter
  • Facebook
  • Google+
  • RSS Feed

วันเสาร์ที่ 5 ตุลาคม พ.ศ. 2556

สอนทำหน้า login + css รูปแบบ Flat UI

เขียนโดย ที่ ไม่มีความคิดเห็น:
ป้ายกำกับ: ,
 
เริ่มต้นกับการเขียนครั้งแรกของตัวเอง ถ้าอาจารย์ไม่สั่งให้ทำงานคงไม่คิดที่จะเขียนเองรอสูบของชาวอย่างเดียว 555+
เรามาเริ่มกันดีกว่าครับ ไม่อยากดราม่า


เอากันว่าสืบเนื่องมาจากกระทู้ Flat UI ที่ได้เคยโพสไว้ก่อนหน้านี้แล้ว ตอนนี้ก่อเข้าสู่ยุคใหม่ของ GUI

 login


เริ่มต้นผมจะกำหนดส่วนของ body มันก่อนคล้ายกับ เป็นพื้นดิน ก่อนจะมีต้นนั้นล่ะ (อธิบายไม่ถูกวุ่ย พึ่งเขียนครั้งแรกทำใจนะครับ คนอ่าน)

 ส่วนการนำเอาไปใช้ เอาโค้ดเนี่ยที่ให้ไป Save ลงในไฟล์ .css










body {
  font: 13px/20px "Lucida Grande", Tahoma, Verdana, sans-serif; /*ขนาดและชนิดของ font */
  color: #404040;  /*สีของตัวอักษร*/
  background: #f17b7b;    /*ส่วนนี้เป็น สีของพื้นหลัง*/
}

/*ส่วนของ container ก่อแปลได้ตามตัวเลยที่ครับ ที่เก็บของ ส่วนนี้จะเป็นอะไรก่อตามที่ ยัดๆไว้*/

.container {
  margin: 100px auto; /* คือการปรับส่วนของ container ให้อยู่ตรงกลางครับ*/
  width: 640px; /*ขนาดความกว้างของที่เก็บนั้นๆ*/

}

/*ส่วนของ login ก่อขึ้นรูปแล้วล่ะครับ*/

.login {
  position: relative; /*อันนี้ไม่ค่อยเข้าใจเด๋วมาแก้ให้ที่นะ*/
  margin: 0 auto; /*กำหนดให้มันอยู่ตรงกลางนั้นล่ะครับ*/
  padding: 40px 20px 20px; /*padding จะเป็นการกำหนดระยะห่างจากข้อความภายใน login ถึงขอบ*/
  width: 400px; /*ความกว้าง*/
  height: 275px; /*ความสูง*/
  background: #ededed; /*สีของพื้นหลัง*/
}

/*เป็นส่วนของ Header ของ login ครับ */

.login h1 {
  margin: -20px -20px 0px;
  line-height: 40px;
  font-size: 15px;
  font-weight: normal;
  color:#777;
  text-align: center;
  text-shadow: 0 1px white;

}

.login p {
  margin: 20px 0 0;
}

.login p:first-child {
  margin-top: 0;
}

.login input[type=Username], .login input[type=Password], .login input[type=txtEmail] {
  width: 278px; /* ขนาดของความยาว input*/
}

 

/*  เป็นส่วนของ Remember Me ครับ  */

.login p.remember_me {
  float: left;
  line-height: 30px;
}

.login p.remember_me label {
  font-size: 12px;
  color: #777;
  cursor: pointer;
}

 

.login p.remember_me input {
  position: relative;
  bottom: 1px;
  margin-right: 4px;
  vertical-align: middle;
}

 

/*  น่าจะเป็ขนาดกับชนิดของ font ในช่อง input เรานะครับ */

input {
  font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif;
  font-size: 14px;
}

 

/*  เป็นการกำหนดของช่องที่เรา Input   */

input[type=Username], input[type=Password] , input[type=txtEmail] {
  margin: 5px 60px 0px 55px;
  padding: 0 10px;
  width: 200px;
  height: 40px;
  color: #404040;
  background: white;


}

 

/*  เป็นการกำหนดของช่องที่เรา Input   แต่เฉพาะตอนที่เรากดนะครับ เลยใช้คำสั่ง focus พอกดปุ๊ปเปลี่ยนสีไรงี้*/

input[type=Username]:focus, input[type=Password]:focus , input[type=txtEmail]:focus {
  border-color: #e4e4e4;
  outline-color: #e4e4e4;
  outline-offset: 0;
}

/*  เป็นการกำหนดของปุ่มของเราครับ   */

input[type=submit] ,input[type=button] {
  margin: 0px -60px 0px 90px;
  padding: 0 30px;
  height: 40px;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  background: #0099FF;
  border: 1px #CCC;
  outline: 0;
}

 

/*  เป็นการกำหนดของปุ่มของเราครับ แต่เป็นส่วนของเรากดครับ กดปุ๊ปสีเปลี่ยนครับ  */

input[type=submit]:active ,input[type=button]:active {
  background: #00CCFF;
  border-color: #9eb9c2 #b3c0c8 #b4ccce;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

 

 

.lt-ie9 input[type=txtUsername], .lt-ie9 input[type=txtpassword] {
  line-height: 34px;
}



ส่วนการเรียกใช้ในไฟล์ของ HTML,  PHP อะไรก่อตามแต่ที่ใช้กันได้มผจะยกตัวอย่างของ html ล่ะกันครับ


เมื่อสร้างไฟล์ HTML มาก่อจะได้โค้ด

 


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>









เราก่อจะใช้การเรียกใช้โค้ด CSS กัน ในที่นี้ไฟล์ css ผมชื่อ style1 เก็บไว้ในโฟลเดอร์ชื่อ css










<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<link rel="stylesheet" href="css/style1.css">
</head>
















เรียกใช้ปุ๊ปก่อเติมโค้ดส่วนนี้ไปใน body นะครับ








<div class="container">
  <div class="login">
    <h1>Have an account? Sign in</h1>
    <form method="post" action="">
    <table width="100%" border="0" cellpadding="00" cellspacing="0">
  <tr>
    <td align="center"></td>
  </tr>
</table>

      <p><input type="Username" name="txtUsername" value="" placeholder="Username or Email" ></p>
      <p><input type="Password" name="txtPassword" value="" placeholder="Password"></p>
      <p class="submit">


                                 <input type="button" name="commit" value="Login" onclick="window.location.href='main.html'" >
      				<input type="submit" name="commit" value="Sign Up" id="submit" ></a>


</p>   
     <p class="remember_me">
    <label>
         <label>
          <input type="checkbox" name="checkbox" id="remember_me" value="1">
          Remember me
        </label>
        </label>
         </p>
    </form>
  </div>
</div>




































































ไม่มีความคิดเห็น:















แสดงความคิดเห็น




















        

      










สมัครสมาชิก:
ส่งความคิดเห็น (Atom)