CSS : kebanyakan menggunakan div...
disini dapat diketahui berapa banyak pembagian div dasar yaitu 6 div dasar : header,navigasi,sidebar,kontent,sebelah kanan konten, dan footer.
desain belum fixed masih dalam perancangan(warna website serta pencocokan tulisan)
ini hasil CSS awalnya :
#background{
width:960px;
height:auto;
background:black;
margin: 0px auto;
}
#header{
width: 960px;
height: 150px;
}
#logo{
width: 150px;
height: 150px;
background-image: url('ukdwlog.jpe');
float:left;
}
#ukdw{
width:500px;
height: 40px;
float:left;
margin-top: 10px;
font-size: 40px;
font-family: "MS Trebuchet";
text-align:center;
color: #1f9aa2;
}
#headerx{
width: 810px;
height: 75px;
background-image: url('header.jpe');
float:right;
}
#headerx ul{
list-style: none;
width: 760px;
height: 40px;
}
#headerx ul li{
width: 50px;
height: 40px;
float: right;
margin-right:30px;
margin-top: -0.5em;
}
#headerx ul li a{
text-decoration:none;
color: #1f9aa2;
}
#headery{
width: 810px;
height:75px;
background-image: url('header1.jpe');
float:right;
font-size:30px;
color: #1f9aa2;
}
#headery p{
margin: 20px 30px;
}
#navigasi{
width: 960px;
height: 40px;
background-image: url('navi.jpe');
overflow:hidden;
}
#navigasi ul{
list-style: none;
width: 750px;
height: 40px;
margin-left: 140px;
}
#navigasi ul li{
width: 123px;
height: 40px;
margin-left: 20px;
float: left;
text-align: center;
background-image: url('menu.png');
}
#navigasi ul li a{
color:#66cc33;
text-decoration:none;
}
#navigasi ul li:hover{
background-image: url('menu1x.png');
}
#sidebar1{
width: 150px;
height: 400px;
background-image: url('sidebar.jpe');
overflow:hidden;
float:left;
}
#sidebar1 ul{
list-style: none;
}
#sidebar1 ul li{
float: left;
width: 80px;
height: 30px;
margin-top: 30px;
background-image: url('menu.png');
}
#sidebar1 ul li a{
text-decoration:none;
color:white;
}
#konten{
width:600px;
height:400px;
background-image: url('konten.jpe');
overflow:scroll;
float:left;
color: white;
}
#sidebar2{
width: 210px;
height: 400px;
background-image: url('sidebar2.jpe');
float:right;
overflow:hidden;
}
#login{
width: 180px;
height: 200px;
margin: 10px 15px;
overflow:hidden;
border: 1px white solid;
}
#nim{
width: 150px;
height: 50px;
float: left;
padding-top: 10px;
text-align: center;
color:white;
}
#nim input{
width : 90px;
height: 20px;
float:right;
}
#pass{
width: 150px;
height: 50px;
float: left;
text-align: center;
color:white;
}
#pass input{
width : 90px;
height: 20px;
float:right;
}
#loginfoot{
width: 150px;
height: 80px;
}
#loginfoot a{
width 150px;
height: 80px;
float: left;
margin-top: 50px;
margin-left: 10px;
color:white;
}
#loginx{
width: 180px;
height: 70px;
margin-left: 15px;
float:left;
}
#loginx ul{
list-style: none;
width: 150px;
height: 70px;
margin-left: -3em;
}
#loginx ul li{
font-size: 15px;
text-align: center;
margin-bottom: 10px;
margin-top:-0.5em;
color:blue;
}
#bwhloginx{
width: 180px;
height:100px;
background: black;
float:left;
margin-left: 15px
}
#footer{
width: 960px;
height: 50px;
background-image: url('footer.jpe');
overflow: hidden;
}
#footer p{
float:right;
font-size:15px;
color: white;
}
#fb{
width: 60px;
height: 60px;
float: left;
overflow: hidden;
margin: 10px;
margin-top: 50px;
}
#tw{
width: 60px;
height: 60px;
float: left;
overflow: hidden;
margin-top: 50px;
}
ngakak melihatnya tp inilah hasil CSS dari kami.
tidak nyontek dari mana" tp dr ide gila..
bbrp yg sudah slsai yaitu delete komen dan akun...sehingga bisa di lihat dibawah... akan ada perubahan apabila kumpul pada hr SELASA(sebelum test manpro) ini!
