خواندن ۷ دقیقه·۴ سال پیش

پروژه طراحی سایت

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

اگه تا الان برنامه نویسی نکردی و دوست داری یاد بگیری ولی بخاطره زبان همش عقب می ندازی خسته شدی تو سرچ های انگیسی اینجا توضیحات رو بصورت فارسی صریح میگم برات !!!

خب بریم سروقت کد !!!

قدم اول : کد HTML را اضافه کنید.

خب کد زیر یه کد html هست اولش اومد یه تگ div با کلاس icon-bar (میتونی هر اسمی قرار بدی البته تعریف اسم با مصما بهت کمک میکنه اگه کسی کدتو خوند سر در بیاره ??) تعریف کرده بعدش اومده یه تگ a با class اکتیو گذاشته فعلا href رو هشتگ میذاریم

یک کلاس از کلاس های fontawesome رو که از قبل باید در قسمت تگ <head> تعریف شده باشد رو صدا میزنیم که آیکون های زیر را اضافه می کنیم همانطور که مشاهده می کنید آیکون home (خانه) سبز رنگ بخاطره کلاس اکتیو هست تگ div رو می بندیم


<div class=&quoticon-bar&quot>
<a class=&quotactive&quot href=&quot#&quot><i class=&quotfa fa-home&quot></i></a>
<a href=&quot#&quot><i class=&quotfa fa-search&quot></i></a> 
<a href=&quot#&quot><i class=&quotfa fa-envelope&quot></i></a> 
<a href=&quot#&quot><i class=&quotfa fa-globe&quot></i></a>
<a href=&quot#&quot><i class=&quotfa fa-trash&quot></i></a> 
</div>

خب امیدوارم تا اینجا راحت بوده باشه حالا میرسیم به بحث خوبه CSS

قدم دوم : کد CSS را برای ساخت منو افقی اضافه کنید.

از همون اول اگه بخوام کد رو تشریح کنم به این صورت اول از همه body (بدنه ) margin رو برابر با صفر قرار داده به خاطره اینکه منو به بالای صفحه بچسب خب می خواید امتحان کنید یعد اینکه کداتون رو نوشتید پاکش کنید تا متوجه بشید چه اتفاقی میفته !!!

ایکون بار رو width :100 دادیم کل صفحه رو پوشش بده یه رنگ خاکستری بهش دادیم و overflow رو auto گذاشتم

ایکون بار والد و a فرزند پس میگیم تگ a ، فرزند ایکون بار رو بهش مقدار میدیم float (شناور) این رو left قرار دادم گفتم ایکون ها text-align: center; وسط قرار بگیرند width(عرض) رو 20% قرار دادم یعنی از 100 درصد تصویر 20 % ایکونها از هم فاصله بگیرند padding رو از بالا و پایین 12 قرار دادیم و از چپ و راست 0 قرار دادیم

نکته : padding, margin بصورت ساعت وار هست یعنی (12,3,6,9)اول بالا بعد سمت راست بعد پایین و آخر سر هم سمت چپ اگه فقط دوتا عدد مثل پایین باشه اولی بالا و پایین ، دومی سمت چپ و راست .

کد transition برای اینکه بین منوها بصورت نرم و راحت با 0.3 ثانیه حرکت کنید
رنگ متن رو سفید قرار دادیم (البته درباره رنگ قلم و هم رنگ پس زمینه اختیاری و سلیقه ایست)
فونت سایز هم مشخص اندازه فونت رو نشون میده

نکته : واحدهای اندازه گیری در CSS ، یعنی مثلا ما مشخص میکنیم که واحد اندازه گیری ما پیکسل ( px ) باشد یا مثلا بصورت درصدی ( % ) باشد.

em نسبت به اندازه عنصر والد یا پدر تغییر میکند.
ex نسبت به اندازه ارتفاع کاراکتر x (ایکس انگلیسی) کوچک.
ch نسبت به اندازه عرض کاراکتر (۰) تعیین میشود.
rem به نسبت اندازه فونت ریشه صفحه ( تگ html ) مشخص میشود.
vw به نسبت ۱درصد از عرض کل صفحه نمایش.
vh به نسبت ۱درصد از ارتفاع کل صفحه نمایش.
vmin به نسبت ۱درصد از عرض کل صفحه نمایش. ( در بُعد / ابعاد کوچکتر )
vmax به نسبت ۱درصد از ارتفاع کل صفحه نمایش. ( در بُعد / ابعاد بزرگتر )

واحدهای px,%,em : استفاده از آنها در صفحه نمایش (طراحی صفحات وب) توصیه می شود.

واحدهای mm,cm,pc,in : استفاده از آنها در صفحه نمایش (طراحی صفحات وب) اصلا توصیه نمی شود.

واحد اندازه گیری

cm یا Centimeter یا سانتی متر اندازه را بصورت سانتی متر مشخص میکند.
mm یا Millimeter یا میلی متر اندازه را بصورت میلی متر مشخص میکند.
in یا Inche یا اینچ ۱ اینچ برابر است با ۹۶ پیکسل یا برابر است با ۲٫۵۴ سانتی متر
px یا Pixel یا پیکسل اندازه را بصورت پیکسلی مشخص میکند.
pt یا Point یا پوینت ۱ پوینت برابر است با ۱٫۷۲ از ۱ اینچ
pc یا Pica یا پیکا ۱ پیکا برابر است با ۱۲ پوینت و ۶ پیکا برابر است با ۷۲ پوینت

براساس پایین کد هاتو بزن ! با /**/ توضیحات رو قرار دادیم شما هم اینکار رو حتما انجام بدید برای هر کد که میزنید باید توضیح قرار بدید حتما هم نباید انگلیسی باشه می تونی فارسی قرار بدید

body {margin:0}

.icon-bar {
  width: 100%;                          /* Full-width */
  background-color: #555;   /* Dark-grey background */
  overflow: auto;                    /* Overflow due to float */
}
.icon-bar a {
  float: left;                             /* Float links side by side *//*شناورها در کنار هم لینک شوند*/
  text-align: center;              /* Center-align text *//*متن را در تراز وسط قرار دهید*/
  width: 20%;     /* Equal width (5 icons with 20% width each = 100%) */
  padding: 12px 0;                        /* Some top and bottom padding */  
  transition: all 0.3s ease;   /* Add transition for hover effects */  
  color: white;                            /* White text color */  /*رنگ متن سفید*/
  font-size: 36px;                     /* Increased font size */ /*افزایش اندازه قلم*/
}
.icon-bar a:hover {
  background-color: #000;            /* Add a hover color */ 
}
.active {
  background-color: #04AA6D;           /* Add an active/current color */
}

کد CSS را برای ساخت منو عمودی اضافه کنید.

مثال (ایجاد منوی عمودی) :

ساخت منوی عمودی هم مثل مثال بالاست بااین تفاوت که اینجا display رو block قرار دادیم برای اینکه کامل بدونید

body {margin:0}

.icon-bar {
  width: 100%;                              /* Full-width */
  background-color: #555;        /* Dark-grey background */
   overflow: auto;                       /* Overflow due to float */
}
.icon-bar a {
   float: left;                                   /* Float links side by side */
  text-align:    center;                  /* Center-align text */
   width: 20%;                              /* Equal width (5 icons with 20% width each = 100%) */
  padding: 12px 0;                       /* Some top and bottom padding */
  transition: all 0.3s ease;         /* Add transition for hover effects */
  color: white;                             /* White text color */
    font-size: 36px;                    /*    Increased font size */
}

.icon-bar a:hover {
   background-color: #000;                       /* Add a hover color */
}

.active {
   background-color: #04AA6D;            /* Add an active/current color */
}

خب امیدوارم که از این آموزش طراحی سایت لذت برده باشید .
دنبال کنید و منتظر باشید که ما با یه سری از آموزش طراحی سایت برمیگردیم. ???

طراحی سایت پروژه طراحی سایت آموزش طراحی سایت دوره طراحی سایت دوره طراحی تحلیل داده

برلیانس

شاید از این پست‌ها خوشتان بیاید