I just create a simple navigational menu using HTML and CSS I try to learn web page design and development which is not my strong skill set. The code is very simple and easy to understand. I hope you will like my work.
I am currently accepting programming and web development work kindly contact me in the following email address for further details. Thank you.
My mobile number here in the Philippines is 09173084360.
I am currently accepting programming and web development work kindly contact me in the following email address for further details. Thank you.
My email address are the following jakerpomperada@gmail.com and jakerpomperada@yahoo.com.
My mobile number here in the Philippines is 09173084360.
My telephone number at home here in Bacolod City, Negros Occidental is (034) 4335675.
Sample Program Output
Program Listing
index.htm
<!-- index.htm -->
<!-- Written By Mr. Jake R. Pomperada, MAED-IT -->
<!-- December 5, 2017 -->
<html>
<head>
<title>
Mini Tabs Using CSS
</title>
</head>
<style>
h1 {
font-family: Arial, san-serif;
font-size: 24px;
color: #fff;
padding: 4px;
background-color: #696;
}
#minitabs {
margin:0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li {
font-family: Arial, san-serif;
font-size: 20px;
margin:0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin:0 12px 6px 12px;
text-decoration: none;
color: #9c9;
}
#minitabs a.active, #minitabs a:hover {
border-bottom: 6px solid #969;
padding-bottom: 2px;
color : #363;
}
#minitabs a:hover {
color:#696;
}
</style>
<body>
<br><br>
<h1> Simple Navigation Menu Using HTML and CSS </h1>
<br><br>
<ul id="minitabs">
<li> <a href="/apples/" title="Click for Apples.">
Apples</a></li>
<li> <a href="/oranges/" title="Click for Oranges.">
Oranges</a></li>
<li> <a href="/banana/" title="Click for Banana.">
Banana</a></li>
<li> <a href="/grapes/" title="Click for Grapes.">
Grapes</a></li>
</ul>
</body>
</html>
No comments:
Post a Comment