استایل بندی لینک ها
سلام دوستان عزیز. امروز تصمیم گرفتم تا براتون ساخت یه باکس لینک دار رو آموزش بدم. نمونش رو دارین توی عکس می بینید که لینکتون چطوری میشه. آموزش جالبیه.
این نمونه ساده ی کد یک لینک هست
شما باید یه اطلاعات کلی در مورد استایل نویسی داشته باشید. اگه ندارید می تونید از کدی که براتون گذاشتم استفاده کنید و این آموزش رو اجرا کنید.
این استایل برای اینه که شما لینکهاتون رو براش یه باکس درست کنید و درست یه چیزی مثل عکس بشه.
#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>
خوب حالا رسیدیم به وقت گذاشتن لینکها. حالا برای گذاشتن اینجور لینکهایی دیگه نمی تونید از کد اون نمونه ساده استفاده کنید و برای این کار باید لینکهاتون رو طبق کدهای زیر قرار بدید.
<a class=”sel”>1</a><a href=”/a.htm”>2</a>
<a href=”/b.htm”>3</a>
</div>
دوستانی که کپی می کنند لینک منبع یادشون نره.
این هم یه کد کلی و کامل :
<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 ذخیره کنید می تونید این عمل رو ببینید.
