কিভাবে তৈরি করবেন: প্রতিক্রিয় হেডার
কিভাবে CSS দিয়ে প্রতিক্রিয় হেডার তৈরি করবেন
প্রতিক্রিয় হেডার
পানের মাপ অনুযায়ী হেডার ডিজাইন পরিবর্তন করুন। ব্রাউজার জানালা মাপ পরিবর্তন করে ফলাফল দেখুন。
প্রতিক্রিয় পেইড়াকে তৈরি করো
প্রথম পদক্ষেপ - এইচটিএমএল যোগ করো:
<div class="header">
<a href="#default" class="logo">CompanyLogo</a>
<div class="header-right">
<a class="active" href="#home">Home</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
</div>
দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করো:
/* শিরোমুখ স্টাইল সংজ্ঞায়ন করতে গ্রীষ্মকালীন পিছনভাগ এবং কিছু ইনপুট মার্জিন */
.header {
overflow: hidden;
background-color: #f1f1f1;
padding: 20px 10px;
}
/* শিরোমুখ লিঙ্কের স্টাইল সংজ্ঞায়ন */
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
/* লোগো লিঙ্কের স্টাইল সংজ্ঞায়ন (মনে রাখুন, আমরা হাইফলাইন এবং ফন্ট সাইজকে একই মাত্রায় সংজ্ঞায়ন করব, যাতে ফন্ট বড় হলে হেডার প্রসারিত না হয়) */
.header a.logo {
font-size: 25px;
font-weight: bold;
}
/* মাউস সাঁতারের সময় পিছনভাগের রঙ পরিবর্তন করো */
.header a:hover {
background-color: #ddd;
color: black;
}
/* সক্রিয়/বর্তমান লিঙ্কের স্টাইল সংজ্ঞায়ন */
.header a.active {
background-color: dodgerblue;
color: white;
}
/* লিঙ্ক অংশকে ডানদিকে ফ্লোট করো */
.header-right {
float: right;
}
/* অবস্থান পরিবর্তন করতে মিডিয়া কোয়াইয়ার যোগ করো - যখন স্ক্রিন প্রস্থতি 500px অথবা তার কম, লিঙ্কগুলো একসাথে স্থানান্তরিত হবে */
@media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
}
