Pertemuan ke delapan

MENCOBA CSS

Latihan 1

<html>
<head>
<title>mencoba css</title>
<style>
#menu {
border:1px solid #22476c;
padding :3%;
margin:3%;
text-align:center;
background-color:#336699;
width:10%;
}
#menu a{
height:30px;
color:white;
text-decoration:none;
display:block;
margin:3px 0px;
border-top:1px solid #4c86c0;
border-left:1px solid #4c86c0;
border-right:1px solid #22476c;
border-bottom:1px solid #22476c;
}
#menu a:hover{
color:white;
display:block;
margin:3px 0px;
border-top:1px solid #22476c;
border-left:1px solid #22476c;
border-right:1px solid #4c86c0;
border-bottom:1px solid #4c86c0;
}
</style>
</head>
<body>
<h1>Menu Vertical</h1>
<div id=”menu”>
<a href=””>Home</a>
<a href=””>Profil</a>
<a href=””>Galery</a>
<a href=””>contact</a>
</div>

</body>
</html>

Latihan 2

<html>
<head>
<title>mencoba css</title>
<style>
#nav {
list-style-type:none;
margin:0;
padding:0;
width:180px;
background-color:#663300;
float:left;
}
#nav li{
margin:0;
padding:0;
float:left;
width:100%;
}
#nav a {
display:block;
color:#FFF;
text-decoration:none;
padding: 0 15px;
line-height: 2.5;
border-bottom:1px solid #FFF;
}
#nav a:hover{
background:#330000;
}
h1 {
cursor:pointer;
text-shadow:5px 5px 5px green;
}
#nav2 {
margin: 0;
padding: 0;
background: #663300;
list-style-type: none;
float: left;
}
#nav2 li{
margin:0;
padding:0;
float: left;
}
#nav2 a {
float:left;
width:127px;
text-align: center;
color: #FFF;
text-decoration: none;
line-height: 2;
border-right:1px solid #FFF;
}
</style>
</head>
<body>
<h1>Menu Vertical versi triswan</h1>
<ul id=”nav”>
<li><a href=””>Home</a></li>
<li><a href=””>Profil</a></li>
<li><a href=””>Galery</a></li>
<li><a href=””>Contact</a></li>
</ul>
<br><br><br><br><br><br><br><br><br><br>
<h1>Menu Horizontal versi triswan</h1>
<ul id=”nav2″>
<li><a href=””>Home</a></li>
<li><a href=””>Profil</a></li>
<li><a href=””>Galery</a></li>
<li><a href=””>Contact</a></li>
</ul>
</body>
</html>

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s