آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش ساخت منو دارای border در وبسایت

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

آموزش ساخت منو دارای border در وبسایت


در این مقاله می آموزیم که چطور با استفاده از CSS لینک های navigation ایجاد کنیم که زمانی که موس را بر روی هر لینک می بریم در پایین آن underline یا یک حاشیه نشان داده شود.



ساخت منوNavigation


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



لینک های Border

موس خود را بر روی لینک ها نگه دارید



قدم دوم :   برای ایجاد border از دستورات CSS زیر استفاده کنید.

مثال ایجاد border برای منو :

body {
margin:0;
direction: rtl;
}

.topnav {
  overflow: hidden;
  background-color: #f1f1f1;
}

.topnav a {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  border-bottom: 3px solid transparent;
}

.topnav a:hover {
  border-bottom: 3px solid red;
}

.topnav a.active {
  border-bottom: 3px solid red;
}
.Content {
padding-right:16px;
}

امتحان کنید

توجه :  برای ایجاد navigation bar های واکنش گرا که با صفحات موبایل نیز سازگار باشند، پروژه ایجاد منو ریسپانسیو در طراحی وب سایت را مطالعه کنید.

  • 22
  •    2
  • تاریخ ارسال :   1400/01/16

دانلود PDF دانلود سورس کد دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .