Desain Halaman Web Sederhana
Berikut adalah kode file css (simpan dengan nama new2.css) untuk membuat halaman web seperti di atas :
#wrapper {
margin: auto;
width: 997px;
border: 0;
}
#header {
height: 120px;
border: 1px solid blue;
margin-bottom:2px;
background:blue url('header.jpg');
}
#Gambarum {
float: left;
height: 63px;
width:61px;
margin-top:20px;
margin-left:50px;
border: 0;
background:red url('UM.PNG');
}
#Te {
float: left;
height: 35px;
width:300px;
margin-top:35px;
margin-left:5px;
}
#extra {
float: right;
height: 120px;
width:400px;
border: 0;
}
#atas {
float: left;
height: 25px;
width:350px;
margin-left:30px;
margin-top:2px;
border: 0;
}
#search {
clear:both;
float: right;
height: 20px;
width:300px;
margin-top:67px;
margin-right:20px;
border: 0;
}
#search1 {
float: left;
height: 15px;
width:120px;
margin-left:50px;
margin-top:4px;
border: 0;
}
#search2 {
float: right;
height: 17px;
width:110px;
margin-right:2px;
margin-top:4px;
border: 1px solid white;
background:white;
}
#inner {
float: left;
border: 0;
}
#sidebar {
float: left;
margin-right: 0px;
width: 250px;
height:420px;
border: 1px solid blue;
background:blue url('sidebar.jpg');
}
#Inner2 {
float: left;
width: 745px;
height: 420px;
border: 0;
}
#top{
height: 80px;
border: 0;
background:blue url('top.jpg');
}
#content {
float: left;
margin-top:10px;
margin-right:15px;
margin-left:15px;
width: 460px;
height: 323px;
border: 0;
}
#right {
float: left;
width: 250px;
height: 200px;
margin-top:10px;
border: 1px solid green;
background:blue url('right.jpg');
}
#footer {
margin:auto;
clear: both;
height: 80px;
width:997px;
border: 1px solid blue;
background:blue url('footer.jpg');
}
#leftmenu ul {
width: 250px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: blue url('button.jpg');
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #000066 no-repeat left center; color: #ffffff
}
.style2 {
font-size: 24px;
font-weight: bold;
color: #000099;
}
.style3 {
color: #0000CC;
font-weight: bold;
}
.style4 {
font-family: "Times New Roman", Times, serif;
font-size: xx-large;
color: #FFFFFF;
font-weight: bold;
}
.style6 {
font-family: "Times New Roman", Times, serif;
font-weight: bold;
}
.style7 {color: #FFFFFF}
.style8 {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
}
.style10 {
color: #FFFFFF; font-size: 12px;
}
.style11 {
color: #000066;
font-weight: bold;
}
Dan kode html-nya sebagai berikut (simpan dengan nama 2.html)
0 komentar:
Posting Komentar