لینک کردن دایره در css
شاید جالب باشد که وقتی تمامی divها و المان های متفاوت در اچ تی ام ال به شکل چهارضلعی است به چه شکل می توان دایره ساخت؟
بعد از ساخت دایره به چه شکل می شود آنرا لینک کرد؟
در ادامه ی این آموزش با ما همراه باشید.
بدون هیچ بحث اضافه ای سراغ موضوع اصلی این آموزش یعنی “ساخت دایره ای لینک شده در css” می رویم.
برای ساخت دایره به شکل زیر عمل می کنید:
<!DOCTYPE html>
<html>
<head>
<title>How To Make Circle - CamelCase</title>
<style type="text/css">
.circle
{
margin: 200px auto;
border-radius: 100%;
width: 300px;
height: 300px;
background: #000;
color:#fff;
text-align: center;
}
.circle p
{
font-size: 20px;
padding-top: 138.8px;
}
</style>
</head>
<body>
<div class="circle">
<p>CamelCase</p>
</div>
</body>
</html>
نتیجه :
در کد بالا ابتدا یک div تعریف کرده و به آن کلاس circle را نسبت دادیم؛
سپس با خاصیت border-radius در css و مقداردهی 100% به آن گفتیم که گوشه های شکل را به شکل دایره ای کن.
بعد از اینکه اینکار را کردیم باید محیط دایره را با width و height به اندازه ای بزرگ کنیم که شکل به صورت بیضی نباشد و کاملا به شکل دایره نمایان شود.
در مرحله ی بعد می خواهیم دایره ی بالا را با یک هایپرلینک به یک صفحه در وب لینک کنیم؛
برای اینکار به روش زیر عمل می کنیم:
<!DOCTYPE html>
<html>
<head>
<title>How To Make Circle - CamelCase</title>
<style type="text/css">
.circle
{
margin: 200px auto;
border-radius: 100%;
width: 300px;
height: 300px;
background: #000;
color:#fff;
text-align: center;
}
.circle p
{
font-size: 20px;
padding-top: 138.8px;
}
a
{
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<a href="http://camelcase.ir" title="camelcase.ir">
<div class="circle">
<p>CamelCase</p>
</div>
</a>
</body>
</html>
همانطور که مشاهده می کنید کد اولیه را ویرایش کرده و به کد فعلی رسیدیم. حالا یک دایره ی لینک شده دارید.
چالش :
اگر کد بالا را تست کنید مشاهده می کنید که خارج محیط دایره هم لینک شده است این مشکل به علت چهارضلعی بودن عنصر div می باشد اما راه حل آن چیست؟
برای حل این مشکل کافیست به روش زیر عمل کنید:
<!DOCTYPE html>
<html>
<head>
<title>How To Make Circle - CamelCase</title>
<style type="text/css">
body
{
text-align: center;
}
.circle
{
margin: 200px auto;
border-radius: 100%;
width: 300px;
height: 300px;
background: #000;
color:#fff;
text-align: center;
display: inline-block;
}
.circle p
{
font-size: 20px;
padding-top: 138.8px;
}
a
{
text-decoration: none;
color: #fff;
}
</style>
</head>
<body>
<a href="http://camelcase.ir" title="camelcase.ir">
<div class="circle">
<p>CamelCase</p>
</div>
</a>
</body>
</html>
در کد بالا با استفاده از خاصیت display در کلاس circle این مشکل را حل کردیم.
شما می توانید از این لینک فایل تمرین بالا را دانلود کنید و استفاده کنید.
امیدوارم آموزش بالا برای شما دوستان کاربردی باشد.
نظرات خود را در ارتباط با “ترفند لینک کردن دایره در css” برای ما بنویسید.
موفق و پیروز باشید.