استفاده از شناسه border-collapse

css-border

استفاده از شناسه border-collapse
در مثال زیر می توانید روش فشرده سازی خطوط جدول را با استفاده از شناسه border-collapse مشاهده کنید . 

استفاده از ویژگی Padding برای عناصر جدول

css-table-padding
استفاده از ویژگی Padding برای عناصر جدول
در مثال زیر مشاهده می کنید که چگونه عناصر جدول ازستون ها بوسیله ویژگی Padding فاصله می گیرند .

 

 

ساخت یک جعبه با حداکثر عرض 250 پیکسل

css-box

ساخت یک جعبه با حداکثر عرض 250 پیکسل
در مثال زیر مشاهده می کنید که جدول ایجاد شده حداکثر دارای 250 پیکسل عرض می باشد .

آموزش حرفه ای ویژگیهای صفت Border در CSS

یکی از Selector یا صفت های پر کاربرد در CSS صفت  Border می باشد که برای قرار دادن خطوط به دور عناصر صفحه بکار می رود . Selector Border به طور کامل در حالت پیش فرض در بخش آموزش CSS سایت شرح داده شده است . اما در این بخش می خواهم یک سری از خاصیت های پر کاربرد سلکتور Border را که بسیار کاربردی و کار راه انداز هست را در این بخش برای شما بازدید کننده محترم توضیح داده و کمی بیشتر در مورد ویژگی های تخصصی این سلکتور پر کاربرد توضیح بدهم .برای اینکه بهتر متوجه بشوید به تصویر زیر نگاه کنید .

border-1

 

به صورت پیش فرض Selector Border به صورت زیر نوشته می شود 

ساخت یک منوی باز شو با HTML وCSS

head


با توجه به تیکت هایی که به پشتیبانی بخش آموزش ارسال شده است  و از ما خواسته بودند که آموزش طراحی سایت رادر بخش آموزش فعال کنیم ، با تایید نظر مدیریت شرکت طلوع فن آوران آسا ، قرار شد فقط آموزش CSS, HTML در قالب طراحی سایت به طور عملی توضیح داده شود .به این صورت که یک روز قالب در محیط فتوشاپ طراحی و روز بعد همان قالب با HTML وCss طراحی بشود . به امید خدا از هفته آینده به مدت یک ماه حدود 10 قالب با مدلهای مختلف در فتوشاپ طراحی و سپس آن را به صورت کاملا تصویری و قابل فهم کد نویسی می کنیم تا علاقه مندان به طراحی وب سایت از این آموزشها استفاده کنند .

برای شروع می خواهیم یک منوی باز شو یا Pop UP را با  HTML وCSS طراحی کنیم .
نحوه کار به این صورت هست که ابتدا آیکون های مورد نظر خودمان را در فتوشاپ طراحی می کنیم . اینکار بسیار زمان بر هست و با توجه به وقت محدود ما غیر ممکن ، به همین دلیل من آیکون های آماده ای که می خواهم در فتوشاپ طراحی کنم را برای شما جهت دانلود قرار می دهم .(پایان آموزش)

آموزش ساخت منوی عمودی باز شو با CSS

head

امروز آموزش طراحی یک منو با CSS و Html را به طور کاملا تصویری و مرحله مرحله آموزش میدهم. کاربران فعال بخش آموزش درخواست بیشتر کردم مطالب آموزشی طراحی سایت و طراحی قالب در فتوشاپ را کرده بودند که امیدوارم بتوانم مطالب این بخش را در هفته های آینده کمی کامل تر نسبت به قبل کنم.

بسیار خوب همانطور که میدانید برای کد نویسی Css و Html نیاز به برنامه خاصی نیست ولی من برای راحتی کارم از نرم افزار Dream weaver استفاده میکنم . برای شروع برنامه نوت پد ویندوز یا نرم افزار نامبرده شده را اجرا کنید .

برای طراحی قالب همیشه من یک فولدر ایجاد میکنم و فایل های خودم را که می خواهم طراحی کنم در فولدرهای مشخص قرار میدهم . برای ساخت این منو هم می توانیم یک فولدر به نام Css ایجاد کنیم و هر 2 فایل خودمان را در آن قرار دهیم یکی فایل Index.html و دیگری فایل  menu.css

صفت Floating در Css

css-icon
با استفاده از صفت های Floating نحوه قرار گیری عناصر را در صفحه در کنار یکدیگر مشخص می کنیم .
دو صفت در این قسمت توضیح داده می شود . 1 : Float . 2 .Clear
برای شناور کردن اجسام در کنار هم از صفحه Float استفاده می کنیم . روش کار این صفت به این صورت می باشد که فرض کنید در بالای صفحه شما یک لوگو همراه با یک کادر جستجو دارید و می خواهید هر دو یکی در راست و دیگری در سمت چپ قرار بگیرند .
CSS به طور پیش فرض یکی را پس از دیگری و در خط بعد قرار میدهد برای اینکه کادر جستجو در کنار لوگو ما در قسمت چپ قرار بگیرد ازصفت Float استفاده می کنیم .

صفت Float دارای 3 ویژگی Right - Left و None  می باشد.
Right : عناصر را به سمت راست شناور می کند .

Left : عناصر را به سمت چپ شناور می کند .

صفت Position | توضیح کاربرد صفت Position در CSS

css-icon
با صفت Position می توانیم تعیین کنیم یک عنصر در صفحه در چه موقعیتی نمایش داده شود . صفت Position دارای ویژگیهای زیر می باشد که به طور مختصر برای شما توضیح میدهم :

Static : این مقدار پیش فرضی است که در صورت تعریف نشدن صفت Position در صفحه استفاده می شود .با این مقدار اجزا در همان جایی که کد آنها را می نویسید دیده می شوند .

Absolute : این مقدار به ما اجازه میدهد تا یک عنصر را در هرموقعیتی نسبت به بالا ، راست ،پایین و چپ صفحه که بخواهیم نمایش دهیم .

Relative : حرکت عنصر نسبت به مکان عادی عنصر دارد . به عنوان مثال Left:20  مقدار 20 پیکسل به موقعیت عادی اضافه می کند.

Fixed : این گزینه به ما اجازه میدهد تا موقعیت عنصر یک صفحه را در پنجره مرورگر مشخص کنیم. در صورتیکه برای یک عنصر از این ویژگی استفاده کنیم موقعیت آن عنصر حتی در صورتی که به بالا و پایین صفحه برویم یا اندازه پنجره مروگر را تغییر دهیم به همان صورت قبلی باقی می ماند.البته ویندوز اکسپلورر در ویندوز از این ویژگی پشتیبانی نمی کند .

مشترک این خوارک خبری شوید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا