এইচটিএমএল পৃষ্ঠাগুলিতে ব্লক তৈরি করতে ট্যাগটি সক্রিয়ভাবে ওয়েব ডিজাইনে ব্যবহৃত হয়, যার ভিতরে আপনি কোনও প্রকৃতির সামগ্রী - পাঠ্য, ছবি, টেবিল ইত্যাদি রাখতে পারেন inside
নির্দেশনা
ধাপ 1
ব্যবহৃত হলে, একটি শেষ ট্যাগ প্রয়োজন required এটি নিম্নলিখিত বৈশিষ্ট্যগুলির সাথে ব্যবহার করা যেতে পারে:
- প্রান্তিককরণ - প্রান্তিককরণ (বাম, কেন্দ্র, ডান, ন্যায্যতা), উদাহরণস্বরূপ, পাঠ্য;
- শ্রেণি - শ্রেণীর নাম (পাঠ্য);
- আইডি - এইচটিএমএল ট্যাগ শনাক্তকারীর নাম;
- শৈলী - শৈলীর দিক;
- শিরোনাম - সরঞ্জামদণ্ড।
ধাপ ২
ব্লকগুলি ব্যবহার করার সময়, স্টাইল শীটটি ব্যবহার করার পরামর্শ দেওয়া হয়। উদাহরণস্বরূপ, আপনি যদি কোনও পৃষ্ঠায় লিখিত সামগ্রী সহ দুটি পৃথক ব্লক তৈরি করতে চান, তবে কোডটি এর মতো দেখতে পাবেন:
। block1 {
প্রস্থ: 500px;
উচ্চতা: 200px;
পটভূমি: হলুদ;
প্যাডিং: 0 পিএক্স;
প্যাডিং-ডান: 0 পিএক্স;
সীমানা: শক্ত 0px কালো;
ভাসা: বাম;
}
। block2
প্রস্থ: 200px;
উচ্চতা: 500;
পটভূমি: সবুজ;
প্যাডিং: 0 পিএক্স;
প্যাডিং-ডান: 0 পিএক্স;
সীমানা: শক্ত 0px কালো;
ভাসা: ডান;
}
হলুদ ব্লকটি প্রথম এক যা 500px প্রস্থ এবং 200px দৈর্ঘ্য সহ।
সবুজ ব্লকটি প্রথমটি যার প্রস্থ 200px এবং দৈর্ঘ্য 500px রয়েছে।
ধাপ 3
শৈলীর সাহায্যে ব্লকের ডান দিকের / বাম পাশে প্রান্তিককরণ সেট করা যেতে পারে:
.leftimg
ভাসা: বাম;
মার্জিন: 5px 15px 7px 0;
}
.rightimg
ভাসা: ডান;
মার্জিন: 7px 0 7px 7px;
}
পদক্ষেপ 4
ট্যাগটির সাহায্যে, আপনি ছবিগুলির বিকল্প পরিবর্তনের ব্যবস্থা করতে পারেন।
div # ঘূর্ণনকারী {অবস্থান: আপেক্ষিক; উচ্চতা: 150px; মার্জিন-বাম: 15px;
ডিভি # রোটার উল লি {ফ্লোট: বাম; অবস্থান: পরম; তালিকা-শৈলী: কিছুই নয়}
ডিভ # রোটেটার উল লি.শো {জেড-ইনডেক্স: 500;
ফাংশন the রোটার () {
'(' ডিভ # রোটেটার উল লি ') c সিএসএস ({অস্বচ্ছতা: 0.0});
; ('ডিভ # রোটেটার উল লি: প্রথম') c সিএসএস ({অস্বচ্ছতা: 1.0});
সেটইন্টারভাল ('ঘোরানো ()', 5000);
}
ফাংশন ঘোরান () {
var কারেন্ট = (div ('ডিভি # রোটোটার আল লি.শো'))? $ ('ডিভ # রোটেটর আল লি.শো'): $ ('ডিভ # রোটেটার উল লি: প্রথম'));
var পরের = ((কারেন্ট.নেক্সট () দৈর্ঘ্য)? ((কারেন্ট.নেক্সট ()। হ্যাশ ক্লাস ('শো'))? $ ('ডিভি # রোটার উল লি: প্রথম'): কারেন্ট.নেক্সট ()):; ('ডিভ # রোটেটার উল লি: প্রথম'));
// var sibs = কারেন্ট.সাইবলিংস ();
// var rndNum = ম্যাথ.ফ্লোর (ম্যাথ.র্যান্ডম () * sibs.length);
// var পরবর্তী = = (sibs [rndNum]);
পরের.কম ({অস্বচ্ছতা: 0.0})
.addClass ('শো')
.animate ({অস্বচ্ছতা: 1.0}, 1000);
কারেন্ট.নিমেট ({অস্বচ্ছতা: 0.0}, 1000)
.removeClass ('শো');
};
document (দস্তাবেজ)। প্রস্তুত (ফাংশন () {
দ্য রোটার ();
});
