css_part24
Horizantal Menu তৈরী করা
float এর Inline প্রোপার্টি ব্যবহার করে একটি Horizantal মেনু তৈরী করবো। এছাড়া এখানে link padding ও border ব্যবহার করে মেনুটিকে আরও আকর্ষনীয় করবো। নিচের
মত প্রোগ্রাম তৈরী করবো।
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html>
<head>
<style>
ul{
float:left; padding:0px; margin:10px;
list-style-type:none;}
a:link{float:left;
font-weight:bold;
text-decoration:none;color:white;background-color:blue;padding:5px;
border-right:2px solid white;}
a:visited{float:left;font-weight:bold;
text-decoration:none;
color:white; background-
color:purple;
padding:5px; border-right:2px solid white;}
a:hover{background-color:red;}
li{display:inline;}</style>
</head>
<body>
<ul><li><a
href="#">Home</a></li>
<li><a
href="#">Product</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Contact Us</a></li></ul>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
এখন চলুন এই কোডিংগুলি ব্যবহার করে আমাদের professional
pageটি ডেভোলপ করি।
নিচের মত কোডিংসহ একটি ফাইল তৈরী করে Style069(mystyle_05).css নাম দিয়ে সেভ করুন।
/*
CSS Document */
body{background:#CCCCCC;}
#wrapper{width:850px;
height:900px; }
#head{background-image:url('top_bg.jpg');
background-repeat:repeat-x;
width:850px;
height:400px;
margin:0px;}
#logo{width:300px;
height:70px;
font-size:24px;
float:left;}
#menu{width:450px;
height:30px;
float:right;
font-size:18px;
margin-top:100px;}
ul.menuitem
{
list-style:none; /* removes bullets */
margin:0;
padding:0;
width:auto;}
ul.menuitem
li {
padding:0;
margin:0;
display:inline;}
ul.menuitem
li a:link, ul.menuitem li a:visited {
float:left;
font-weight:bold;
text-decoration:none;
color:white;
background-color:green;
padding:5px;
border-right:2px solid white; }
ul.menuitem
li a:hover {
background-color:red;}
#image{width:850px;
height:300px;}
#content{background-color:#00ff00;
width:850px;
height:400px;
border:2px solid #ff0000;}
#content_left{width:250px;
height:400px;
float:left;
font-size:24px;
border:2px solid #ff0000;}
#content_mid{background-color:PowderBlue;
width:338px;
height:400px;
float:left;
font-size:24px;
border:2px solid #ff0000;
}
#content_right{width:250px;
height:400px;
float:right;
font-size:24px;
border:2px solid #ff0000;}
#footer{background-color:PowderBlue;
width:850px;
height:100px;
font-size:50px;
border:2px solid #ff0000;}
নিচের মত কোডিংসহ আরও একটি HTML ফাইল তৈরী
করুন।
<!DOCTYPE
html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<title>web
example</title>
<link
href="Style069(mystyle_05).css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div
id="wrapper">
<div
id="head">
<div
id="logo"> <img src = "Logo.jpg"
height="75" width="75" align="left"/>
Nova
Computer <br/> <span style="color:blue;
font-size:14px;">Learn from Beginning..... Don't late....late..
late.</span><br /> </div>
<div
id="menu"><ul class="menuitem">
<li><a
href="#">Home</a></li>
<li><a
href="#">About Us</a></li>
<li><a
href="#">Products</a></li>
<li><a
href="#">Tutorials </a></li>
<li><a
href="#">Contact Us</a></li>
</ul>
</div>
<div
id="image"><img src="images/banner.jpg"
height="280" width="850"
align="left"/></div>
</div>
<div
id="content">
<div
id="content_left"> Left Bar. Look! here is some link. </div>
<div
id="content_mid">About Nova Computer, Main content here
</div>
<div
id="content_right">Right Bar. Look! here is some link.
</div>
</div>
<div
id="footer">This is Footer </div>
</div>
</body>
</html>
ব্রাউজার দিয়ে খুললে নিচের মত ফলাফল পাওয়া যাবে।
বিস্তারিত জানতে নিচের বইটি সংগরহ করে নিন।
Writer: Bappi Ashraf
Published By: Gyankosh Prokashani
Amount of Pages: 464
First Publish: October-2004
Last Edition: We've February-2015 edition. Future edition may be existed!
Book Price: BDT 350 (30% Discount)
The
writer of this book has told that he has written this book with the
concept of "teach yourself". On the other hand, Web Design is a thing which is
interesting to learn. He has also told that the book is full of fan and
enjoyment so that a person can learn Web Design by himself by playing with
the example projects of this book. Book's CD Link below...
Next_
