Tips on How we can construct Menus in our Web page
// Make a file Style.css
* {
margin:0px;
padding:0px;
}
.menu {
width:800px;
height:60px;
background-color:#2A1F00;
border-radius:7px;
margin:0px auto;
}
.menu ul {
list-style:none;
text-align:center
}
.menu ul li {
padding:20px 0 0 45px;
float:left;
}
.menu ul li a {
display:block;
text-decoration:none;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
color:#FFF;
font-size:17px;
padding:1px 0px 1px 0px
}
.menu ul li a:hover {
text-decoration:none;
color:#f6157f;
}
// Make a file Index.php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menus</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="menu">
<ul>
<li style="background-image:none"><a href="#">Home</a></li>
<li ><a href="#p">Songs</a></li>
<li ><a href="#">Videos</a></li>
<li > <a href="#">Quotations</a></li>
<li > <a href="#" >Wallpaper</a></li>
<li > <a href="#">About us</a></li>
<li > <a href="#">Contact us</a></li>
</ul>
</div>
</body>
</html>
No comments:
Post a Comment