gambar desai website menggunakan CSS
Source Code untuk CSS seperti di bawah ini :
#wrapper {
margin: auto;
width: 1000px;
background-color:#00FFFF;
padding: 5px 2px 5px 2px;
}
#header {
height: 100px;
background-color:#228B22;
}
#header1 {
height: 20px;
text-align:right;
padding-right: 10px;
color:#00FFFF;
}
#header2 {
height: 35px;
color::#00FFFF;
}
#header3 {
height: 25px;
text-align:right;
color:#00FFFF;
padding-right: 10px;
}
#inner {
margin:auto;
}
#sidebar {
float: left;
width: 200px;
height: 400px;
background-color:#00FF7F;
}
#top {
float: right;
width:800px;
height: 400px;
}
#content {
height: 100px;
}
#isi {
float: left;
width: 580px;
padding-left: 10px;
height: 300px;
background-color:#FFF5EE;
}
#info {
float: right;
width: 200px;
height: 300px;
padding-left: 10px;
background-color:#0000CD;
}
#footer {
clear: both;
height: 50px;
color:#00FFFF;
background-color:#228B22;
}
#leftmenu ul {
width: 200px;
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: #0000CD no-repeat left center;
margin: 0px 0px 1px; color: #FAF0E6;
}
#leftmenu a:hover {
background: #006400 no-repeat left center; color: #006400;
}
Untuk Source Code HTML seperti di bawah ini :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tugas2 Desain Layout Sederhana</title>
<link rel="stylesheet" href="desain.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<img src="logo_diskominfo.jpg" width="104" height="97" align="left" />
<div id="header1">Home | RSS | Contact | About Me</div>
<div id="header2">
<h1>Diskominfo Website </h1>
</div>
<div id="header3">Search
<input type="text" />
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#"><strong>Home</strong></a></li>
<li><strong><a href="#">Profil</a></strong></li>
<li><strong><a href="#">Photo</a></strong></li>
<li><strong><a href="#">About Me</a></strong></li>
<li><strong><a href="#">News</a></strong></li>
</ul>
</div>
</div>
<div id="top">
<div id="content"><img src="logo.jpg" width="800" height="102" /></div>
<div id="isi">
<h2>DINAS KOMUNIKASI DAN INFORMATIKA KABUPATEN KEDIRI</h2>
<p>1 Maret 2010 [24:00]<br />
Dinas Komunikasi dan Informatika Kabupaten Kediri adalah salah satu dinas pemerintahan kabupaten yang mempunyai tugas membantu kepala pemerintahan kabupaten dalam menyelenggarakan sebagian urusan pemerintahan di bidang komunikasi dan informatika. Dinas Komunikasi dan Informatika tingkat kabupaten berada dibawah pengawasan Dinas Komunikasi dan Informatika tingkat provinsi yang secara struktural terpusat pada Kementerian Negara Komunikasi dan Informasi.</p>
<p>Read more...</p>
</div>
<div id="info">
<p><strong>Aneka Info
</strong>
<ul>
<li>Pemerintahan</li>
<li>Pariwisata</li>
<li>Seni Budaya</li>
<li>Potensi Daerah</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p align="center">
© 2010 By Ridwan Efendi
</div>
</div>
</body>
</html>
Simpan file diatas dalam satu folder dengan ekstensi .CSS dan .HTML
Tidak ada komentar:
Posting Komentar