সিএসএস ওয়েবসাইট লেআউট - Css Website Layout



একটি ওয়েব পেজ সাধারণত header, menu, content, footer ইত্যাদি এরকম বিভিন্ন অংশে বিভক্ত করা হয়। বহুল বাবহ্রিত একটি লেআউট নিচে দেখুন।

css image sprite demo property

ওপরের ওয়েব পেজ লেআউট এর কোড গুলো নিচে দেখুন।

উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.header {
background-color: #66FFCC;
padding: 20px;
text-align: center;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.column {
float: left;
padding: 10px;
}
.column.side {
background-color:#99CCFF;
width: 25%;
}
.column.middle {
width: 50%;
}
.row:after {
content: "";
display: table;
clear: both;
}
/* রেস্পন্সিভ কোড */ @media (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
.footer {
background-color: #66FFCC;
padding: 10px;
text-align: center;
} </style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="row">
<div class="column side">
<h2>Content</h2>
</div>
<div class="column middle">
<h2>Main Content</h2>
</div>
<div class="column side">
<h2>Content</h2>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>








এই ওয়েব সাইট এর সমস্ত টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদি খুব সহজ ও সাধারণ ভাবে তৈরি করা হয়েছে। টিউটোরিয়াল, সার্কিট ডায়াগ্রাম, উদাহরণ ইত্যাদির ভুল পরিহার করার জন্য বার বার যাচাই করা হয়েছে, কিন্তু আমরা এর পূর্ণ নিশ্চয়তা ও দায়ভার বহন করি না। যখন আপনি এই সাইটটি ব্যবহার করেন, আমরা ধরে নেই যে আপনি পড়েছেন এবং সম্মত আছেন আমাদের টার্মস অফ ইউস (Terms of use) এবং প্রাইভেসি পলিসি( Privacy policy) সম্পর্কে।

Copyright 2016-2018 by websschool.com, All Rights Reserved.