لینک کردن یک محیط دایره ای در css

لینک کردن دایره در css

شاید جالب باشد که وقتی تمامی divها و المان های متفاوت در اچ تی ام ال به شکل چهارضلعی است به چه شکل می توان دایره ساخت؟

بعد از ساخت دایره به چه شکل می شود آنرا لینک کرد؟

در ادامه ی این آموزش با ما همراه باشید.

 

بدون هیچ بحث اضافه ای سراغ موضوع اصلی این آموزش یعنی “ساخت دایره ای لینک شده در css” می رویم.

 

برای ساخت دایره به شکل زیر عمل می کنید:

نتیجه :
لینک کردن دایره در css
لینک کردن دایره در css

در کد بالا ابتدا یک div تعریف کرده و به آن کلاس circle را نسبت دادیم؛

سپس با خاصیت border-radius در css و مقداردهی ۱۰۰% به آن گفتیم که گوشه های شکل را به شکل دایره ای کن.

بعد از اینکه اینکار را کردیم باید محیط دایره را با width  و height به اندازه ای بزرگ کنیم که شکل به صورت بیضی نباشد و کاملا به شکل دایره نمایان شود.

 

در مرحله ی بعد می خواهیم دایره ی بالا را با یک هایپرلینک به یک صفحه در وب لینک کنیم؛

برای اینکار به روش زیر عمل می کنیم:

همانطور که مشاهده می کنید کد اولیه را ویرایش کرده و به کد فعلی رسیدیم. حالا یک دایره ی لینک شده دارید.

چالش :

اگر کد بالا را تست کنید مشاهده می کنید که خارج محیط دایره هم لینک شده است این مشکل به علت چهارضلعی بودن عنصر div می باشد اما راه حل آن چیست؟

برای حل این مشکل کافیست به روش زیر عمل کنید:

در کد بالا با استفاده از خاصیت display در کلاس circle این مشکل را حل کردیم.

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

امیدوارم آموزش بالا برای شما دوستان کاربردی باشد.

 

نظرات خود را در ارتباط با “ترفند لینک کردن دایره در css” برای ما بنویسید.

موفق و پیروز باشید.

برای امتیاز به این نوشته کلیک کنید!
[کل: ۰ میانگین: ۰]
با دوستانتان به اشتراک بگذارید

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code