CSS : Membuat Layout
Nah pada materi CSS ini saya akan memberikan ilmu kepada anda tentang cara membuat Layout/tampilan agar tampilan WEB anda menjadi lebih keren, enak dipandang,ok daripada banyak basa basi langsung aja yuk praktek..!
1. Pertama buat file CSS nya terlebih dahulu, copas atau ketik ulang syntax css dibawah ini!
body {
margin:0;
padding:0;
background-color : #000000;
color : #FFFBF0;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
}
a{text-decoration:none; color : #3A3A3A;}
a : hover {color : #FF0000;text-decoration:none;}
#centerColumn {
margin-top:2em;
margin-left: 6em;
margin-right:6em;
voice-family: "\"}\"";
voice-family: inherit;
margin-left:6em;
margin-right:6em;
padding:1em .5em 2em .5em;
background-color : #000000;
text-align:left;
border:2px solid #00FF00;
}
html>body #centerColumn {
margin-left:6em;
margin-right:6em;
}
#centerColumn h2 {
margin:0 0 -.5em 0;
padding:.75em 0 0 0;
font-size:1em;
letter-spacing:.1em;
}
#header {
margin:-1em -.5em 0 -.5em !important;
margin:-2em -1em 0 -1em;
padding:0 0 0 0;
height:5em;
background-color : #000000;
}
#header h1 {
margin:0 0 -.6em 0;
padding:.5em 0 0 1em;
font-size:1.5em;
letter-spacing:.1em;
}
#header h2 {
margin:0 0 0 0;
padding:1em 0 0 1.75em;
font-size:.9em;
font-weight:300;
letter-spacing:.1em;
}
#nav {
margin:0 0 1em 0;
padding:.4em 0 0 0;
background-color : #00FF00;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav li {
margin:0;
padding:.25em;
display:inline;
}
#footer {
position:relative;
bottom:0;
margin:5em 0 0 0;
padding:0;
height:4em;
line-height:4em;
text-align:center;
font-size:.7em;
background : #00FF00;
border-top:2px solid #FFFF00;
}
Setelah diketik atau di copas syntax css diatas, simpan dengan nama style.css
2. setelah membuat file css, kita buat file htmlnya, silahkan anda ketik atau copas syntax dibawah ini
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>anwari</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id="centerColumn">
<div id="header">
<h1>Welcome</h1>
<h2>Anwari</h2>
</div>
<!--//end #headern//-->
<div id="nav">
<ul>
<li><a href="rumah.html">Rumah</a></li>
<li><a href="profil.html">Profil</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<!--//end #nav//-->
<marquee><font size="6"color="red"face="chiller">Wilujeng Sumping</font></marquee>
<p><font color="#0000CC"size="3">
Isi text</p>
Formulir
<ul>
<li type="disc">Nama : Anwari</li>
<li type="disc">Kelas : XI RPL 1</li>
<li type="disc">Sekolah : STM Muhammadiyah</li>
</ul>
<div id="footer"> <font size="4"><a target="_blank" href="anwari-kyu1.blogspot.com" title="anwari-kyu1">Muhammad Anwari</a></font></div>
<!--//end #footer//-->
</div>
<!--//end #centerColumn//-->
</body>
</html>
Simpan dengan layout.html
Maka hasil tampilannya seperti dibawah ini
0 Komentar:
Posting Komentar