সিএসএস বিন্যাসটি আপনার ওয়েবসাইটের লেআউটটি সম্পূর্ণরূপে মনে করা প্রয়োজন, এবং তারপর টুকরাগুলি নিয়ে নিন এবং তাদের একসাথে রাখুন। সিএসএস সহ সহজ 3-কলাম লেআউট কিভাবে তৈরি করবেন তা শিখুন।
09 এর 01
আপনার লেআউট আঁকা
আপনি কাগজ বা গ্রাফিক্স প্রোগ্রামে আপনার লেআউট আঁকতে পারেন। আপনি যদি ইতিমধ্যে একটি ওয়্যার ফ্রেম বা আরো ব্যাপক নকশা মন আছে, সাইট আপ যে বেসিক বাক্সে এটি সহজে। এই নিবন্ধটির সাথে এই নকশাটি মূল বিষয়বস্তু এলাকায় তিনটি কলাম, সেইসাথে একটি হেডার এবং পাদলেখ। যদি আপনি ঘনিষ্ঠভাবে দেখেন, আপনি দেখতে পারেন যে তিনটি কলাম প্রস্থে সমান নয়।
আপনার লেআউটটি টানা হওয়ার পরে, আপনি মাত্রাগুলির চিন্তা শুরু করতে পারেন। এই উদাহরণ নকশা নিম্নলিখিত মৌলিক মাত্রা আছে যাচ্ছে:
- 900 পিক্সেলের বেশি না
- বাম দিকে ২0 পিএক্স গটার
- কলাম এবং সারিগুলির মধ্যে 10 পিএক্স
- যে কলামগুলি রয়েছে 250px, 300px এবং 300px wide
- শীর্ষ সারি 150px লম্বা
- নিচের সারিটি 100 পিএক্স লম্বা
02 এর 09
বেসিক HTML / CSS লিখুন এবং একটি কনটেইনার এলিমেন্ট তৈরি করুন
যেহেতু এই পৃষ্ঠাটি একটি বৈধ HTML ডকুমেন্ট হবে, একটি খালি HTML ধারক দিয়ে শুরু করুন
<শিরোনামহীন শিরোনাম দস্তাবেজপৃষ্ঠার মার্জিন, সীমানা এবং প্যাডিং শূন্য করার জন্য বেসিক CSS স্টাইলগুলিতে যোগ করুন। নতুন ডকুমেন্টগুলির জন্য অন্যান্য স্ট্যান্ডার্ড সিএসএস শৈলী থাকলেও, এই শৈলগুলি আপনাকে ন্যূনতম পরিচ্ছন্ন বিন্যাস পেতে প্রয়োজন। আপনার নথির শীর্ষে তাদের যুক্ত করুন:
<শৈলী টাইপ = "পাঠ্য / CSS"> html, শরীর {মার্জিন: 0 পিএক্স; প্যাডিং: 0 পিএক্স; সীমানা: 0 পিএক্স; }লেআউটটি নির্মাণ শুরু করতে, একটি ধারক উপাদান রাখা। এটি মাঝে মাঝে ঘটে থাকে যে আপনি পরে কনটেইনার থেকে পরিত্রাণ পেতে পারেন, তবে বেশিরভাগ নির্দিষ্ট-প্রস্থ লেআউটগুলির জন্য, কনটেইনার উপাদান থাকার ফলে বিভিন্ন ওয়েব ব্রাউজারগুলিতে এটি পরিচালনা করা সহজ করে তোলে। তাই শরীরের এই করা:
এবং সিএসএস স্টাইল শীট এ, লিখুন:
# কনটেইনার {}09 এর 03
কনটেইনার স্টাইল
কনটেইনারটি নির্দিষ্ট করে দেয় যে ওয়েব পৃষ্ঠাগুলির বিষয়বস্তু কীভাবে বিস্তৃত হবে, পাশাপাশি ভেতরের দিকের কোনও মার্জিন এবং ভিতরের প্যাডিং। এই ডকুমেন্টের জন্য, বামদিকে ২0 পিক্সেল গটার দিয়ে কন্ট্রেনারটি 870 পক্স প্রশস্ত। গটার একটি মার্জিন শৈলী সঙ্গে সেট আপ করা হয়, কিন্তু ধারক নেভিগেশন প্যাডিং ধারক হিসাবে বিস্তৃত থেকে কোন উপাদান প্রতিরোধ করার জন্য zeroed আউট হয়।
# কনটেইনার {প্রস্থ: 870 পিএক্স; মার্জিন: 0 0 0 ২0 পিএক্স; / * উপরের ডান তলায় বামে * / প্যাডিং: 0; }আপনি যদি এখন আপনার দস্তাবেজ সংরক্ষণ করেন, তবে এটির কোনটিই নেই কারন এটি কন্টেনারটি দেখতে কঠিন হবে। আপনি যদি স্থানধারক পাঠ্য যোগ করেন, তাহলে আপনি ধারক উপাদান আরও স্পষ্টভাবে দেখতে সক্ষম হবেন।
04 এর 09
শিরোলেখ জন্য একটি শিরোনাম ট্যাগ ব্যবহার করুন
শিরোলেখ সারি শৈলী কিভাবে আপনি সিদ্ধান্ত এটি মধ্যে কি উপর অনেক নির্ভর করে। যদি শিরোলেখ সারিটি শুধুমাত্র একটি লোগো গ্রাফিক এবং শিরোনাম থাকতে চলেছে, তাহলে একটি শিরোনাম ট্যাগ (
) ব্যবহার করে ব্যবহার করার চেয়ে আরো জ্ঞান লাগে। আপনি শিরোনামটিকে একইভাবে শৈলীতে একটি ডিভিতে স্টাইল করতে পারেন, এবং আপনি বহিরাগত ট্যাগগুলি এড়াতে পারেন।
শিরোলেখের জন্য এইচটিএমএলটি ধারকটির উপরের দিকে যায় এবং এটির মতো দেখতে থাকে:
আমার শিরোলেখ সারি
তারপর, এটিতে শৈলী সেট করার জন্য, নীচে একটি লাল সীমানা যোগ করা হয়েছে যাতে আপনি দেখতে পাচ্ছেন যে এটি শেষ কোথায়, মার্জিন এবং প্যাডিংটি শূন্য হয়ে গেছে, প্রস্থ 100% এবং উচ্চতা 150px পর্যন্ত স্থির করা হয়েছে:
# কনটেইনার এইচ 1 {মার্জিন: 0; প্যাডিং: 0; প্রস্থ: 100%; উচ্চতা: 150 পিক্স; ভাসা: বাম; সীমান্তের নীচে: # c00 কঠিন 3px; } ভাসা এই উপাদান ভাসা ভুলবেন না: বাম; সম্পত্তি। সিএসএস লেআউট লেখার কী কী সবকিছু আছে - এমনকি এমন কিছু যা ধারক হিসাবে একই প্রস্থ। এইভাবে, আপনি সর্বদা জানেন যে উপাদানগুলি পৃষ্ঠাটিতে কোথায় থাকবে।
একটি CSS বংশানুক্রমিক নির্বাচনকারী শুধুমাত্র # কন্টেইনার উপাদান ভিতরে H1 উপাদানগুলির জন্য শৈলী প্রয়োগ করেছে
05 এর 09
তিনটি কলাম পেতে, দুটি কলাম তৈরির দ্বারা শুরু করুন
যখন আপনি CSS- এর সাথে একটি তিন-কলাম লেআউট তৈরি করবেন, তখন আপনাকে আপনার লেআউটটি দুটি গ্রুপের মধ্যে বিভক্ত করতে হবে। তাই এই তিনটি কলাম লেআউটের জন্য, মধ্যম এবং ডান কলাম এবং বামদিকের কলামের পাশে বাম কলামের পাশে বাম কলামটি 250 পিক্স পাউন্ডে রাখুন এবং ডান কলামটি 610 পিক্স পাউন্ড (দুইটি কলামের জন্য 300 , প্লাস 10 পিএক্স তাদের মধ্যে গর্ত জন্য)।
এইচটিএমএল এই মত দেখায়:
এই শব্দগুলি থেকে অর্থোপার্জন থেকে দূরে থাকুন এটি একটি ছোট প্যান্টের জন্য ছিটকিনি চার্জ করা হয়, কোনও নথিভুক্ত নাটকগুলি উল্লিখিত নাটকের মধ্যে উল্লিখিত হয়। দ্রুত ছড়িয়ে ছিটিয়ে দাড়িয়ে দৌড়ানোর জন্য শ্রম থেকে বেরিয়ে আসুন।
কোনও ক্ষণস্থায়ী খাবারের জন্য, এবং অন্য কোনও সময় তার জন্য শ্রমজগতের কোনও পরিবর্তন ঘটতে পারে না। কোনও কাজ এবং বড় বড় কাজ
কলামের মধ্যে থাকা স্থানধারক পাঠ্যগুলি পরীক্ষার সময় তাদের আরও দৃশ্যমান করে। সিএসএস এই মত দেখায়:
# কনটেইনার # কল 1 {প্রস্থ: 250 পিক্স; ভাসা: বাম; } # কনটেইনার # কলসবহর {প্রস্থ: 610 পিএক্স; ভাসা: ডান; মার্জিন: 0; প্যাডিং: 0; } বামের কলামটি বাম দিকে প্রবাহিত হয়, অন্যদিকে ডানদিকে তলিয়ে যায়। কারণ উভয় কলামের মোট প্রস্থ 860px হয়, তাদের মধ্যে একটি 10 পি পি এস গর্ত আছে।
06 এর 09
ওয়াইড দ্বিতীয় কলাম ভিতরে দুটি কলাম যোগ করুন
তিনটি কলাম তৈরি করতে, বৃহত্তর দ্বিতীয় কলামের ভিতরে দুটি divs যোগ করুন, ঠিক যেমন আপনি শেষ ধাপে কন্টেইনার কলামের ভিতরে 2 টি বিভাজ যোগ করেছেন। এইচটিএমএল এই মত দেখায়:
কোনও কোনও ক্ষেত্রে এটি ব্যবহার করা যেতে পারে, এবং অন্য কোনও কাজের জন্যই সে তার কর্মক্ষেত্রের সাথে জড়িত। কোনও কাজ এবং বড় বড় কাজ
এই মুহূর্তে এটি একটি স্পষ্টভাবে ব্যাখ্যা করা হয়েছে। নিখরচায় শ্রমিকদের শ্রবণশক্তি, কোনও কোনও জিজ্ঞাসাবাদ এটি এখন একটি সুবিশাল তহবিল হিসাবে ব্যবহৃত হয়, কিন্তু এটি সব সময় কাজ এবং dolore হিসাবে নিখুঁত করে তোলে।
এবং সিএসএস এই মত দেখায়:
# কলসবহর # কল 2 এমড {width: 300px; ভাসা: বাম; } # কলসবহর # কল 2 সাইড {প্রস্থ: 300 পিক্স; ভাসা: ডান; } যেহেতু এই দুটি 300px প্রশস্ত বাক্সে একটি 610px প্রশস্ত বক্স ভিতরে আছে, আবার তাদের মধ্যে একটি 10px গর্ত হবে।
09 এর 07
পাদলেখ যোগ করুন
এখন বাকি পৃষ্ঠাটি স্টাইল করা আছে, আপনি পাদলেখ যোগ করতে পারেন। একটি "পাদলেখ" আইডি দিয়ে শেষ ডিজিটি ব্যবহার করুন এবং সামগ্রীটি যোগ করুন যাতে আপনি এটি দেখতে পারেন। আপনি শীর্ষে একটি সীমানা যোগ করতে পারেন, তাই আপনি এটি শুরু যেখানে জানতে পারবেন।
এইচটিএমএল:
শিরোলেখের জন্য এইচটিএমএলটি ধারকটির উপরের দিকে যায় এবং এটির মতো দেখতে থাকে:
আমার শিরোলেখ সারি
তারপর, এটিতে শৈলী সেট করার জন্য, নীচে একটি লাল সীমানা যোগ করা হয়েছে যাতে আপনি দেখতে পাচ্ছেন যে এটি শেষ কোথায়, মার্জিন এবং প্যাডিংটি শূন্য হয়ে গেছে, প্রস্থ 100% এবং উচ্চতা 150px পর্যন্ত স্থির করা হয়েছে:
# কনটেইনার এইচ 1 {মার্জিন: 0; প্যাডিং: 0; প্রস্থ: 100%; উচ্চতা: 150 পিক্স; ভাসা: বাম; সীমান্তের নীচে: # c00 কঠিন 3px; }ভাসা এই উপাদান ভাসা ভুলবেন না: বাম; সম্পত্তি। সিএসএস লেআউট লেখার কী কী সবকিছু আছে - এমনকি এমন কিছু যা ধারক হিসাবে একই প্রস্থ। এইভাবে, আপনি সর্বদা জানেন যে উপাদানগুলি পৃষ্ঠাটিতে কোথায় থাকবে।
একটি CSS বংশানুক্রমিক নির্বাচনকারী শুধুমাত্র # কন্টেইনার উপাদান ভিতরে H1 উপাদানগুলির জন্য শৈলী প্রয়োগ করেছে
05 এর 09
তিনটি কলাম পেতে, দুটি কলাম তৈরির দ্বারা শুরু করুন
যখন আপনি CSS- এর সাথে একটি তিন-কলাম লেআউট তৈরি করবেন, তখন আপনাকে আপনার লেআউটটি দুটি গ্রুপের মধ্যে বিভক্ত করতে হবে। তাই এই তিনটি কলাম লেআউটের জন্য, মধ্যম এবং ডান কলাম এবং বামদিকের কলামের পাশে বাম কলামের পাশে বাম কলামটি 250 পিক্স পাউন্ডে রাখুন এবং ডান কলামটি 610 পিক্স পাউন্ড (দুইটি কলামের জন্য 300 , প্লাস 10 পিএক্স তাদের মধ্যে গর্ত জন্য)।
এইচটিএমএল এই মত দেখায়:
এই শব্দগুলি থেকে অর্থোপার্জন থেকে দূরে থাকুন এটি একটি ছোট প্যান্টের জন্য ছিটকিনি চার্জ করা হয়, কোনও নথিভুক্ত নাটকগুলি উল্লিখিত নাটকের মধ্যে উল্লিখিত হয়। দ্রুত ছড়িয়ে ছিটিয়ে দাড়িয়ে দৌড়ানোর জন্য শ্রম থেকে বেরিয়ে আসুন।
কোনও ক্ষণস্থায়ী খাবারের জন্য, এবং অন্য কোনও সময় তার জন্য শ্রমজগতের কোনও পরিবর্তন ঘটতে পারে না। কোনও কাজ এবং বড় বড় কাজ
কলামের মধ্যে থাকা স্থানধারক পাঠ্যগুলি পরীক্ষার সময় তাদের আরও দৃশ্যমান করে। সিএসএস এই মত দেখায়:
# কনটেইনার # কল 1 {প্রস্থ: 250 পিক্স; ভাসা: বাম; } # কনটেইনার # কলসবহর {প্রস্থ: 610 পিএক্স; ভাসা: ডান; মার্জিন: 0; প্যাডিং: 0; }বামের কলামটি বাম দিকে প্রবাহিত হয়, অন্যদিকে ডানদিকে তলিয়ে যায়। কারণ উভয় কলামের মোট প্রস্থ 860px হয়, তাদের মধ্যে একটি 10 পি পি এস গর্ত আছে।
06 এর 09
ওয়াইড দ্বিতীয় কলাম ভিতরে দুটি কলাম যোগ করুন
তিনটি কলাম তৈরি করতে, বৃহত্তর দ্বিতীয় কলামের ভিতরে দুটি divs যোগ করুন, ঠিক যেমন আপনি শেষ ধাপে কন্টেইনার কলামের ভিতরে 2 টি বিভাজ যোগ করেছেন। এইচটিএমএল এই মত দেখায়:
কোনও কোনও ক্ষেত্রে এটি ব্যবহার করা যেতে পারে, এবং অন্য কোনও কাজের জন্যই সে তার কর্মক্ষেত্রের সাথে জড়িত। কোনও কাজ এবং বড় বড় কাজ
এই মুহূর্তে এটি একটি স্পষ্টভাবে ব্যাখ্যা করা হয়েছে। নিখরচায় শ্রমিকদের শ্রবণশক্তি, কোনও কোনও জিজ্ঞাসাবাদ এটি এখন একটি সুবিশাল তহবিল হিসাবে ব্যবহৃত হয়, কিন্তু এটি সব সময় কাজ এবং dolore হিসাবে নিখুঁত করে তোলে।
এবং সিএসএস এই মত দেখায়:
# কলসবহর # কল 2 এমড {width: 300px; ভাসা: বাম; } # কলসবহর # কল 2 সাইড {প্রস্থ: 300 পিক্স; ভাসা: ডান; }যেহেতু এই দুটি 300px প্রশস্ত বাক্সে একটি 610px প্রশস্ত বক্স ভিতরে আছে, আবার তাদের মধ্যে একটি 10px গর্ত হবে।
09 এর 07
পাদলেখ যোগ করুন
এখন বাকি পৃষ্ঠাটি স্টাইল করা আছে, আপনি পাদলেখ যোগ করতে পারেন। একটি "পাদলেখ" আইডি দিয়ে শেষ ডিজিটি ব্যবহার করুন এবং সামগ্রীটি যোগ করুন যাতে আপনি এটি দেখতে পারেন। আপনি শীর্ষে একটি সীমানা যোগ করতে পারেন, তাই আপনি এটি শুরু যেখানে জানতে পারবেন।
এইচটিএমএল: