Hello friends.... How are you .. I hope you all are fine. Today I am going to tell you how to make your website or blogs more attractive by using html and css .
html code save with .html format and css code save with .css format in notepad.
html code save with .html format and css code save with .css format in notepad.
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>
think different
</title>
<link rel="stylesheet" type="text/css" href="think.css" />
</head>
<body>
<div id="new">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">THINK DIFFERENT</a>
<ul>
<li><a href="#">Think Different 1</a></li>
<li><a href="#">Think Different 2</a></li>
<li><a href="#">Think Different 3</a></li>
<li><a href="#">Think Different 4</a></li>
<li><a href="#">Think Different 5</a></li>
</ul></li>
<li><a href="#">ABOUT US</a></li>
</ul></div></body></html>
</title>
<link rel="stylesheet" type="text/css" href="think.css" />
</head>
<body>
<div id="new">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">THINK DIFFERENT</a>
<ul>
<li><a href="#">Think Different 1</a></li>
<li><a href="#">Think Different 2</a></li>
<li><a href="#">Think Different 3</a></li>
<li><a href="#">Think Different 4</a></li>
<li><a href="#">Think Different 5</a></li>
</ul></li>
<li><a href="#">ABOUT US</a></li>
</ul></div></body></html>
CSS code:
body
{
background:#C5EFA9;
}
#new
{
margin:0px;
padding:0px;
}
#new ul
{
margin:0px;
padding:0px;
}
#new li
{
margin:0px;
padding:0px;
list-style:none;
float:left;
position:relative;
background:#CCC;
}
#new ul li a
{
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#039;
border: 1px solid #000;
text-shadow:1px 1px 1px #000000;
}
#new ul ul
{
visibility:hidden;
position:absolute;
top:30px;
}
#new ul li:hover ul
{
visibility:visible;
}
#new li:hover
{
background:#F6C;
}
#new li:hover
{
color:#6C6;
}
{
background:#C5EFA9;
}
#new
{
margin:0px;
padding:0px;
}
#new ul
{
margin:0px;
padding:0px;
}
#new li
{
margin:0px;
padding:0px;
list-style:none;
float:left;
position:relative;
background:#CCC;
}
#new ul li a
{
text-align:center;
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#039;
border: 1px solid #000;
text-shadow:1px 1px 1px #000000;
}
#new ul ul
{
visibility:hidden;
position:absolute;
top:30px;
}
#new ul li:hover ul
{
visibility:visible;
}
#new li:hover
{
background:#F6C;
}
#new li:hover
{
color:#6C6;
}
After mouse hover on THINK DIFFERENT
Thanks... please comment if you like this....
Hi... I guess that can be made more attractive if you use gradient effect n also remove the borders... make that rounded rectangle...
ReplyDeletethanks Rajat for your suggestion.... i'll try this idea in my next blog...
Delete