Anda di halaman 1dari 7

Salin kode dibawah ini lalu simpan dengan nama file style.

css

body {
background-color: #fff;
}
.container {
width: 850px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 30px;
border-bottom: 1px solid #eee;
}
.content {
margin-top: 20px;
margin-bottom: 20px;
}
.notification {
text-align: center;
}
/** button **/
.btn {
text-decoration: none;
color: #000;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;
Cari tau u/ tampilan apa ??

background: rgb(241,241,241); /* Old browsers */


background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(232,232,232,1)
100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(241,241,241,1) 0%,rgba(232,232,232,1)
100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(241,241,241,1) 0%,rgba(232,232,232,1)
100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1',
endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}
/** table **/
.table {}
.table tr th,
.table tr td {}
.table thead {
background: rgb(241,241,241); /* Old browsers */
background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(232,232,232,1)
100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(241,241,241,1) 0%,rgba(232,232,232,1)
100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(241,241,241,1) 0%,rgba(232,232,232,1)
100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1',
endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}
.table thead tr th {
padding: 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.table thead tr th:last-child {
border-right: 1px solid #ccc;
}
.table tbody tr:first-child td {
border-top: 1px solid #eee;
}
.table tbody tr td {
padding: 5px 10px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.table tbody tr td:last-child {
border-right: 1px solid #ccc;
}
/** form **/
.table-form {
padding: 0;
}
.table-form tr td {
padding: 5px;
}
label {
display: block;
}
.form {
padding: 3px;
}

Salin kode dibawah ini lalu simpan dengan nama file style.css

body {
background-color: #fff;
}
.container {
width: 900px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 30px;
border-bottom: 1px solid #eee;
}
.content {
margin-top: 20px;
margin-bottom: 20px;
}
.notification {
text-align: center;
}
/** button **/
.btn {
text-decoration: none;
color: #000;
padding: 10px;
border: 1px solid #ccc;
cursor: pointer;

background: rgb(241,241,241); /* Old browsers */


background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(232,232,232,1)
100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(241,241,241,1) 0%,rgba(232,232,232,1)
100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(241,241,241,1) 0%,rgba(232,232,232,1)
100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1',
endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}
/** table **/
.table {}
.table tr th,
.table tr td {}
.table thead {
background: rgb(241,241,241); /* Old browsers */
background: -moz-linear-gradient(top, rgba(241,241,241,1) 0%, rgba(232,232,232,1)
100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(241,241,241,1) 0%,rgba(232,232,232,1)
100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(241,241,241,1) 0%,rgba(232,232,232,1)
100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1',
endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}
.table thead tr th {
padding: 10px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.table thead tr th:last-child {
border-right: 1px solid #ccc;
}
.table tbody tr:first-child td {
border-top: 1px solid #eee;
}
.table tbody tr td {
padding: 5px 10px;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.table tbody tr td:last-child {
border-right: 1px solid #ccc;
}
/** form **/
.table-form {
padding: 0;
}
.table-form tr td {
padding: 5px;
}
label {
display: block;
}
.form {
padding: 3px;
}

Halaman tambah dan edit

<div class="main"></div>
Hapus seluruh sintaks yang ada didalam div class main tersebut sampai kepenutupnya
namun tidak dengan menghapus penutup div main tersebut, jika sudah dihapus salin kode
dibawah ini dan tempel dibagian bawah div main yang baru saja di hapus lalu simpan
dengan nama file tambah.html
<h3>Tambah Anggota / Edit</h3>
<div class="content">
<table class="table-form" border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="20%"><label for="nama">Nama Lengkap</label></td>
<td colspan="3"><input name="nama" id="nama" type="text" class="form"></td>
</tr>
<tr>
<td><label for="tempat_lahir">Tempat Lahir</label></td>
<td><input name="tempat_lahir" id="tempat_lahir" type="text" class="form"></td>
<td><label>Tanggal Lahir</label></td>
<td>
<select name="tgl_lahir" class="form">
<option>xx</option>
<option>xx</option>
<option>xx</option>
</select>
<select name="bln_lahir" class="form">
<option>xx</option>
<option>xx</option>
<option>xx</option>
</select>
<select name="thn_lahir" class="form">
<option>xxxx</option>
<option>xxxx</option>
<option>xxxx</option>
</select>
</td>
</tr>
<tr>
<td valign="top"><label for="alamat">Alamat</label></td>
<td valign="top" colspan="2">
<textarea name="alamat" id="alamat" class="form" cols="50"
rows="8"></textarea>
</td>
<td valign="top">
<div>
<label for="kota">Kota</label>
<input type="text" name="kota" id="kota" class="form">
</div>
<div>
<label for="negara">Negara</label>
<input type="text" name="negara" id="negara" class="form">
</div>
<div>
<label for="kode_pos">Kode Pos</label>
<input type="number" name="kode_pos" id="kode_pos" class="form">
</div>
</td>
</tr>
<tr>
<td><label for="hp">No. HP</label></td>
<td colspan="3"><input name="hp" id="hp" type="number" class="form"></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td colspan="3"><input name="email" id="email" type="text" class="form"></td>
</tr>
<tr>
<td><label for="tingg_badan">Tinggi Badan</label></td>
<td colspan="3"><input name="tingg_badan" id="tingg_badan" type="number"
class="form"></td>
</tr>
<tr>
<td><label for="berat_badan">Berat Badan</label></td>
<td colspan="3"><input name="berat_badan" id="berat_badan" type="number"
class="form"></td>
</tr>
</table>
</div>
<input type="submit" class="btn" value="Simpan">
Halaman Detail Anggota
Cara membuat halaman detail anggota ini masih sama seperti membuat halaman tambah
dan edit anggota, silahkan ikuti cara tersebut lalu lalu gunakan kode dibawah ini dan simpan
dengan nama detail.html

<h3>Detail Anggota</h3>
<div class="content">
<table class="table-form" border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="20%">Nama Lengkap</td>
<td width="1%">:</td>
<td>Bahasaweb.com</td>
</tr>
<tr>
<td>Tempat/Tgl. Lahir</td>
<td width="1%">:</td>
<td>Tangerang, 03 Juni 1993</td>
</tr>
<tr>
<td>Alamat</td>
<td width="1%">:</td>
<td>Jl. Raya Indonesia Indah, Tangerang, Indonesia 15213</td>
</tr>
<tr>
<td>No. Hp</td>
<td width="1%">:</td>
<td>08595959595</td>
</tr>
<tr>
<td>Email</td>
<td width="1%">:</td>
<td>admin@bahasaweb.com</td>
</tr>
<tr>
<td>Tinggi Badan</td>
<td width="1%">:</td>
<td>171CM</td>
</tr>
<tr>
<td>Berat Badan</td>
<td width="1%">:</td>
<td>65KG</td>
</tr>
</table>
</div>
<a href="" class="btn">Kembali</a>
Halaman Pemberitahuan
Nah ini adalah bagian halaman yang terakhir yang akan kita buat, caranya masih sama
dengan cara diatas, salin kode dibawah ini dan ikuti cari pembuatan halaman anggota
setelah itu simpan nama nama pemberitahuan.html

<div class="content">
<div class="notification">
<h3>Apakah anda yakin ingin menghapus anggota ini?</h3>
<a href="" class="btn">Batal</a> <a href="" class="btn">Lanjutkan</a>
</div>
</div>