পাদলেখ কীভাবে টিপবেন

সুচিপত্র:

পাদলেখ কীভাবে টিপবেন
পাদলেখ কীভাবে টিপবেন
Anonim

"পাদলেখ" সাধারণত একটি ওয়েব পৃষ্ঠার বিন্যাসের নীচের অংশে অবস্থিত block পৃষ্ঠার পূর্ণতা বা ব্রাউজার প্রকার নির্বিশেষে উইন্ডোটির নীচে সর্বদা অবস্থান করা এই পাদলেখকে অবস্থান দেওয়ার ক্ষেত্রে সবচেয়ে সাধারণ সমস্যা। ব্লক বিন্যাসে ব্যাপক রূপান্তরের সময় থেকে সমস্যার বেশ কয়েকটি সমাধান হয়েছে এবং এর একটি নীচে দেওয়া হয়েছে।

পাদলেখ কীভাবে টিপবেন
পাদলেখ কীভাবে টিপবেন

এটা জরুরি

সিএসএস এবং এইচটিএমএল এর প্রাথমিক জ্ঞান

নির্দেশনা

ধাপ 1

আসুন একটি ভিত্তি হিসাবে সর্বাধিক সাধারণ পৃষ্ঠা বিন্যাস স্কিমটি গ্রহণ করা যাক - তিনটি ব্লক একে অপরের উপরে রাখা। শীর্ষ (শিরোলেখ) সর্বদা উইন্ডোর উপরের সীমানায়, নীচে (পাদলেখ) - নীচের সীমানায় সংযুক্ত থাকতে হবে এবং প্রধান (বডি) সর্বদা তাদের মধ্যবর্তী সমস্ত স্থান পূরণ করতে হবে। উত্স কোডে অবশ্যই এক্সএইচটিএমএল 1.0 ট্রানজিশনাল স্পেসিফিকেশনের লিঙ্ক থাকতে হবে এবং শৈলীর বিবরণ অবশ্যই একটি বাহ্যিক সিএসএস ফাইলে রাখতে হবে (অপেরা 9. XX এর সাথে সমস্যা এড়াতে) কাঠামোর এইচটিএমএল বিবরণ অবশ্যই মূল স্থানে রাখতে হবে পৃষ্ঠার মূল অংশ। এটি অবশ্যই শীর্ষ ব্লক থেকে শুরু হবে, যার ট্যাগটিতে একটি মান সহ একটি শনাক্তকারী বৈশিষ্ট্য স্থাপন করা উচিত, উদাহরণস্বরূপ, DivHead:

শিরোনাম ব্লক

প্রধান ব্লকে এক জোড়া নেস্টেড ব্লক থাকা উচিত। বাইরেরটি ডিভআউট শনাক্তকারী এবং অভ্যন্তরীণ - ডিভ কনটেন্ট দেওয়া হবে:

মূল.

পাদলেখ ডিভফুটতে সেট করা আছে:

পৃষ্ঠা ফুটার

ধাপ ২

পৃষ্ঠার সম্পূর্ণ এইচটিএমএল কোডটি দেখতে এমন হওয়া উচিত:

তিনটি ব্লক

@ ইম্পোর্ট "স্টাইল সিএসএস";

এটি একটি শিরোনাম ব্লক।

মূল.

এটি পৃষ্ঠার পাদচরণ।

ধাপ 3

শৈলীর বর্ণনা নীচের লেআউট প্রক্রিয়াটি প্রয়োগ করে: মিডল ব্লক (ডিভআউট) 100% উচ্চতায় সেট করা হয়েছে, শীর্ষ ব্লক (ডিভিএইড) এর পরম অবস্থান থাকবে এবং নীচের অংশে - আপেক্ষিক। মূল বিষয়বস্তু ব্লকে (ডিভি কনটেন্ট), শিরোনাম ব্লকের উচ্চতার সমান শীর্ষে একটি মুক্ত স্থান থাকতে হবে যাতে এটি পৃষ্ঠার মূল বিষয়বস্তুকে ওভারল্যাপ না করে। এবং নীচের ব্লকের (পাদলেখ) শীর্ষে নেতিবাচক মার্জিন থাকা উচিত, এই ব্লকের উচ্চতার সমান to এটি এটি ব্রাউজার উইন্ডোর নীচের সীমানার উপরে উঠাবে। এই প্রক্রিয়াটি নিম্নলিখিত বিষয়বস্তু সহ একটি CSS ফাইল ব্যবহার করে প্রয়োগ করা যেতে পারে: * {মার্জিন: 0; প্যাডিং: 0

এইচটিএমএল, বডি {উচ্চতা: 100%;} বডি {

অবস্থান: আপেক্ষিক;

রঙ: # 000;

}

# ডিভআউট {

মার্জিন: 0;

ন্যূনতম উচ্চতা: 100%;

পটভূমি: # এফএফএফ;

রঙ: # 000;

}

* এইচটিএমএল # ডিভআউট {উচ্চতা: 100%;

# ডিভহিড {

অবস্থান: পরম;

বাম: 0;

শীর্ষ: 0;

প্রস্থ: 100%;

উচ্চতা: 80px;

পটভূমি: # 2F5000;

ওভারফ্লো গোপন;

পাঠ্য-সারিবদ্ধ: কেন্দ্র;

রঙ: # এফএফএফ;

} # ডিভফুট {

অবস্থান: আপেক্ষিক;

স্পষ্ট উভয়;

মার্জিন-শীর্ষ: -60px;

উচ্চতা: 60px;

প্রস্থ: 100%;

পটভূমি-রঙ: # 2F5000;

পাঠ্য-সারিবদ্ধ: কেন্দ্র;

রঙ: # এফএফএফ;

}

.divContent

প্রস্থ: 100%;

ভাসা: বাম;

প্যাডিং শীর্ষ: 81px;

Code এইচটিএমএল কোডে স্টাইলশিটের জন্য আপনি যে নামটি নির্দিষ্ট করেছেন সেটি হ'ল স্টাইলসিএসএস।

প্রস্তাবিত: