06 এর 01
CSS এবং No Images এর সাথে ট্যাবড ন্যাভিগেশন কিভাবে তৈরি করবেন
ওয়েব পেজ নেভিগেশন নেভিগেশন একটি তালিকা একটি ফর্ম, এবং ট্যাবযুক্ত নেভিগেশান একটি অনুভূমিক তালিকার মত। সিএসএসের সাথে অনুভূমিক ট্যাবডড ন্যাভিগেশন তৈরি করা মোটামুটি সহজ, কিন্তু সিএসএস 3 আমাদের আরো কিছু টুল দেয় যা তাদের আরও সুন্দর করে তুলতে দেয়।
এই টিউটোরিয়াল আপনাকে একটি CSS ট্যাবড মেনু তৈরি করতে প্রয়োজন HTML এবং CSS এর মাধ্যমে নিয়ে যাবে। এটি দেখতে হবে কিভাবে দেখতে যে লিংক ক্লিক করুন।
এই ট্যাবড মেনু কোন ইমেজ ব্যবহার করে না , শুধু HTML এবং CSS 2 এবং CSS 3। আরও ট্যাব যুক্ত করতে বা তাদের মধ্যে পাঠ্য পরিবর্তন করতে এটি সহজেই সম্পাদনা করা যায়।
ব্রাউজার সাপোর্ট
এই ট্যাব মেনু সমস্ত প্রধান ব্রাউজারে কাজ করবে। ইন্টারনেট এক্সপ্লোরার বৃত্তাকার কোণ প্রদর্শন করবে না, তবে অন্যথায় এটি ফায়ারফক্স, সাফারি, অপেরা এবং ক্রোমের মত ট্যাবগুলি দেখাবে।
06 এর 02
আপনার মেনু তালিকা লিখুন
সমস্ত নেভিগেশন মেনু এবং ট্যাব সত্যিই একটি unordered তালিকা হয়। তাই আপনি যা করতে চান তা হল প্রথমবারের মতো আপনার ট্যাবডেড নেভিগেশানটি যেখানে আপনি চান সেখানে লিঙ্কগুলির একটি unordered তালিকা লিখুন।
এই টিউটোরিয়ালটি অনুমান করা হয় যে আপনি আপনার এইচটিএমএল একটি টেক্সট এডিটর লিখেছেন এবং আপনার ওয়েব পেজে আপনার মেনুর জন্য HTML কোথায় রাখবে তা আপনি জানেন।
এই মত আপনার unordered তালিকা লিখুন:
- বর্গ = "tablist">
- CSS 3
- আইডি = "বর্তমান"> ট্যাবগুলি
- জন্য
- মেনু
আপনি লক্ষ্য করবেন যে কোডটি দুটি বিষয় বলে: ক্লাস = "ট্যাবলস্ট" এবং id = "বর্তমান"। প্রথম প্রয়োজন । আপনি যদি আপনার অনির্বাচিত তালিকাতে ট্যাবলিস্ট শ্রেণী না রাখেন তবে ট্যাবগুলি কাজ করবে না। দ্বিতীয়টি ঐচ্ছিক। যে পৃষ্ঠাতে আপনি যে পৃষ্ঠাটি হাইলাইট করতে চান তা id = "বর্তমান" রাখুন। আমি সাধারণত যে পৃষ্ঠাটিতে আছি তা হাইলাইট করার জন্য এটি ব্যবহার করি, তবে আপনি এটি সবচেয়ে গুরুত্বপূর্ণ ট্যাব হাইলাইট করতে ব্যবহার করতে পারেন। অথবা আপনি এটি সম্পূর্ণভাবে মুছে ফেলতে পারেন।
06 এর 03
আপনার স্টাইল শীট সম্পাদন শুরু করুন
আপনি একটি বহিরাগত স্টাইল শীট বা একটি অভ্যন্তরীণ শৈলী শীট ব্যবহার করতে পারেন। নমুনা মেনু পৃষ্ঠা নথির
মধ্যে একটি অভ্যন্তরীণ শৈলী শীট ব্যবহার করে।প্রথম আমরা উল নিজেকে স্টাইল হবে
এই যেখানে আমরা ক্লাস ট্যাবলেট ব্যবহার। এইচটিএমএল মধ্যে। UL ট্যাগটি স্টাইল করার পরিবর্তে, আপনার পৃষ্ঠায় সমস্ত অনির্বাচিত তালিকাটি স্টাইল করবে, আপনাকে কেবলমাত্র উল শ্রেণীতে শৈলী করা উচিত। tablist সুতরাং আপনার CSS প্রথম এন্ট্রি হতে হবে:
.tablist {}আমি শেষ করুণাময় বক্রবন্ধনী ()} এগিয়ে সময় পছন্দ করি, তাই আমি এটা পরে ভুলবেন না।
আমরা ট্যাব মেনু তালিকার জন্য একটি অনির্বাচিত তালিকা ট্যাগ ব্যবহার করছি, কিন্তু আমরা কোন বুলেট বা নম্বর ক্রপ করতে চাই না। সুতরাং আপনি যে প্রথম শৈলীটি যোগ করতে চান তা হল। তালিকা-শৈলী: কেউ না; এটি ব্রাউজারকে বলে যে এটি একটি তালিকা যখন, এটি একটি পূর্ব নির্ধারিত শৈলী (যেমন বুলেট বা সংখ্যা) সহ একটি তালিকা।
তারপর, আপনি যে স্থানটি পূরণ করতে চান সেটির সাথে আপনি আপনার তালিকার উচ্চতা সেট করতে পারেন। আমি আমার উচ্চতা 2em চয়ন করেছি, যেটি মানক ফন্টের আকার দ্বিগুণ করে এবং ট্যাবের পাঠ্যের নীচের ও নীচের অর্ধেক একটি এম ই দেয়। উচ্চতা: 2em; তবে আপনি আপনার প্রস্থকে যে পরিমাণ আকারে চান তা সেট করতে পারেন। উল ট্যাগগুলি স্বয়ংক্রিয়ভাবে 100% প্রস্থে উঠবে, তাই আপনি যদি বর্তমান ধারকের চেয়ে ছোট হতে চান তবে আপনি প্রস্থ আউটটি ছেড়ে দিতে পারেন।
অবশেষে, যদি আপনার মাস্টার স্টাইল শীট UL এবং OL ট্যাগগুলির জন্য প্রিসেট না থাকে, আপনি তাদের ভিতরে রাখতে চান। এর মানে হল যে আপনি আপনার ইউএল সীমানা, মার্জিন এবং প্যাডিং বন্ধ করতে হবে। প্যাডিং: 0; মার্জিন: 0; সীমান্ত: কেউ না; যদি আপনি ইতিমধ্যে উল ট্যাগ পুনঃসেট করা আছে, আপনি মার্জিন, প্যাডিং, অথবা সীমানা পরিবর্তন করতে পারেন যা আপনার ডিজাইনের সাথে ফিট করে।
আপনার চূড়ান্ত। টেবিলস্ট ক্লাস এই মত হওয়া উচিত:
.tablist {তালিকা-শৈলী: কেউ না; উচ্চতা: 2em; প্যাডিং: 0; মার্জিন: 0; সীমান্ত: কেউ না; }06 এর 04
লি তালিকা আইটেম সম্পাদনা
একবার আপনি আপনার অনির্বাচিত তালিকা স্টাইল করেছি, আপনি এটি ভিতরে এল ট্যাগ শৈলী প্রয়োজন। অন্যথায়, তারা আপনার ট্যাবগুলিকে যথোপযুক্তভাবে না জানিয়ে একটি প্রমিত তালিকার মতো কাজ করবে এবং পরের লাইনে প্রতিটি পদক্ষেপটি করবে।
প্রথম, আপনার শৈলী সম্পত্তি সেট আপ:
.tablist li {}তারপর আপনি আপনার ট্যাবগুলি ভাসতে চান যাতে তারা অনুভূমিক সমতলতে লাইন আপ করে। ভাসা: বামে;
এবং ট্যাবের মধ্যে কিছু মার্জিন যোগ করতে ভুলবেন না, তাই তারা একসাথে একত্রিত হয় না। মার্জিন ডান: 0.13em;
আপনার li শৈলী এই মত হওয়া উচিত:
.বিস্তলী লি {ফ্লোট: বাম; মার্জিন ডান: 0.13em; }06 এর 05
ট্যাবগুলি তৈরি করুন CSS 3 এর সাথে ট্যাবগুলি দেখুন
এই স্টাইল শীট মধ্যে ভারী উদ্ধরণ অধিকাংশ করতে, আমি unordered তালিকা মধ্যে লিঙ্ক লক্ষ্য করছি। ব্রাউজারগুলি সনাক্ত করে যে লিঙ্কগুলি অন্য ট্যাগের চেয়ে একটি ওয়েবপৃষ্ঠাতে আরও বেশি করে থাকে, তাই পুরোনো ব্রাউজারগুলি যদি আপনি নোঙ্গর ট্যাগ (লিঙ্কগুলি) সংযুক্ত করেন তবে হভার স্টেটসগুলির মতো জিনিসগুলি মেনে চলতে আরও সহজ হবে। সুতরাং আপনার শৈলী বৈশিষ্ট্য লিখুন:
.তাবলিস্ট লি একটি {}। টেবিস্ট লি একটি: হভার {}যেহেতু এই ট্যাবগুলি একটি অ্যাপ্লিকেশনে ট্যাবগুলির মত আচরণ করা উচিত, আপনি কেবল ট্যাবটির সম্পূর্ণ এলাকা ক্লিকযোগ্য না, কেবল সংযুক্ত পাঠ্যটি নয়। এটি করার জন্য, আপনাকে একটি ট্যাগটিকে " ব্লক উপাদান " এর সাধারণ " ইনলাইন " রাষ্ট্র থেকে রূপান্তর করতে হবে। প্রদর্শন ব্লক; (যদি আপনি পার্থক্য সম্পর্কে আরো জানতে আগ্রহী হন, ব্লক লেভেল বনাম ইনলাইন উপাদানগুলি পড়ুন ।)
তারপর, আপনার ট্যাবগুলি একে অপরকে সমমর্যায়িত করতে বাধ্য করার একটি সহজ উপায়, কিন্তু টেক্সটের প্রস্থের মাপসই ফ্লেক্সে ডান এবং বাম প্যাডিংটি একই। আমি শীর্ষে এবং নীচে 0 এবং ডান এবং 1em বামে সেট করার জন্য প্যাডিং শর্টথ্যান্ট সম্পত্তি ব্যবহার করেছি। প্যাডিং: 0 1em;
আমি লিঙ্কে নিম্নরেখা মুছে ফেলার জন্যও বেছে নিয়েছি, যাতে ট্যাব লিঙ্কগুলির মতো কম দেখায়। কিন্তু যদি আপনার শ্রোতা যে দ্বারা বিভ্রান্ত হতে পারে, এই লাইনটি ছেড়ে দিন। লিংক-প্রসাধন: কেউ না;
ট্যাবের চারপাশে একটি পাতলা সীমা রেখে, এটি তাদের ট্যাবগুলির মত দেখাচ্ছে। সীমান্তের চারপাশে সীমান্তের চারপাশের সীমান্তে সীমান্তের শরীয়তের সম্পত্তি ব্যবহার করা হয়েছে: 0.06 ইঞ্চি কঠিন # 000; এবং তারপর নীচে থেকে এটি সরিয়ে সীমান্তের নীচে সম্পত্তি ব্যবহার। সীমান্তে নীচে: 0;
তারপর আমি ট্যাবের ফন্ট, রঙ এবং পটভূমির রঙের কিছু সমন্বয় তৈরি করেছিলাম। এই শৈলীতে সেট করুন যা আপনার সাইটের সাথে মেলে। ফন্ট: গাঢ় 0.88em / 2em এরিয়েল, জিনেভ, হ্যালোস্টিকা, সান-সেরিফ; রঙ: # 000; পটভূমি-রঙ: #ccc;
উপরের সমস্ত শৈলীর নির্বাচনকারী নির্বাচন করা উচিত। টাস্টিস্ট লি একটি, নিয়মটি যাতে সাধারণভাবে অ্যাঙ্কর ট্যাগগুলি প্রভাবিত করে। তারপর ট্যাবগুলি আরও ক্লিকযোগ্য করে তুলতে আপনাকে কয়েকটি রাজ্য বিধি যোগ করতে হবে। টেমপ্লেটটি একটি: হভার।
আমি মাউস উপর ক্লিক করুন যখন আমি ট্যাব পপ করতে টেক্সট এবং ব্যাকগ্রাউন্ড রঙ পরিবর্তন করতে চান। পটভূমি: # 3cf; রঙ: #fff;
এবং আমি ব্রাউজারে আরেকটি অনুস্মারক অন্তর্ভুক্ত করেছি যাতে আমি চাই যে লিঙ্কটি অন্তর্ভূক্ত না থাকে। টেক্সট প্রসাধন: কেউ না; আরেকটি সাধারণ পদ্ধতি হল ট্যাবটির উপর মাউসের উপর রেখাঙ্কনটি চালু করা। যদি আপনি এটি করতে চান, এটি টেক্সট-সজ্জা পরিবর্তন করুন: নিম্নরেখা;
কিন্তু CSS 3 কোথায়?
আপনি যদি মনোযোগ দিচ্ছেন, তবে আপনি সম্ভবত লক্ষ্য করেছেন যে শৈলী শীটটিতে ব্যবহৃত কোন CSS 3 শৈলী নেই। এটি ইন্টারনেট এক্সপ্লোরার সহ কোনও আধুনিক ব্রাউজারে কাজ করার সুবিধা রয়েছে। কিন্তু এটি ট্যাবগুলি বর্গাকার বাক্সগুলির চেয়ে বেশি কিছু দেখায় না। একটি CSS 3 শৈলী কল সীমান্ত-ব্যাসার্ধ (এবং এটি সংশ্লিষ্ট ব্রাউজার-নির্দিষ্ট কলগুলি) যুক্ত করে আপনি একটি ম্যানিলার ফোল্ডারে ট্যাবগুলির মতো আরো দেখতে, বাহিরে প্রান্ত তৈরি করতে পারেন।
আপনি .tablist li- এ যোগ করতে চান এমন শৈলীগুলি হল: - ওয়েবকাইট-সীমানা-শীর্ষ-ডান-ব্যাসার্ধ: 0.50 সংখ্যা; -webkit সীমানা-টপ-বাম-ব্যাসার্ধ: 0.50em; -moz-সীমান্তে ব্যাসার্ধ-topright: 0.50em; -moz-সীমান্তে ব্যাসার্ধ-topleft: 0.50em; সীমান্ত-টপ-ডান-ব্যাসার্ধ: 0.50em; সীমান্ত-টপ-বাম-ব্যাসার্ধ: 0.50em;
এই আমি চূড়ান্ত শৈলী নিয়ম লিখেছি:
.tablist লি একটি {প্রদর্শন: ব্লক; প্যাডিং: 0 1em; টেক্সট প্রসাধন: কেউ না; সীমানা: 0.06 ইঞ্চি কঠিন # 000; সীমান্তে নীচে: 0; ফন্ট: গাঢ় 0.88em / 2em এরিয়েল, জিনেভ, হ্যালোস্টিকা, সান-সেরিফ; রঙ: # 000; পটভূমি-রঙ: #ccc; / * CSS 3 উপাদান * / ওয়েবকিট-সীমানা-শীর্ষ-ডান-ব্যাসার্ধ: 0.50 সংখ্যা; -webkit সীমানা-টপ-বাম-ব্যাসার্ধ: 0.50em; -moz-সীমান্তে ব্যাসার্ধ-topright: 0.50em; -moz-সীমান্তে ব্যাসার্ধ-topleft: 0.50em; সীমান্ত-টপ-ডান-ব্যাসার্ধ: 0.50em; সীমান্ত-টপ-বাম-ব্যাসার্ধ: 0.50em; }। টেবিলস্ট লিঃ: হভার {ব্যাকগ্রাউন্ড: # 3 সিএফ; রঙ: #fff; টেক্সট প্রসাধন: কেউ না; }এই শৈলীগুলির সাথে, আপনার একটি ট্যাবড মেনু থাকে যা সমস্ত প্রধান ব্রাউজারগুলিতে কাজ করে এবং CSS 3- র অনুবর্তী ব্রাউজারগুলিতে চমৎকার মুদ্রিত ট্যাবের মত দেখাচ্ছে। পরের পৃষ্ঠাটি আপনাকে আরো একটি বিকল্প প্রদান করে যা আপনি এটি আরো পোষন করতে ব্যবহার করতে পারেন।
06 এর 06
বর্তমান ট্যাব হাইলাইট করুন
আমি তৈরি এইচটিএমএল, একটি আইডি সঙ্গে উল একটি তালিকা উপাদান ছিল। এটি আপনাকে বিশ্রাম থেকে আলাদা আলাদা আলাদা আলাদা স্টাইল দিতে দেয়। সবচেয়ে সাধারণ পরিস্থিতি হল বর্তমান ট্যাবটি কোন উপায়ে স্ট্যান্ড করা। এই চিন্তা করার আরেকটি উপায় হল যে আপনি যে ট্যাবগুলি লাইভ নয় তা ধূসর করতে চান। আপনি তারপর যেখানে বিভিন্ন পৃষ্ঠাগুলি আইডি আছে পরিবর্তন।
আমি # কাভার্ট এ ট্যাগের পাশাপাশি # টুরেন্ট এ উভয়কেই স্টাইল করি: হোভার স্টা তাই উভয়ই একটু ভিন্ন। আপনি রং, পটভূমির রঙ পরিবর্তন করতে পারেন, এমনকি সেই উপাদানটির উচ্চতা, প্রস্থ এবং প্যাডিং। আপনার ডিজাইনে যে পরিবর্তনগুলি বোঝা যায় তা করুন।
.tablist li # বর্তমান একটি {ব্যাকগ্রাউন্ড-রঙ: # 777; রঙ: #fff; }। টেবিলস্ট লি # বর্তমান: হভার {ব্যাকগ্রাউন্ড: # 39 সি; }এবং তুমি করে ফেলেছ! আপনি ঠিক আপনার ওয়েবসাইটের জন্য একটি ট্যাবযুক্ত মেনু তৈরি করেছেন।