menu code

Step-3: The next step is to delete the bullets, decorate & stylish in horizontal row. For that, CSS help to be taken. The link between CSS & HTML is done by putting selector code (like div id / div class). Put an id name to the html with tag "ul id = “ and "/ul" . Here the id name for the navigation bar is “menu”. Most important is that, CSS id should be same name otherwise it will not work. Whenever the css code of same id modifies, the html output will be automatically changed accordingly with any any modification in the body.
<body> <ul id ="menu"> <li> <a herf="#"> HOME </a></li> <li> <a herf="#"> ABOUT US</a></li> <li> <a herf="#">SERVICES </a></li> <li> <a herf="#">CONTACT </a></li> </ul> </body>
The CSS code would be:
<head> <style type="text/css"> ul# menu { list -style: none; margin: 5x; padding: 0px; width:500px; } </style> </head>
With the above code, the output would be: Step-4: From the listed style, now consider in single line by removing the bullets. For that “li” css, to be used - each item will appear next to each other in single row.
<head> <style type="text/css"> ul# menu { list -style: none; margin: 0; padding: 0; width: 500px; } ul#menu li { display: inline; } </style> </head>
With the above code, the output would be:
page: 2 of 4        back   |  next

No comments:

Click Here To add Comment

Post a Comment