এই লেসন এ আমরা বিভিন্ন রকম ওয়েব পেজ এর লেআউট তৈরি করব ।
লেআউট-১
নিচের কোড টি আপনার নতুন এইচটিএমএল ফাইল নিয়ে সেখানে পেস্ট করুন ।
<!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=iso-8859-1″ />
<title>CSS Traning</title>
<style type=”text/css”>
#wrapper{
width:950px;
margin:0 auto;
}
#header{
width:950px;
height:80px;
padding-top:20px;
float:left;
background-color:#003300;
text-align:center;
font-size:24px;
color:#FFFFFF;
}
#menu{
width:950px;
height:30px;
float:left;
background-color:#CC0033;
}
#menu ul{
margin:0;
padding:0;
}
#menu ul li{
list-style:none;
display:inline;
padding:0 15px;
}
#menu ul li a{
color:#FFFFFF;
text-decoration:none;
}
#menu ul li a:hover{
color:#E17100;
}
#contents{
width:950px;
height:430px;
float:left;
background-color:#999999;
}
#left{
width:250px;
height:430px;
float:left;
background-color:#555555;
}
#right{
width:700px;
height:430px;
float:right;
background-color:#660000;
}
#footer{
width:950px;
height:50px;
padding-top:30px;
float:left;
background-color:#FFCC99;
text-align:center;
}
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”></div>
<div id=”menu”></div>
<div id=”contents”>
<div id=”left”></div>
<div id=”right”></div>
</div>
<div id=”footer”></div>
</div>
</body>
</html>
এবার রান করলে এরকম আউট পুট দেখতে পাবেন ।
এখানেনিচের কোড টি ব্যবহার করে contents কে ২ ভাগে ভাগ করা হয়েছে। নিচে দেখুন ।
#left{
width:250px;
height:430px;
float:left;
background-color:#555555;
}
#right{
width:700px;
height:430px;
float:right;
background-color:#660000;
}
#left এর সিএসএস প্রপার্টি তে float:left; দেওয়ার কারনে এটি বামে চেপে আছে আর #right এর প্রপার্টি তে float:right; দেওয়ার কারনে এটি ডানে চেপে আছে । আর আপনি যত খানি width এবং height দিবেন ততখানি সেটি ডানে বামে সরে চেপে থাকবে । এটি সামনে আর ও অনেক কাজে লাগবে। এটিই হল প্রধানত float এর কাজ । ভাল করে প্র্যাকটিস করুন ।
লেআউট-১
নিচের কোড টি আপনার নতুন এইচটিএমএল ফাইল নিয়ে সেখানে পেস্ট করুন ।
<!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=iso-8859-1″ />
<title>CSS Traning</title>
<style type=”text/css”>
#wrapper{
width:950px;
margin:0 auto;
}
#header{
width:950px;
height:80px;
padding-top:20px;
float:left;
background-color:#003300;
text-align:center;
font-size:24px;
color:#FFFFFF;
}
#menu{
width:950px;
height:30px;
float:left;
background-color:#CC0033;
}
#menu ul{
margin:0;
padding:0;
}
#menu ul li{
list-style:none;
display:inline;
padding:0 15px;
}
#menu ul li a{
color:#FFFFFF;
text-decoration:none;
}
#menu ul li a:hover{
color:#E17100;
}
#contents{
width:950px;
height:430px;
float:left;
background-color:#999999;
}
#left{
width:250px;
height:430px;
float:left;
background-color:#555555;
}
#right{
width:700px;
height:430px;
float:right;
background-color:#660000;
}
#footer{
width:950px;
height:50px;
padding-top:30px;
float:left;
background-color:#FFCC99;
text-align:center;
}
</style>
</head>
<body>
<div id=”wrapper”>
<div id=”header”></div>
<div id=”menu”></div>
<div id=”contents”>
<div id=”left”></div>
<div id=”right”></div>
</div>
<div id=”footer”></div>
</div>
</body>
</html>
এবার রান করলে এরকম আউট পুট দেখতে পাবেন ।
এখানেনিচের কোড টি ব্যবহার করে contents কে ২ ভাগে ভাগ করা হয়েছে। নিচে দেখুন ।
#left{
width:250px;
height:430px;
float:left;
background-color:#555555;
}
#right{
width:700px;
height:430px;
float:right;
background-color:#660000;
}
#left এর সিএসএস প্রপার্টি তে float:left; দেওয়ার কারনে এটি বামে চেপে আছে আর #right এর প্রপার্টি তে float:right; দেওয়ার কারনে এটি ডানে চেপে আছে । আর আপনি যত খানি width এবং height দিবেন ততখানি সেটি ডানে বামে সরে চেপে থাকবে । এটি সামনে আর ও অনেক কাজে লাগবে। এটিই হল প্রধানত float এর কাজ । ভাল করে প্র্যাকটিস করুন ।
No comments:
Post a Comment