سي ايس ڊي ترتيب کي ضرورت آهي ته توهان مڪمل طور تي پنهنجي ويب سائيٽ جي ترتيب جي باري ۾ سوچيو، ۽ پوء ٽڪر وٺو ۽ ان کي گڏ ڪريو. سکو ته سي ايس ڊي سان سادي 3-ڪالمن جي جوڙجڪ ڪيئن ٺاهيو.
01 جو 09
پنهنجو ترتيب ٺاھيو
توهان پنهنجي پيپر ڪاغذ تي يا گرافڪس پروگرام ۾ ٺاهي سگهو ٿا. جيڪڏهن توهان وٽ اڳ ۾ ئي هڪ تار فريم يا ذهن ۾ وڌيڪ وسيع ڊيزائن آهي، انهي کي بنيادي بڪس تي آسان بڻائي، جيڪا سائيٽ ٺاهيندي. انهي ڊزائن سان گڏ هن آرٽيڪل سان گڏ ٽي شاخن مکيه مواد واري علائقي ۾، انهي سان گڏ هڪ سرپر ۽ فوٽر آهي. جيڪڏهن توهان ويجهي نظر ايندي، ته ڏسي سگهو ٿا ته ٽن شاخن چوٽي ۾ برابر نه آهي.
توهان جي ڊيٽابيس ختم ٿيڻ کانپوء، توهان طول و عرض سوچڻ شروع ڪري سگهو ٿا. هن مثال طور ڊزائن کي هيٺيان بنيادي طيارن جا ٽڪرا آهن:
- 900 پکسل سائيز کان وڌيڪ ڪونه
- 20 پڪو گڻ واري کاٻي پاسي
- 10 سڳن ۽ قطارن جي وچ ۾
- اسڪرپٽ جيڪي 250px، 300px، ۽ 300px وسيع آهن
- مٿين قطار 150px قد آهي
- تري قطار 100px قد آهي
02 جو 09
بنيادي HTML / CSS لکڻ ڪريو ۽ هڪ ڪنٽينٽ عنصر ٺاهيو
ھن صفحي کان وٺي ھڪ صحيح HTML دستاويز ھوندي، ھڪڙو خالي HTML کنٽرر سان شروع ڪريو
<سر> <مانا http-equiv =" Content-Type "مواد =" متن / html "charset = utf-8" />بنيادي سيڊ ۾ شامل ڪريو شيلون صفحي جي چوڌاري صفن، سرحدون، ۽ ڪپڙي کان ٻاهر ڪرڻ لاء. جڏهن ته ٻيا معياري سي ايس جي شئيون موجود آهن، نيون دستاويز لاء، اهي انداز توهان کي صاف ترتيب ڏيڻ جي ضرورت هوندي آهي. توھان جي دستاويز جي سر کي شامل ڪريو
<طرز قسم = "متن / سي ايس"> html، جسم {margin: 0px؛ گنجائش: 0px؛ سرحد: 0px؛ } style>ٺاھڻ جي اڏاوت کي شروع ڪرڻ لاء، ھڪ ڪنٽينر جي عنصر ۾ وجھي. ڪڏهن ڪڏهن ائين ٿئي ٿو ته توهان کان ڪانٽائٽر کان نجات حاصل ڪري سگهو ٿا، پر اڪثر مقرر ٿيل چوٽي جي ترتيب لاء، ڪنٽرولر هجڻ وارو عنصر مختلف ويب برائوزرن ۾ منظم ڪرڻ آسان بڻائي ٿو. پوء جسم ۾ هن کي وجهي:
۽ سي ايس ڊي جي شيٽنگ شيٽ ۾ وجھي، وجھي:
#container {}03 جو 09
اسڪرين جو ڪنٽرول
ڪنٽينٽ جو بيان آهي ته ڪيئن وسيع ويب صفحي جو مواد ڪيئن هوندو، انهي سان گڏ اندر جي ٻاهران ۽ ڇنڊڇاڻ ڪنهن به مارجن. ھن دستاويز لاء، ڪنٽرول 870px وڏين آھي جنھن کي 20 بڪيل گٽر جي کاٻي پاسي آھي. گٽر کي مارجن انداز سان ٺهيل آهي، پر ڪنٽينٽرن وانگر وڏن عناصر کي روڪڻ لاء ڪنٽرول تي ڇنڊ ڇاڻ ڪيو ويو آهي.
#container {چوڪ: 870px؛ حاڪمن: 0 0 0 20px؛ / * مٿي ساڄي پاسي کاٻي پاسي * / وڌڻ: 0؛ }جيڪڏهن توهان پنهنجو دستاويز هاڻي بچايو، اهو ڪنٽرول کي ڏسڻ ڏکيو ٿيندو ڇو ته ان ۾ ڪجهه به ناهي. جيڪڏهن توهان جڳهه وارو متن شامل ڪيو ٿا، توهان وڌيڪ واضح طور تي ڪنٽرولر عنصر ڏسي سگهندا.
04 جو 09
هيڊ لاء لاء هيڊ ٽيگ استعمال ڪريو
توهان ڪهڙي طريقي سان اندازو ڪري رهيا آهيو ته صفر قطار تي ان جي مٿان گهڻو ڪجهه آهي. جيڪڏهن مٿو صف صفا صرف علامت (لوگو) گرافڪ ۽ هيڊ هجڻ وارو هوندو، پوء هڪ سر لنڪ (
) استعمال ڪندي وڌيڪ استعمال ڪري ٿي. توهان مٿين عنوان کي ڊيل اندازو ڪريو ٿا جيڪو هڪ ڊيل انداز ۾ آهي، ۽ توهان ٻاهرين ٽئڪس کان بچائي سگهو ٿا.
ايڪسسٽريٽر لاء مٿين قطار جي مٿينء قطار تي چوڻي ٿي وڃي ٿي ۽ هن وانگر آهي:
منهنجا مٿو قطار h1>
ان کان پوء، اسڪرين تي سيٽ ڪرڻ لاء، هيٺئين حد تي هڪ لال سرحد شامل ٿي ويو، تنهنڪري توهان کي ڪٿي به ختم ڪري ٿي سگهيا، مارجن ۽ ڇنڊ صفر نڪتل هيون، چوٿين 100٪ ۽ اونچائي 150px تائين:
# برائنر h1 {حاڪمن: 0؛ لڳائڻ: 0؛ چوٿون: 100٪؛ اوچائي: 150px؛ سچل: ڇڏي؛ سرحد-تري: # c00 3px لڳل؛ }هن فطرت سان هن عنصر کي فٽ ڪرڻ نه وساريو: ڇڏيو؛ ملڪيت. سي ايس ڊي لکڻ لکڻ جو اهم سڀ شيون فرائ ڪرڻ لاء آهي - جيتوڻيڪ شين جو ساڳيو چوٽي آهي ڪنٽينٽرن وانگر. اهو رستو، توهان هميشه اهو ڄاڻو ٿا ته اهي عنصر صفحي تي ڪوڙ ويندا.
سي ايس ايس جو اولاد منتخب صرف فقط H1 عناصر تي لاڳو ٿين ٿيون جيڪي #container عنصر اندر هوندا آهن.
05 جو 09
حاصل ڪرڻ لاء ٽي کالون حاصل ڪريو، ٻن ڪالمنڊ بلڊنگ کان شروع ڪريو
جڏهن توهان سي ايس سان ٽي ٽي ڪالون ترتيب ٺاهي، توهان پنهنجي ترتيب کي ٻن گروپن ۾ ورهائڻ جي ضرورت آهي. تنهن ڪري هن ٽي ڪالمن جي ترتيب لاء، وچولي ۽ دڙو ڪالمن واري گروهه کي ترتيب ڏني وئي ۽ بائیں ڪالمن جي اڳيان ٻه ڪالمن جوڙ ۾ رکيل آهي جتي کاٻي ڪاروڙ 250px وڏين آهي، ۽ سڄي ڪالمن 610px وڏين (300 ٻن شاخن لاء ، ان جي وچ ۾ گٽر جي لاء 10px).
HTML هي यो देखिन्छ:
ut aliquip اڳوڻي نتيجو. velit esse cillum dolore ut enim adim venemam، lorem ipsum dolor sit amet. voluptate quis nostrud جي مشق ۾ ايندڙ فوجي نوڪري پيراڳر ۾. Velit esse cillum dolore ullamco laboratories، which resulted in explicit results. p> div>
اگر آپ کو کم از کم معلومات حاصل ہو، سي سي ٽي محاسبه معتدل محض مزدور مزدوروں کو استعمال نہيں کرسکتے. يوٽ ليبارٽ ۽ ڊالور جادونا عليا. velit esse cillum dolore eu fugiat nulla pariatur. p> div>
جڳهه ۾ جڳھيندڙ متن ٺاهي کين جانچڻ دوران وڌيڪ نظر آيون. سي ڊي ايس ڏسڻ وانگر آهي:
# ڪورينر # کولي 1 {چوٽي: 250px؛ سچل: ڇڏي؛ } #container # col2outer {چوٽي: 610px؛ سچل: صحيح؛ حاڪمن: 0؛ لڳائڻ: 0؛ }کاٻي پاسي واري ڪالمن کي کاٻي پاسي ڏانهن اشارو ڪيو ويو آهي، جڏهن ته ٻئي طرف ساڄي طرف حق آهي. ڇو ته ٻئي ڪالمن جي ڪل چوڪ 860px آهي، انهن جي وچ ۾ هڪ 10px گتر آهي.
06 جو 06
ٻن ڪالمن جي اندر ٻن ڪالمن ۾ شامل ڪريو
ٽن شاخن ٺاهڻ لاء، ٻن ڊويزن ۾ ٻئين سيڪنڊ ڪالمن اندر شامل ڪريو، جيئن توهان آخري مرحلو ۾ کنٽينر ڪالمن اندر 2 ڊي شامل ڪيو ويو آهي. HTML هي यो देखिन्छ:
مون کي توهان جي مشق ڪري سگھو ٿا، سي ٽي محاصرہ کي ڪنهن زماني ۾ محنت مزدور نه ٿيندي. يوٽ ليبارٽ ۽ ڊالور جادونا عليا. velit esse cillum dolore eu fugiat nulla pariatur. p> div>
Nam libero tempore. علامه ڪارپوريشن کي گڏوگڏ ليبريمم، مگن مونجهارن کي نقصان پهچائڻ. اسامڪ ڪنوم کان علاوه هڪ ساکيٽ ڊليس، جو مستقل طور پر عارضي طور پر ليبارٽري ۽ ڊالر کي تبديل ڪري سگهيو. p> div> div>
۽ سي ايس ڊي کي اهڙي طرح نظر اچي ٿو:
# col2outer # col2mid {چوٽي: 300px؛ سچل: ڇڏي؛ } # col2outer # col2side {چوٽي: 300px؛ سچل: صحيح؛ }تنهن ڪري اهي ٻه 300px وڏين باڪس هڪ 610px ويڪر باڪس اندر هوندا آهن، انهن جي وچ ۾ وري هڪ 10px گتر هوندو.
07 جو 09
فوٽر ۾ شامل ڪريو
هاڻي ته انهي صفحي جو پورو نظريو آهي، توهان فوٽر ۾ شامل ڪري سگهو ٿا. "فوٽر" شئي سان هڪ آخري ڊاٽو استعمال ڪريو، ۽ مواد شامل ڪريو ته جيئن توهان ان کي ڏسي سگهو ٿا. توهان به هن حد تي سرحد کي شامل ڪري سگهو ٿا، تنهنڪري توهان کي اهو معلوم ٿيندو ته اهو شروع ٿئي ٿو.
HTML: