নমস্কার! এর মূল বিষয়গুলি আয়ত্ত করা চালিয়ে যাওয়া যাক এইচটিএমএল ভাষা. আসুন দেখি পাঠ্যটিকে কেন্দ্র, প্রস্থ বা প্রান্তে সারিবদ্ধ করতে আপনাকে কী লিখতে হবে।

ব্যবসায় নেমে, আসুন দেখি কিভাবে পাঠ্যকে তিনটিতে কেন্দ্রীভূত করা যায় বিভিন্ন উপায়ে. শেষ দুটি সরাসরি স্টাইল শীটের সাথে সংযুক্ত। এটি একটি CSS ফাইল হতে পারে যা সাইটের পৃষ্ঠাগুলির সাথে সংযোগ করে এবং তাদের চেহারা নির্ধারণ করে।

পদ্ধতি 1 - HTML এর সাথে সরাসরি কাজ

এটা আসলে বেশ সহজ. নীচের উদাহরণ দেখুন।

অনুচ্ছেদটিকে কেন্দ্রে সারিবদ্ধ করুন।

আপনি যদি পাঠ্য খণ্ডগুলিকে অন্যভাবে সরাতে চান, তবে "কেন্দ্র" পরামিতির পরিবর্তে, নিম্নলিখিত মানগুলি লিখুন:

• ন্যায্যতা - পৃষ্ঠার প্রস্থে পাঠ্য সারিবদ্ধ করুন;
• ডান - ডান প্রান্তে;
• বাম - বাম দিকে।

সাদৃশ্য দ্বারা, আপনি শিরোনাম (h1, h2) এবং ধারক (div) এ থাকা বিষয়বস্তু সরাতে পারেন।

পদ্ধতি 2 এবং 3 - শৈলী ব্যবহার করে

উপরে উপস্থাপিত নকশা সামান্য রূপান্তরিত করা যেতে পারে. প্রভাব একই হবে। এটি করার জন্য, আপনাকে নীচের কোডটি লিখতে হবে।

পাঠ্য ব্লক।

এই ফর্মে, পাঠ্য বিষয়বস্তুকে কেন্দ্র করে কোডটি সরাসরি HTML-এ লেখা হয়।

ফলাফল অর্জনের জন্য আরেকটি বিকল্প উপায় আছে। আপনাকে কয়েকটি ধাপ করতে হবে।

ধাপ 1. প্রধান কোড লিখুন

পাঠ্য উপাদান।

ধাপ 2. অন্তর্ভুক্ত CSS ফাইলে, নিম্নলিখিত কোড লিখুন:

রোভনো (টেক্সট-সারিবদ্ধ: কেন্দ্র;)

আমি লক্ষ্য করি যে "রোভনো" শব্দটি কেবল একটি শ্রেণীর নাম যাকে ভিন্নভাবে বলা যেতে পারে। এটি প্রোগ্রামারের বিবেচনার উপর ছেড়ে দেওয়া হয়।

সাদৃশ্য দ্বারা, HTML-এ আপনি সহজেই পাঠ্যকে কেন্দ্রীভূত, ন্যায়সঙ্গত এবং পৃষ্ঠার ডান বা বাম প্রান্তে সারিবদ্ধ করতে পারেন। আপনি দেখতে পাচ্ছেন, আপনার লক্ষ্য অর্জনের জন্য একাধিক বিকল্প রয়েছে।

মাত্র কয়েকটি প্রশ্ন:

• আপনি একটি তথ্য অলাভজনক প্রকল্প করছেন?
• আপনি আপনার ওয়েবসাইট ভাল করতে চান? সার্চ ইঞ্জিন?
• আপনি কি অনলাইনে আয় করতে চান?

যদি সমস্ত উত্তর ইতিবাচক হয়, তাহলে শুধু ওয়েবসাইট ডেভেলপমেন্টের জন্য একটি সমন্বিত পদ্ধতির দিকে তাকান। তিনি যদি কাজ করেন তবে তথ্যটি বিশেষভাবে কার্যকর হবে সিএমএস ওয়ার্ডপ্রেস.

আমি উল্লেখ করতে চাই যে আপনার নিজস্ব ওয়েবসাইটগুলি ইন্টারনেটে প্যাসিভ বা সক্রিয় আয় তৈরি করার জন্য অনেকগুলি বিকল্পের মধ্যে একটি মাত্র। আমার ব্লগ অনলাইন আর্থিক সুযোগ নিবেদিত.

আপনি কি কখনও ট্রাফিক সালিসি, কপিরাইটিং বা কার্যকলাপের অন্যান্য ক্ষেত্রগুলিতে কাজ করেছেন যা দূরবর্তী সহযোগিতার মাধ্যমে প্রাথমিক বা অতিরিক্ত আয় তৈরি করে? আপনি আমার ব্লগের পৃষ্ঠাগুলিতে এই মুহূর্তে এই এবং আরও অনেক কিছু শিখতে পারেন।

ভবিষ্যতে আরো বেশ কিছু প্রকাশ করব দরকারী তথ্য. সংযুক্ত থাকুন। আপনি যদি চান, আপনি ই-মেইলের মাধ্যমে Workip আপডেটগুলিতে সদস্যতা নিতে পারেন। সাবস্ক্রিপশন ফর্ম নীচে অবস্থিত.

উপাদানগুলিকে অনুভূমিকভাবে এবং উল্লম্বভাবে সারিবদ্ধ করা যেতে পারে বিভিন্ন উপায়ে. পদ্ধতির পছন্দ উপাদানের ধরন (ব্লক বা ইনলাইন), এর অবস্থানের ধরন, আকার ইত্যাদির উপর নির্ভর করে।

1. ব্লক/পৃষ্ঠার কেন্দ্রে অনুভূমিক প্রান্তিককরণ 1.1। যদি ব্লকের একটি প্রস্থ থাকে: div ( প্রস্থ: 300px; মার্জিন: 0 স্বয়ংক্রিয়; /*মূল ব্লকের মধ্যে উপাদানটিকে অনুভূমিকভাবে কেন্দ্রে রাখুন*/ )

আপনি যদি এইভাবে একটি ইনলাইন উপাদান সারিবদ্ধ করতে চান, তাহলে এটি প্রদর্শনের জন্য সেট করা প্রয়োজন: ব্লক;

1.2। যদি একটি ব্লক অন্য ব্লকের মধ্যে নেস্টেড থাকে এবং কোনো/নির্দিষ্ট প্রস্থ না থাকে: .wrapper (টেক্সট-সারিবদ্ধ: কেন্দ্র;) 1.3. যদি ব্লকের প্রস্থ সেট করা থাকে এবং আপনাকে এটিকে প্যারেন্ট ব্লকের মাঝখানে ঠিক করতে হবে: .wrapper (অবস্থান: আপেক্ষিক; /* প্যারেন্ট ব্লকের জন্য আপেক্ষিক অবস্থান সেট করুন যাতে আমরা ব্লকটিকে এর ভিতরে একেবারে অবস্থান করতে পারি * /) .বক্স (প্রস্থ: 400px; অবস্থান: পরম; বাম: 50%; মার্জিন-বাম: -200px; /*ব্লকটিকে তার প্রস্থের অর্ধেক সমান দূরত্ব দিয়ে বাম দিকে সরান*/ ) 1.4। ব্লকগুলির প্রস্থ নির্দিষ্ট না থাকলে, আপনি একটি প্যারেন্ট র্যাপার ব্লক ব্যবহার করে সেগুলিকে কেন্দ্র করতে পারেন: .wrapper (টেক্সট-সারিবদ্ধ: কেন্দ্র; /*ব্লকের বিষয়বস্তুকে কেন্দ্র করুন*/) .বক্স ( প্রদর্শন: ইনলাইন-ব্লক; / *ব্লকগুলিকে অনুভূমিকভাবে সারিবদ্ধ করুন*/ মার্জিন-ডান: -0.25em; /*ব্লকগুলির মধ্যে ডান মার্জিন সরান*/ ) 2. উল্লম্ব প্রান্তিককরণ 2.1। যদি পাঠ্যটি একটি লাইন দখল করে, উদাহরণস্বরূপ, বোতাম এবং মেনু আইটেমগুলির জন্য: .বোতাম ( উচ্চতা: 50px; লাইন-উচ্চতা: 50px; ) 2.2। একটি প্যারেন্ট ব্লকের ভিতরে একটি ব্লককে উল্লম্বভাবে সারিবদ্ধ করতে: .র্যাপার (অবস্থান: আপেক্ষিক;) .বক্স (উচ্চতা: 100px; অবস্থান: পরম; শীর্ষ: 50%; মার্জিন: -50px 0 0 0; ) 2.3। টেবিলের ধরন অনুসারে উল্লম্ব প্রান্তিককরণ: .র্যাপার ( প্রদর্শন: টেবিল; প্রস্থ: 100%; ) .বক্স ( প্রদর্শন: টেবিল-সেল; উচ্চতা: 100px; পাঠ্য-সারিবদ্ধ: কেন্দ্র; উল্লম্ব-সারিবদ্ধ: মধ্যম; ) 2.4। যদি একটি বাক্সকে একটি প্রস্থ এবং উচ্চতা দেওয়া হয় এবং এটির মূল বাক্সের উপর কেন্দ্রীভূত করা প্রয়োজন: .র্যাপার ( অবস্থান: আপেক্ষিক; ) .বক্স ( উচ্চতা: 100px; প্রস্থ: 100px; অবস্থান: পরম; শীর্ষ: 0; ডান: 0; নীচে: 0; মার্জিন: অটো; CSS3 রূপান্তর ব্যবহার করে পৃষ্ঠা/ব্লকের কেন্দ্রে পরম অবস্থান:

যদি উপাদানটির জন্য মাত্রা নির্দিষ্ট করা হয়

div ( প্রস্থ: 300px; /*ব্লকের প্রস্থ সেট করুন*/ উচ্চতা: 100px; /*ব্লকের উচ্চতা সেট করুন*/ রূপান্তর: অনুবাদ(-50%, -50%); অবস্থান: পরম; শীর্ষ: 50 %; বাম: 50%;

যদি উপাদানটির কোন মাত্রা না থাকে এবং খালি না থাকে

এখানে কিছু পাঠ্য h1 ( মার্জিন: 0; রূপান্তর: অনুবাদ (-50%, -50%); অবস্থান: পরম; শীর্ষ: 50%; বাম: 50%; )

2.5। পরম ব্লক অবস্থান

পৃষ্ঠায় কেন্দ্রীভূত

div ( প্রস্থ: 500px; উচ্চতা: 100px; /* উচ্চতা স্পষ্টভাবে সেট করা না থাকলে, এটি হবে 100% */ অবস্থান: পরম; শীর্ষ: 0; নীচে: 0; বাম: 0; ডান: 0; মার্জিন: স্বয়ংক্রিয় ;)

ব্লকের কেন্দ্রে

.র্যাপার ( অবস্থান: পরম; ) .বক্স ( প্রস্থ: 100px; উচ্চতা: 100px; /* উচ্চতা স্পষ্টভাবে সেট করা না থাকলে, এটি 100% */ অবস্থান হবে: পরম; শীর্ষ: 0; নীচে: 0; বাম: 0; ডান: 0; অটো;

পৃষ্ঠায় তাদের প্রয়োজনীয় তথ্য খুঁজে পাওয়া একজন দর্শকের পক্ষে সহজ হওয়া উচিত। এর জন্য বিভিন্ন এইচটিএমএল ট্যাগ ব্যবহার করা হয়, পাশাপাশি কিছু অভিব্যক্তি প্রকাশের জন্য। এই নিবন্ধটি টেবিলের সাথে কাজ করার সূক্ষ্মতা নিয়ে আলোচনা করবে, বিশেষ করে তাদের প্রান্তিককরণ।

মৌলিক সূক্ষ্মতা

প্রথমত, এটা উল্লেখ করা উচিত যে এই গ্রাফিক ফর্মডেটা প্রেজেন্টেশন আপনাকে তথ্য গঠন করতে দেয়, যা এর আত্তীকরণকে ব্যাপকভাবে সহজ করে। প্রায় যেকোনো বিষয়বস্তু টেবিলের ঘরের ভিতরে থাকতে পারে: পাঠ্য থেকে ভিডিও পর্যন্ত। শুধুমাত্র আকার নয়, এর অবস্থানও বিবেচনায় নেওয়া গুরুত্বপূর্ণ।

কিভাবে টেবিল নিজেই কেন্দ্রে

প্রায়শই, আপনাকে পৃষ্ঠার কেন্দ্রে টেবিলটি সাজাতে হবে, যদিও প্রাথমিকভাবে এটি পৃষ্ঠার বাম দিকের বিরুদ্ধে চাপা হয়। এটিকে কেন্দ্রে সারিবদ্ধ করার জন্য, আপনাকে এর মার্জিন সম্পত্তি অটোতে সেট করতে হবে।

...

এর ফলে টেবিল ইন্ডেন্টেশন স্বয়ংক্রিয়ভাবে গণনা করা হয়। এর পরে, টেবিলটি পৃষ্ঠার কেন্দ্রে থাকবে।

কোষে কেন্দ্র সারিবদ্ধকরণ

ঠিক প্রায়ই, আপনাকে কোষের কেন্দ্রে ডেটা সারিবদ্ধ করতে হবে। এটি করার তিনটি উপায় রয়েছে: অনুভূমিক, উল্লম্ব এবং পরম। তাদের নাম থেকে এটি স্পষ্ট যে কোন অক্ষ বরাবর কেন্দ্রীভূত হবে। যে কোনো ক্ষেত্রে, ট্যাগ ব্যবহার করা হয় , একটি সারিতে একটি নির্দিষ্ট ঘরের জন্য দায়ী। এরপরে, আপনার কাজের উপর নির্ভর করে আপনাকে এর ভ্যালাইন (উল্লম্ব) এবং/অথবা সারিবদ্ধ (অনুভূমিক) গুণাবলী "কেন্দ্র" নির্ধারণ করতে হবে:

কক্ষে কেন্দ্রীভূত পাঠ্য

আপনি যদি সমগ্র সাইট বা পৃষ্ঠার জন্য এই ফর্ম্যাটিং স্ট্যান্ডার্ড করতে চান (যাতে প্রতিটি টেবিল পুনরায় লেখা না হয়), তাহলে আপনার CSS শৈলী ব্যবহার করা উচিত। এটি করার জন্য, ট্যাগের ভিতরে নিম্নলিখিত কোড যোগ করুন:

টেবিল (পাঠ্য-সারিবদ্ধ: কেন্দ্র; // টেবিলের বিষয়বস্তু অনুভূমিকভাবে কেন্দ্রীভূত উল্লম্বভাবে সারিবদ্ধ করতে: মধ্যম; // টেবিলের বিষয়বস্তু উল্লম্বভাবে কেন্দ্রীভূত করতে)

এই পদ্ধতিটি ব্যবহার করে, আপনি একটি নির্দিষ্ট ঘর, একটি কলাম, একটি সারি, বা সমগ্র টেবিলের জন্য প্রান্তিককরণ সেট করতে পারেন। আপনি দেখতে পাচ্ছেন, যে কোনও পদ্ধতি খুব সহজ।

আপনি যদি html এর ভিত্তিতে তৈরি যেকোন ওয়েবসাইটে কাট করেন, আপনি একটি নির্দিষ্ট স্তরযুক্ত কাঠামো দেখতে পাবেন। তাছাড়া নিজের সাথে চেহারাএটা অনুরূপ হবে স্তর পিষ্টক. আপনি যদি তাই মনে করেন, তাহলে সম্ভবত আপনি দীর্ঘদিন ধরে খাননি। তাই প্রথমে আপনার ক্ষুধা মেটান, এবং তারপরে আমরা আপনাকে বলব কিভাবে আপনার সাইটে একটি div স্তর কেন্দ্রীভূত করবেন:

ট্যাগ ব্যবহার করে লেআউটের সুবিধা

দুটি প্রধান ধরনের ওয়েবসাইট গঠন আছে:

• ট্যাবুলার;
• ব্লক।

এমনকি ইন্টারনেটের শুরুতে ট্যাবুলার লেআউট প্রভাবশালী ছিল। এর সুবিধার মধ্যে নির্দিষ্ট অবস্থানের নির্ভুলতা অন্তর্ভুক্ত। কিন্তু, তবুও, এর সুস্পষ্ট ত্রুটি রয়েছে। প্রধান বেশী কোড ভলিউম এবং কম গতিডাউনলোড

টেবিল লেআউট ব্যবহার করার সময়, ওয়েব পৃষ্ঠাটি সম্পূর্ণরূপে লোড না হওয়া পর্যন্ত প্রদর্শিত হবে না। ডিভ ব্লক ব্যবহার করার সময়, উপাদানগুলি অবিলম্বে প্রদর্শিত হয়।

উচ্চ লোডিং গতি ছাড়াও, সাইটের ব্লক নির্মাণ আপনাকে কয়েকবার ভলিউম কমাতে দেয় html কোড. CSS ক্লাস ব্যবহারের মাধ্যমে সহ।

যাইহোক, পৃষ্ঠায় ডেটা প্রদর্শনের কাঠামোর জন্য ট্যাবুলার লেআউট ব্যবহার করা উচিত। এর ব্যবহারের একটি ক্লাসিক উদাহরণ হল টেবিলের প্রদর্শন।

ট্যাগের উপর ভিত্তি করে ব্লক নির্মাণকে লেয়ার-বাই-লেয়ারও বলা হয় এবং ব্লকগুলোকে লেয়ার বলা হয়। এর কারণ হল যখন নির্দিষ্ট সম্পত্তির মান ব্যবহার করা হয়, তখন ফটোশপের স্তরগুলির মতো সেগুলি একে অপরের উপরে স্ট্যাক করা যেতে পারে।

পজিশনিং এইডস

ব্লক লেআউটে, ক্যাসকেডিং স্টাইল শীট ব্যবহার করে স্তরগুলি স্থাপন করা ভাল। লেআউটের জন্য দায়ী প্রধান CSS প্রপার্টি হল ফ্লোট।
সম্পত্তি সিনট্যাক্স:
float: বাম | অধিকার | কোনোটিই না | উত্তরাধিকারী
কোথায়:

• বাম - উপাদানটিকে পর্দার বাম প্রান্তে সারিবদ্ধ করুন। অবশিষ্ট উপাদানগুলির চারপাশে প্রবাহ ডানদিকে ঘটে;
• ডান - ডানদিকে প্রান্তিককরণ, অন্যান্য উপাদানগুলির চারপাশে প্রবাহ - বাম দিকে;
• কোনটিই - মোড়ানো অনুমোদিত নয়;
• inherit - প্যারেন্ট উপাদানের মান উত্তরাধিকারসূত্রে পায়।

আসুন এই সম্পত্তি ব্যবহার করে পজিশনিং ডিভের একটি হালকা উদাহরণ দেখি:

#left ( প্রস্থ: 200px; উচ্চতা: 100px; float: left; background: rgb(255,51,102); ) #right (প্রস্থ: 200px; উচ্চতা: 100px; float: right; background: rgb(0,255,153 Left ব্লক); ডান ব্লক

এখন আমরা পৃষ্ঠার কেন্দ্রে তৃতীয় ডিভের অবস্থানের জন্য একই বৈশিষ্ট্য ব্যবহার করার চেষ্টা করব। কিন্তু দুর্ভাগ্যবশত ফ্লোটের একটি কেন্দ্র মান নেই। এবং যখন আপনি একটি নতুন ব্লককে ডান বা বামে একটি সারিবদ্ধ মান দেন, তখন এটি নির্দিষ্ট দিকে স্থানান্তরিত হয়। অতএব, যা অবশিষ্ট থাকে তা হল ফ্লোট সেট করা: তিনটি ব্লকে বাম:

তবে এটিও সেরা বিকল্প নয়। যখন জানালার আকার ছোট করা হয়, তখন সমস্ত স্তর উল্লম্বভাবে এক সারিতে সারিবদ্ধ হয়, এবং যখন আকার বাড়ানো হয়, তখন তারা উইন্ডোর বাম প্রান্তে লেগে থাকে। তাই আমরা div কেন্দ্রে একটি ভাল উপায় প্রয়োজন.

কেন্দ্রীভূত স্তর

পরবর্তী উদাহরণে, আমরা একটি ধারক স্তর ব্যবহার করব যেখানে আমরা অবশিষ্ট উপাদানগুলি রাখব। এটি উইন্ডোর আকার পরিবর্তন করা হলে একে অপরের সাথে আপেক্ষিকভাবে চলন্ত ব্লকের সমস্যা সমাধান করে। মাঝখানে ধারকটিকে কেন্দ্রীভূত করা হয় উপরের প্রান্ত থেকে মার্জিনের জন্য মার্জিনের বৈশিষ্ট্যগুলিকে শূন্য করে এবং পাশের অটো (মার্জিন: 0 স্বয়ংক্রিয়):

#কন্টেইনার (প্রস্থ: 600px; মার্জিন: 0 স্বয়ংক্রিয়; ) #বাম (প্রস্থ: 200px; উচ্চতা: 100px; ফ্লোট: বাম; ব্যাকগ্রাউন্ড: rgb(255,51,102); ) #ডান (প্রস্থ: 200px; উচ্চতা: 100px; ফ্লোট : বাম; ব্যাকগ্রাউন্ড: rgb(0,255,153); #center (প্রস্থ: 200px; উচ্চতা: 100px; ফ্লোট: বাম; ব্যাকগ্রাউন্ড: rgb(255,0,0); ) বাম ব্লক সেন্টার ব্লক

একই উদাহরণ দেখায় কিভাবে আপনি অনুভূমিকভাবে একটি ডিভ কেন্দ্র করতে পারেন। এবং আপনি যদি উপরের কোডটি একটু সম্পাদনা করেন তবে আপনি অর্জন করতে পারেন উল্লম্ব প্রান্তিককরণব্লক এটি করার জন্য, আপনাকে কেবল ধারক স্তরের দৈর্ঘ্য পরিবর্তন করতে হবে (এটি হ্রাস করুন)। অর্থাৎ, এর সিএসএস ক্লাস সম্পাদনা করার পরে এটির মতো হওয়া উচিত:

পরিবর্তনের পরে, সমস্ত ব্লক মাঝখানে একটি সারিতে কঠোরভাবে সারিবদ্ধ হবে। এবং ব্রাউজার উইন্ডোর আকার নির্বিশেষে তাদের অবস্থান পরিবর্তন হবে না। একটি ডিভকে উল্লম্বভাবে কেন্দ্রীভূত করা দেখতে কেমন তা এখানে রয়েছে:

নিম্নলিখিত উদাহরণে, আমরা একটি ধারক ভিতরে স্তর কেন্দ্রীভূত করতে বেশ কয়েকটি নতুন CSS বৈশিষ্ট্য ব্যবহার করেছি:

#কন্টেইনার ( প্রস্থ: 450px; উচ্চতা: 150px; মার্জিন: 0 স্বয়ংক্রিয়; ব্যাকগ্রাউন্ড-রঙ: #66CCFF; ) #বাম (প্রস্থ: 100px; উচ্চতা: 100px; পটভূমি: rgb(255,51,102); প্রদর্শন: ইনলাইন-ব্লক; উল্লম্ব-সারিবদ্ধ: মধ্যম-বাম: 35পিক্স #কেন্দ্র (প্রস্থ: 100px; উচ্চতা: 100px; পটভূমি: rgb(255,0,0); প্রদর্শন: ইনলাইন-ব্লক; উল্লম্ব-সারিবদ্ধ: মধ্যম; মার্জিন-বাম: 35px; )

CSS বৈশিষ্ট্য এবং তাদের মানগুলির একটি সংক্ষিপ্ত বিবরণ যা আমরা এই উদাহরণে একটি div এর মধ্যে একটি div কেন্দ্রে ব্যবহার করেছি:

• প্রদর্শন: ইনলাইন-ব্লক - একটি ব্লক উপাদানকে একটি লাইনে সারিবদ্ধ করে এবং এটি অন্য উপাদানের চারপাশে মোড়ানো নিশ্চিত করে;
• উল্লম্ব-সারিবদ্ধ: মাঝামাঝি - প্যারেন্টের সাপেক্ষে মাঝখানে উপাদানটিকে সারিবদ্ধ করে;
• margin-left – বাম মার্জিন সেট করে।

কিভাবে একটি স্তর থেকে একটি লিঙ্ক তৈরি করতে হয়

শুনতে অদ্ভুত, এটা সম্ভব। কখনও কখনও লেআউটের সময় লিঙ্ক হিসাবে একটি ডিভ ব্লকের প্রয়োজন হতে পারে বিভিন্ন ধরনেরমেনু আসুন একটি লিঙ্ক স্তর বাস্তবায়নের একটি বাস্তব উদাহরণ দেখি:

#layer1( প্রস্থ: 500px; উচ্চতা: 100px; পটভূমি: rgb(51,255,204); সীমানা: খাঁজ; ) a ( প্রদর্শন: ব্লক; পাঠ্য-সারিবদ্ধ: কেন্দ্র; উচ্চতা: 100%; রঙ: rgb(255,0,51) ;) আমাদের ওয়েবসাইটের লিঙ্ক

এই উদাহরণে, লাইন প্রদর্শন: ব্লক ব্যবহার করে, আমরা একটি ব্লক উপাদানের মানের লিঙ্ক সেট করি। এবং যাতে ডিভ ব্লকের সম্পূর্ণ উচ্চতা একটি লিঙ্কে পরিণত হয়, উচ্চতা নির্ধারণ করুন: 100%।

লুকানো এবং ব্লক উপাদান দেখানো

ব্লক উপাদানগুলি পুরানো ট্যাবুলার লেআউটের চেয়ে ইন্টারফেসের কার্যকারিতা প্রসারিত করার আরও সুযোগ প্রদান করে। এটি প্রায়শই ঘটে যে ওয়েবসাইট ডিজাইনটি অনন্য এবং স্বীকৃত। কিন্তু এই ধরনের একচেটিয়া জন্য আপনাকে বিনামূল্যে স্থানের অভাবের সাথে অর্থ প্রদান করতে হবে।

এটি প্রধান পৃষ্ঠার জন্য বিশেষভাবে সত্য, যার উপর বিজ্ঞাপনের খরচ সবচেয়ে বেশি। অতএব, সমস্যা দেখা দেয় কোথায় অন্যকে "ধাক্কা" দিতে হবে বিজ্ঞাপন ব্যানার. এবং এখানে আপনি পৃষ্ঠার কেন্দ্রে div সারিবদ্ধ করে দূরে যেতে পারবেন না!

একটি আরো যুক্তিসঙ্গত সমাধান কিছু ব্লক লুকানো করা হয়. এখানে এই ধরনের একটি বাস্তবায়নের একটি সহজ উদাহরণ:

#layer1( প্রদর্শন: ব্লক; প্রস্থ: 500px; উচ্চতা: 100px; ব্যাকগ্রাউন্ড: rgb(51,255,204); বর্ডার: গ্রুভ; ) ফাংশন শো() ( if(layer1=="none") (layer1="block"; ) else (layer1="none"; ) document.getElementById("layer1").style.display=layer1 )

এই যাদু বোতাম. এটিতে ক্লিক করলে হাইডিং ব্লকটি হাইড বা দেখাবে।

এই উদাহরণে, ডিভ ব্লকের অবস্থান কোনোভাবেই পরিবর্তন হয় না। এখানে এটি ব্যবহার করা হয় সহজ ফাংশনজাভাস্ক্রিপ্ট মান পরিবর্তন css বৈশিষ্ট্যবোতামে ক্লিক করার পরে প্রদর্শন করুন (অনক্লিক ইভেন্ট)।

শুরু করুন