سی ایس ایس ویب سائٹ بولیا

ਵੈੱਬਸਾਈਟ ਲੇਆਉਟ

ਵੈੱਬਸਾਈਟ ਸਾਧਾਰਨ ਤੌਰ 'ਤੇ ਹੈੱਡਰ, ਮੈਨੂ, ਸਮੱਗਰੀ ਅਤੇ ਫੁੱਟਰ ਵਿੱਚ ਹੁੰਦੀ ਹੈ:

ਬਹੁਤ ਸਾਰੇ ਵੱਖ-ਵੱਖ ਲੇਆਉਟ ਡਿਜ਼ਾਇਨ ਚੁਣਨ ਵਾਲੇ ਹਨ। ਪਰ ਉੱਪਰੋਕਤ ਸਰੂਪ ਸਭ ਤੋਂ ਮਸ਼ਹੂਰ ਸਰੂਪਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ, ਜਿਸ ਨੂੰ ਅਸੀਂ ਇਸ ਟਿੂਟੋਰੀਅਲ ਵਿੱਚ ਵਿਸਤਾਰ ਨਾਲ ਪੜ੍ਹੀਏ ਹਨ।

ਹੈੱਡਰ

ਹੈੱਡਰ (header) ਸਾਧਾਰਨ ਤੌਰ 'ਤੇ ਵੈੱਬਸਾਈਟ ਦੇ ਉੱਪਰੋਕਤ ਹੈ (ਜਾਂ ਉੱਪਰੋਕਤ ਨੇਵੀਗੇਸ਼ਨ ਮੇਨੂ ਦੇ ਨੇੜੇ)। ਇਹ ਸਾਧਾਰਨ ਤੌਰ 'ਤੇ ਲੋਗੋ (logo) ਜਾਂ ਵੈੱਬਸਾਈਟ ਦਾ ਨਾਮ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ:

مثال

.header {
  background-color: #F1F1F1;
  text-align: center;
  padding: 20px;
}

نتائج:

ਹੈੱਡਰ

آپ خود کا تجربہ کریں

ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ

ਨੇਵੀਗੇਸ਼ਨ ਬਾਰ ਲਿੰਕ ਸੂਚੀ ਦੇਣ ਵਾਲਾ ਹੈ ਕਿ ਵਿਸਤਾਰਕਰਤਾ ਤੁਹਾਡੇ ਵੈੱਬਸਾਈਟ ਨੂੰ ਬਰਾਬਰ ਨਜ਼ਰ ਰੱਖ ਸਕੇ:

مثال

/* navbar ਕੰਟੇਨਰ */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* Navbar ਲਿੰਕ */
.topnav a {
  فلوت: لفٹ;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* ਲਿੰਕ - ਹੋਵਰ ਹੋਣ ਉੱਤੇ ਰੰਗ ਬਦਲਣਾ */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

نتائج:

آپ خود کا تجربہ کریں

ਸਮੱਗਰੀ

ਕਿਉਂਕਿ ਸਿਰਫ਼ ਤੁਹਾਡੇ ਟੀਚ ਯੂਜ਼ਰਾਂ ਨੂੰ ਪਤਾ ਹੈ ਕਿ ਕਿਸ ਵਰਗ ਦਾ ਲੇਆਉਟ ਇਸਤੇਮਾਲ ਕਰਨਾ ਹੈ। ਸਭ ਤੋਂ ਮਸ਼ਹੂਰ ਲੇਆਉਟਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ (ਜਾਂ ਉਨ੍ਹਾਂ ਨੂੰ ਮਿਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ):

  • 1-کولممبولوگ (عام طور پر موبائل براوزر کے لئے استعمال کیا جاتا ہے)
  • 2-کولممبولوگ (عام طور پر تبلٹ اور لپ تاپ کے لئے استعمال کیا جاتا ہے)
  • 3-کولممبولوگ (فقط دسکٹاپ کے لئے استعمال کیا جاتا ہے)

1-کولمم:

2-کولمم:

3-کولمم:

ہم تین کولمم بولوگ قائم کریں گے، اور چھوٹی اسکرین پر اس کو ایک کولمم بولوگ میں بدل دیئے گا:

مثال

/* تین مساوی کولمم بنائیں، جو ایک دوسرے کے ساتھ قارب فلوٹ کیا جائیں */
.کولمم {
  فلوت: لفٹ;
  وائیڈتھ: 33.33%;
}
/* کولمم کے بعد فلوٹ کا ختم کرنا */
.روو: بعد {
  کنٹنٹ: "";
  ڈسپلے: تیبل;
  کلیر: بلاٹ;
}
/* ریسپانسوئی بولوگ - تین کولمم کا پتھر کی طرح نکالنا، نہ کہ پارلن کی طرح، چھوٹی اسکرین پر (وائیڈتھ 600 پیکسل یا اس سے کم) */
@میڈیا اسکرین اور (مکس وائیڈتھ: 600 پیکسل) {
  .کولمم {
    وائیڈتھ: 100%;
  }
}

نتائج:

پورا ویب سائٹ تکنیک رجولار دستاویز

ہمارا رجولار دستاویز، ویب سائٹ تکنیک کی تمام جوانب کا احاطہ کرتا ہے。

ایک شامل وچ وای سی سی استاندارڈ تکنیک: ایچ تی ایم ایل، سی ایس ایس، ایکس ایم ایل ہے۔ اور دیگر تکنیک، جیسے جاوا اسکریپٹ، پی ایچ پی، ایس ال کیو اورغیرہ.

آن لائن نمون نمائش تکنیک

کوڈ ووائی سی سی میں ہزاروں مثال فراہم کئے گئے ہیں۔

آپ کو اپنے آن لائن ایڈیٹر کا استعمال کرکے ان مثالوں کو ترمیم کر سکتے ہیں، اور کوئی کد پر تجربات کر سکتے ہیں۔

آسان معلومات کا طریقہ

ایک اینچ وقت ایک اینچ چاندی، لہذا، آپ کو تیز اور آسان معلومات فراہم کرتے ہیں۔

یہاں آپ کو کسی بھی معلومات کو آسان طریقے سے حاصل کرنے میں مدد ملتی ہے。

آپ خود کا تجربہ کریں

تیز:2 کولمم بولوگ قائم کرنے کے لئے وائیڈتھ کو 50 فیصد کردیئے، 4 کولمم بولوگ قائم کرنے کے لئے 25 فیصد استعمال کریئے۔

تیز:آپ کو سوال ہے کہ @میڈیا رول کس طرح کام کرتا ہے؟ تو ہمارا پڑھیئے: CSS میڈیا کوئری اس باب میں مزید معلومات سیکھنے کے لئے

تیز:کولمم بولوگ کا ایک جدید طریقہ قائم کرنا، سی ایس ایس فلیکس بکس استعمال کرنا ہے۔ لیکن انٹرنیٹ ایکسپلورر 10 اور اس سے پچھلے ورژن اس کا پشتیبند نہیں کرتا۔ اگر آپ کو آئی ای 6-10 کا پشتیبند کریا جانا چاہیے تو، فلوٹ (جیسا کہ اوپر دکھایا گیا ہے) استعمال کریئے۔

اگر آپ کو فلیکس بکس بولوگ ماڈول کے بارے میں مزید معلومات جائز کرنا چاہیے تو ہمارا پڑھیئے: CSS Flexbox تدریس

غیر مساوی کولمم

مین کانٹنٹ (مین کانٹنٹ) آپ کی ویب سائٹ پر سب سے بڑا اور سب سے اہم حصہ ہوتا ہے。

کولمم کی وائیڈتھ کا غیر مساوی ہونا عامی امر ہے، کیونکہ زیادہ تر سائز مین کانٹنٹ کے لئے رکھی جاتی ہے۔ اسکولر کانٹنٹ (اگر موجود ہو) عام طور پر نئی ناویگیشن یا مین کانٹنٹ سے متعلق معلومات کے لئے استعمال کیا جاتا ہے۔ آپ کسی بھی طرح کی وائیڈتھ بدل سکتے ہیں، لیکن یاد رکھیں کہ اس کی مجموعی وائیڈتھ 100٪ ہونی چاہئے:

مثال

.کولمم {
  فلوت: لفٹ;
}
/* چپ اور داہم کولمم */
.کولمم سائڈ {
  وائیڈتھ: 25%;
}
/* میڈل کولمم */
.کولمم میڈل {
  وائیڈتھ: 50%;
}
/* ریسپانسوئی بولوگ - تین کولمم کا پتھر کی طرح نکالنا، نہ کہ پارلن کی طرح */
@میڈیا اسکرین اور (مکس وائیڈتھ: 600 پیکسل) {
  .کولمم سائڈ، .کولمم میڈل {
    وائیڈتھ: 100%;
  }
}

نتائج:

پورا ویب سائٹ تکنیک رجولار دستاویز

ہمارا رجولار دستاویز، ویب سائٹ تکنیک کی تمام جوانب کا احاطہ کرتا ہے。

ایک شامل وچ وای سی سی استاندارڈ تکنیک: ایچ تی ایم ایل، سی ایس ایس، ایکس ایم ایل ہے۔ اور دیگر تکنیک، جیسے جاوا اسکریپٹ، پی ایچ پی، ایس ال کیو اورغیرہ.

آن لائن نمون نمائش تکنیک

کوڈ ووائی سی سی میں ہزاروں مثال فراہم کئے گئے ہیں۔

آپ کو اپنے آن لائن ایڈیٹر کا استعمال کرکے ان مثالوں کو ترمیم کر سکتے ہیں، اور کوئی کد پر تجربات کر سکتے ہیں۔

آسان معلومات کا طریقہ

ایک اینچ وقت ایک اینچ چاندی، لہذا، آپ کو تیز اور آسان معلومات فراہم کرتے ہیں۔

یہاں آپ کو کسی بھی معلومات کو آسان طریقے سے حاصل کرنے میں مدد ملتی ہے。

آپ خود کا تجربہ کریں

پاٹا

پاٹا ویب پیج کے نیچل میں واقع ہوتا ہے، اکثر یہ میکاتوب اور رابطوں جیسے معلومات شامل کرتا ہے:

مثال

.footer {
  background-color: #F1F1F1;
  text-align: center;
  پیدائشی: 10پایکس;
}

نتائج:

پاٹا

آپ خود کا تجربہ کریں

رپوزنسیو ویب سائٹ لائج

بالاتر از آپ کے اوپر کے اس CSS کوئی کد استعمال کیاجاتا ہے، جس سے آپ کا ویب سائٹ خود بخود متعادل ہوجاتا ہے، اس کی عرض پر دو ستون اور پورا عرض کا ستون تبدیل ہوتا ہے:

آپ خود کا تجربہ کریں