استایل بندی لینک ها

سلام دوستان عزیز. امروز تصمیم گرفتم تا براتون ساخت یه باکس لینک دار رو آموزش بدم. نمونش رو دارین توی عکس می بینید که لینکتون چطوری میشه. آموزش جالبیه.

این نمونه ساده ی کد یک لینک هست

<a href=”http://Example.com“>Text</a>

Text

شما باید یه اطلاعات کلی در مورد استایل نویسی داشته باشید. اگه ندارید می تونید از کدی که براتون گذاشتم استفاده کنید و این آموزش رو اجرا کنید.

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

<style>
#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}
#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}
#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>

خوب حالا رسیدیم به وقت گذاشتن لینکها. حالا برای گذاشتن اینجور لینکهایی دیگه نمی تونید از کد اون نمونه ساده استفاده کنید و برای این کار باید لینکهاتون رو طبق کدهای زیر قرار بدید.

<div id=”pagin”>
<a class=”sel”>1</a><a href=”/a.htm”>2</a>
<a href=”/b.htm”>3</a>
</div>

دوستانی که کپی می کنند لینک منبع یادشون نره.

این هم یه کد کلی و کامل :

<html>
<head>
<title>CSS used in Pagination</title>
<style>
#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}
#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}
#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>
</head>
<body>
<div id=”pagin”>
<a class=”sel”>1</a><a href=”/a.htm”>2</a>
<a href=”/b.htm”>3</a>
</div>
</body>
</html>

اگه این کد رو توی Notepad ویندوز ببرید و با یه اسم مثل Demo.html ذخیره کنید می تونید این عمل رو ببینید.

توضیحات در مورد نویسنده :

علی هستم؛ سومین نفری بودم که به جمع تک تمپ اضافه شدم… ریاضی میخونم و عاشق طراحی و وردپرسم :) بیشتر میتونید من رو توی فرندفید پیدا کنید

Visit Ali's Website

ارسال نظر



محصولات فروشگاه



<