تبلیغات
میهن وب هاست

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

نویسنده : امیر

نظرات : ۰ دیدگاه

بازدید : ۱۰۵ بازدید

تاریخ : ۱۳ تیر ۱۳۹۷

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

 

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

 

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

نتیجه :

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

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

 

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

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

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

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

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

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

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

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

با دوستانتان به اشتراک بگذارید

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

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

*

code

مطالب زیر را از دست ندهید: