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

网站布局

网站通常分为页眉、菜单、内容和页脚：

有很多不同的布局设计可供选择。但是，以上结构是最常见的结构之一，我们将在本教程中对其进行仔细研究。

页眉

页眉（header）通常位于网站顶部（或顶部导航菜单的正下方）。它通常包含徽标（logo）或网站名称：

مثال

.header {
  پس منظر رنگ: #F1F1F1;
  متن کا وسط نکالنا:
  padding: 20px;
}

نتائج:

页眉

نوکری بھیجیئے

导航栏

导航栏包含链接列表，以帮助访问者浏览您的网站：

مثال

/* ناوار ناوار کارکن */
.topnav {
  تلاش: پنهان;
  پس منظر رنگ: #333;
}
/* ناوار ناوار لینک */
.topnav a {
  float: left;
  نمائش: بلک فورم;
  رنگ: #f2f2f2;
  متن کا وسط نکالنا:
  پیداواری: 14px 16px;
  نوکشیدگی: نہیں;
}
/* لینک - کھلنے پر رنگ بدلنا */
.topnav a:hover {
  پس منظر رنگ: #ddd;
  رنگ: کالام:
}

نتائج:

نوکری بھیجیئے

محتوا

آپ کا مقصد کاربران کی بنیاد پر کس طرح استعمال کریں گا. سب سے زیادہ استعمال شدہ طرح سے ایک سے زیادہ یا ان کو مربوط کریں گا:

  • 1-ستونطرح‌بندی (معمولاً برای مرورگرهای موبایل استفاده می‌شود)
  • 2-ستونطرح‌بندی (معمولاً برای تبلت‌ها و لپ‌تاپ‌ها استفاده می‌شود)
  • 3-ستونطرح‌بندی (فقط برای کامپیوترهای رومیزی)

1-ستون:

2-ستون:

3-ستون:

ما یک طرح‌بندی 3 ستونی ایجاد خواهیم کرد و در صفحه‌های کوچک‌تر آن را به یک ستون تبدیل خواهیم کرد:

مثال

/* سه ستون برابر ایجاد می‌کند که به هم نزدیک و شناور هستند */
.column {
  float: left;
  width: 33.33%;
}
/* شناور در ستون‌های بعدی خلاص می‌کند */
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* طرح‌بندی پاسخگو - سه ستون را به جای قرار دادن به صورت موازی، در صفحه‌های کوچک‌تر (با عرض 600 پیکسل یا کمتر) به صورت بر روی هم قرار می‌دهد */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

نتائج:

دستورالعمل کامل تکنیک وب

دستورالعمل‌های ما پوشش کامل از تکنیک‌های وب را دارد.

این شامل تکنیک‌های استاندارد W3C است: HTML، CSS، XML. و همچنین تکنیک‌های دیگری مانند JavaScript، PHP، SQL و غیره.

آن لائن نمونه آزمایش ابزار

کوڈ ویو سی وی میں، ہم ہزاروں مثال فراہم کرتے ہیں.

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

تیزی سے قابل فهم معلومات کا طریقہ

ایک اینچ وقت ایک اینچ زر، لہذا، آپ کو تیزی سے قابل فهم معلومات فراہم کی گئی ہیں.

یہاں آپ کو ایک قابل فهم اور آسان طریقے سے آپ کی ضرورت کا کوئی بھی معلومات حاصل ہوگی.

نوکری بھیجیئے

توضیح:برای ایجاد طرح‌بندی 2 ستونی، عرض را به 50٪ تغییر دهید. برای ایجاد طرح‌بندی 4 ستونی، از 25٪ استفاده کنید.

توضیح:آیا می‌خواهید بدانید که قاعده @media چگونه کار می‌کند؟ در دستورالعمل ما بخوانید CSS میڈیا کوئسٹ در این فصل بیشتر درباره این موضوع یاد بگیرید.

توضیح:یک روش مدرن‌تر برای ایجاد طرح‌بندی ستون‌ها استفاده از CSS Flexbox است. اما این را نمی‌توان در نسخه‌های 10 و قدیمی‌تر اینترنت اکسپلورر پشتیبانی کرد. اگر نیاز به پشتیبانی از IE6-10 دارید، از شناور (مانند بالا) استفاده کنید.

برای اطلاعات بیشتر در مورد ماژول‌های طرح‌بندی Flexible Box، دستورالعمل ما را بخوانید CSS فلیکس بکسی آموزش.

ستون‌های نابرابر

محتوای اصلی (main content) بزرگترین و مهم‌ترین بخش وب‌سایت شماست.

مورد رایج برای ستون‌های دارای عرض متفاوت است، زیرا بیشتر فضای موجود برای محتوای اصلی حفظ می‌شود. محتوای فرعی (در صورت وجود) معمولاً به عنوان جایگزین برای ناوبری یا اطلاعات مشخصی که با محتوای اصلی مرتبط است استفاده می‌شود. شما می‌توانید عرض را تغییر دهید، فقط یادآوری کنید که مجموع آن باید 100٪ باشد:

مثال

.column {
  float: left;
}
/* ستون‌های چپ و راست */
.column.side {
  width: 25%;
}
/* ستون وسط */
.column.middle {
  width: 50%;
}
/* طرح‌بندی پاسخگو - سه ستون را به جای قرار دادن به صورت موازی، به صورت بر روی هم قرار می‌دهد */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

نتائج:

دستورالعمل کامل تکنیک وب

دستورالعمل‌های ما پوشش کامل از تکنیک‌های وب را دارد.

این شامل تکنیک‌های استاندارد W3C است: HTML، CSS، XML. و همچنین تکنیک‌های دیگری مانند JavaScript، PHP، SQL و غیره.

آن لائن نمونه آزمایش ابزار

کوڈ ویو سی وی میں، ہم ہزاروں مثال فراہم کرتے ہیں.

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

تیزی سے قابل فهم معلومات کا طریقہ

ایک اینچ وقت ایک اینچ زر، لہذا، آپ کو تیزی سے قابل فهم معلومات فراہم کی گئی ہیں.

یہاں آپ کو ایک قابل فهم اور آسان طریقے سے آپ کی ضرورت کا کوئی بھی معلومات حاصل ہوگی.

نوکری بھیجیئے

پٹا

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

مثال

.پٹا {
  پس منظر رنگ: #F1F1F1;
  متن کا وسط نکالنا:
  پیدائش: 10 پیکسلس;
}

نتائج:

پٹا

نوکری بھیجیئے

مستعد رسیپٹیو ویب سائٹ کا لائیبکسم

میرے ساتھ کچھ کر کے، یہاں آپ کو سینٹر میں آپ کی ضرورت کا کوئی بھی معلومات حاصل ہوگی:

نوکری بھیجیئے