ini Code html Dan Css mengunakan selektor id
<html>
<head>
<title>
</title>
</head>
<style type="text/css">
#container { width: 720px; }
#header {
height: 100px;
background-color:siver; }
#content {
width: 540px;
float: left; }
#sidebar {
width: 180px;
float: right; }
#footer {
clear: both; }
#nav { margin: 0; padding: 0; background: silver; list-style-type: none; float: left; float: left; float: left; float: left; /* Contain floated list items */ } #nav li { margin: 0; padding: 0; float: left; } #nav a { float: left; float: left; float: left; float: left;
width: 127px; width: 127px; width: 127px; width: 127px;
text text text text--align: center; align: center; align: center; align: center;
color: #FFF; text-decoration: none; line-height: 2; border border border border--right: 1px solid #FFF; right: 1px solid #FFF; right: 1px solid #FFF; right: 1px solid #FFF;
}
#nav a:hover { background: green; }
</style>
</head>
<body>
<ul id='nav'>
<li style="border:4px double #FF6600; ">
<p align="center"><a href="#">Home</a></li>
<li style="border:4px double #FF00FF; ">
<p align="center"><a href="#">About Me</a></li>
<li style="border:4px double #00FFFF; ">
<p align="center"><a href="support.html">Ebook Gratis</a></li>
<li style="border: 4px double #FF0000; ">
<p align="center"><a href="about.html">Pengetahuan</a></li>
<li style="border:4px double #0000FF; ">
<p align="center"><a href="contact.html">Tutorial</a></li>
</ul>
</body>
</html>
ket
Warna ganty sesuai Tema
hover ketika cursor kearah link berwarna hijau ganty terserah sobat
url # ganty dengan link sobat,ebook gratis,pengetahuan,dll ganty dengan menu sobat
border boleh diperkecil 3 contoh nya
refrensi
Master Triswansyah Yuliano.
Alhamdulillah Catatan Sederhana Membuat Menu Horizontal Warna-warni telah selesai Mohon maaf jika ada kesalahan Wasalamu'alaikum warohmatulloh wabarokaatuh
No comments:
Post a Comment