Membuat Halaman Login dengan CSS

Selamat beraktifitas broo, dimanampun Anda berada. Kali ini mimin akan post tutorial cara membuat halaman login yang dilengkapi dengan CSS. langsung saja ya brooo...
berikut coding pemrogamannya bro

<style>
#header {
    width: 100%;
    border-bottom: 1px solid #dcdcdc;
    background: url(images/headerbg.jpg) repeat left;
    height: 100px;
    z-index: 1000;
    -moz-box-shadow: 0px 0px 8px #dcdcdc;
    -webkit-box-shadow: 0px 0px 8px #dcdcdc;
}
    .button {
    cursor: pointer;
    padding: 4px 10px 4px 10px;
    color:#2A0000;
    background: url(images/bg-menu-link.png) repeat left center;
    border: 1px solid #71bb3b;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
}


.inHeader {
    float: center;
    background: url(images/logo.png) no-repeat left center;
    margin: auto;
    width: 920px;
    height: 45px;
    padding: 15px;
    border-right: 0px solid #dcdcdc;
    border-left: 0px solid #dcdcdc;
}
.inHeaderLogin {
    height: 25px;
}

.mosAdmin {
    float: right;
    border: 0px solid #dcdcdc;
    margin: 0 1px 0 auto;
    text-align: right;
    padding: 10px 40px 10px 10px;
    background: url(images/Administrator.png) no-repeat right center;
    text-shadow: 1px 1px #fff;
}
#loginForm {
    width: 400px;
    height: 250px;
    border: 1px solid #dcdcdc;
    float: center;
    text-align: left;
    background:#fff url(images/lock.png) no-repeat left center;
    margin: 50px auto 0 auto;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
}
.headLoginForm {
    width: 380px;
    padding: 10px 0 10px 20px;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 1px 1px #fff;
    text-align: left;
    height: 20px;
    border-bottom: 1px solid #dcdcdc;
    background: url(images/headerbg.jpg) repeat left center;
    -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px;
    -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px;
}
.fieldLogin {
    margin: 30px 5px 0 140px;
}
</style>


<html>
<head>
    <link rel="shortcut icon" href="images/lks.jpg" type="image/x-icon">
<title>Login Admin</title>
</head>

<body>
<div id="header">
    <div class="inHeaderLogin"><font color="#FF0055" size="7" face="Courier New, Courier, monospace"><b>Login</b></font><br><font color="#FF0055" size="7" face="Courier New, Courier, monospace"><b> Admin</b></font></div>
</div>

<div id="loginForm">
    <div class="headLoginForm">
    Login Guru
    </div>
    <div class="fieldLogin">
<form id="form" name="login" action="#" method="post">
        <label>Username</label><br>
        <input type="text" name="nama_admin" class="login"><br>
        <label>Password</label><br>
        <input type="password" name="password" class="login"><br>
        <input type="submit" class="button" name="login" value="Login">
    </form>
    </div>
</div>
</body>
</html>


Cukup ya broo codingnya, berikut penjelasanya..
kode warna biru yang dimulai dari <style> sampai </style> merupakan kode CSS nya.
sedangkan kode warna merah dimulai dari <html></html> merupakan kode dari html nya.
 untuk penggunaan kode CSS sudah dijelaskan sebelumya. 
Baca juga : Apa itu CSS ?
sedangkan dalam kode html terdapat kode <div></div>, dimana di kode <div> tersebut kode css akan dipanggil sesuai namanya
seperti   
<div id="loginForm"> </div>
    <div class="headLoginForm"> </div>

Semua apa yang ada dalam <div> sudah diatur dalam kode CSS diatas, kemudian untuk memanggil gambar sebisa mungkin dimasukan kedalam folder yang sama. untuk menghindari gambar tidak terbaca saat di run kan. Masih kurang jelas gan ? nantikan post tutorial berikutnya yang lebih terperinci.
Setelah selesai membuat pemrogaman silahkan simpan di C:\xampp\htdocs\ tergantung dimana anda menyimpan Xamppnya apakah di D atau C.
misal kita simpan dengan nama login.php  didalam folder htdocs. 
kemudian kita buka browser dengan mengetik http://localhost/login.php  
maka akan tampil seperti berikut

 Sekian tutorial membuat halaman login, kreasikan sendiri bro seselera anda.hahaha semoga bermanfaat
 

0 Response to "Membuat Halaman Login dengan CSS"

Posting Komentar